Tab manager plugin for Chromium browsers and Firefox. This release gives the user a larger overview over active and archived tabs, as well the possibility to arrange windows and tabs into folders - a convenient feature for those who needs to launch different sessions for different purposes.
- Create folders (either new, or by using history or session as presets)
- Duplicate and merge folders
- Launch folders in incognito
- Launch folders as a collection/group (Chrome/Edge only)
- Search through folders, history and current session
- Simple sidepanel for core features
- Options page for expanded overview and more features
- Removal of fullscreen feature
- Massive code refactor and isolation of components. Update tailors to developers, and does not affect end user.
HTML5, CSS3/SASS, Javascript/Typescript, React, Redux, JEST, Tailwind, Webextension API
Once installed, you can pin this plugin to your browser's navigation bar. Both Chrome and Firefox has a pussle icon at the top right border, from where you can pin the plugin.
Clicking the pinned icon will toggle sidepanel for quick use. Should you need more features or better overview, click the "Advanced" button at the bottom of the sidepanel.
Although not necessary, sticking to the following would help keeping components clean and organized.
- Try to avoid declaring components inside another component (JSX.Element).
- Consider refactoring components if they become too big or clumsy to work with (e.g. move large functions to their own files).
- Refactored/sub components should be placed in their own folders and follow a specific naming convention:
./src
...
- components
- utils
- [my_component]
- [my_component].tsx
- functions
- a_component_specific_function.tsx
- a_event_handler.ts
- components
- child_component_a.tsx
- child_component_b.tsx
The ./src folder is formatted using Prettier, which may be used together with the Prettier Code formatter plugin for VSCode to e.g. enable auto-format when saving. Another option could be to just format the whole folder using the following command:
npm run format
This project was originally developed using a regular pc, with Windows 10 Home Edition as its operating system. There are really no specific requirements, and the instructions below should be enough to set up the tools/libraries required to work with the project on any machine.
- NPM (version 10.4.0 or higher) needs to be installed on your machine
- Clone this repository to your local environment using the repository's git file, or simply download and extract the zip file to an empty folder.
- In your project's folder, run the following command in the command prompt or terminal to install all dependencies listed in ./package.json
npm install
From here on out, you're free to play around with the code however you like - and even make development or production builds (see instructiosn below) for private use if you wish. Just make sure to adhere to the conditions stated in the LICENSE.md file.
These builds are meant to be loaded into browser's dev environment for manual testing. Retains all console.logs. Firefox
npm run build-dev-firefox
Output folder:
- ./dist-dev-firefox
Output packages:
- firefox-dev-package.zip
Load into browser:
- Open Firefox
- Write about:debugging into the address bar
- Click This Firefox in the left bar menu
- Click Load Temporary Add-on... button and head for the ./dist-dev-firefox folder
- Click manifest.json to load the unpackaged plugin into the browser
Chrome
npm run build-dev-chrome
Output folder:
- ./dist-dev-chrome
Output packages:
- chrome-dev-package.zip
Load into browser:
- Open Chrome
- Click the menu and head for Extensions -> Manage Extensions_
- Enable developer mode
- Click Load unpacked
- Head for the ./dist-dev-chrome folder and load it into the browser
Firefox
npm run build-prod-firefox
Output folder:
- ./dist-prod-firefox
Output packages:
- firefox-prod-package.zip
Chrome
npm run build-prod-chrome
Output folder:
- ./dist-prod-chrome
Output packages:
- chrome-prod-package.zip
npm run test
Run unit and integration tests (JEST). The tests are available in /src/__tests__/. The coverage is presented in ./coverage/Icov-report/index.html
Run this command after changing existing components (or when installing or updating dependencies), to check if anything related to user interaction gets broken. Add new tests when adding new components or features. Each test should have clear description and have a relevant purpose (mere coverage hunting does not count...)
This feature is turned off by default, and needs to be manually enabled. Follow these steps:
Firefox:
- Go to browser menu -> Add-ons and themes
- Click "Extensions" in the right-hand bar
- Click "Tab Management Browser Plugin" and allow it to run in private mode
Chrome:
- Go to browser menu -> Extensions -> Manage Extensions
- Click the "Details" button located in the "Tab Management Browser Plugin" section
- Enable the "Allow in Incognito" option
Once done, the folders will show an "Open in incognito" option in their launch menus.
Firefox currently does not support this feature. Once the browser supports it, I'll make sure to add another launch option to the plugin.
Yes, this plugin is compatible with Microsoft Edge. You may install the plugin in the same manner as in Chrome (use the Chrome package and install it in Edge).
For the time being, this plugin is meant for my own personal use and is also part of my portfolio. I will publish it to the stores at a later time.
A verified package signed by Mozilla can be installed in Firefox for personal use from the Release page (v1.0.1). An equivalent package for Chrome/Edge does not exist at the moment, so consider installing the dev package in these browsers if you wish to use it.
New features will be added as new ideas or feedback/suggestions for significant improvements come up. Smaller bug fixes and enhancements may be published from time to time, with no set schedule nor roadmap at this point.
Email: [email protected]
See LICENSE.md for more information.