idealclover/auto-group-tabs

Google Chrome extension to automatically group tabs by URL

Auto-Group Tabs

This is a Google Chrome extension 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).

Development

This project is built with Vue and Vite.

Setup

Clone this project:

git clone https://github.com/loilo/auto-group-tabs.git

Step into the cloned folder and install npm dependencies:

npm ci

Development of the Options UI

The fastest way to tinker with the heart of this extension — its options page — is to run the dev script:

npm run dev

This 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.

Testing in Chrome

To test the extension in Chrome, you'll have to do a production build of it:

npm run build

This will create a subfolder with the name extension inside the project, which can be installed in your Chrome browser.