This is a browser extension for Google Chrome and Firefox which enables the configuration of tab groups for certain URLs. Navigating to such a URL will automatically add the tab to its configured group (creating the group if it does not exist).
This project is built with Vue and Vite.
Requirements: Note that at least Node.js v24 is needed to develop and build this project.
Clone this project:
git clone https://github.com/loilo/auto-group-tabs.gitStep into the cloned folder and install npm dependencies:
npm ciThe fastest way to tinker with the heart of this extension — its options page — is to run the dev script:
npm run devThis will start up the Vite dev server and serve the options page on localhost:6655. Having the options page directly in the browser allows for comfort features like hot module reloading to be usable during development.
In this mode, Chrome extension APIs accessed during production (e.g. chrome.i18n and chrome.storage) use browser-based fallbacks.
Note: You probably want to use the device toolbar of Chrome's devtools to give the options page a proper viewport. Chrome's options overlays are (at the time of writing) 400px wide, and I used a height of 600px during development.
To test the extension in Chrome, you'll have to do a production build of it:
npm run build:chromiumThis will create a subfolder with the name extension-chromium inside the project, which can be installed in your Chrome browser.
To test the extension in Firefox, you'll have to do a production build of it and zip it:
npm run pack:geckoThis will create a file named auto-group-tabs.gecko.zip inside the project root, which can be temporarily added under about:debugging#/runtime/this-firefox.
Skim through the package.json to find what to run for your target browser. To do all the work necessary for distributing the extension, run:
npm run deployThis will run all tests, create production builds for all supported browsers, and pack them into zip files ready for upload to the respective extension stores.