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

Google Chrome extension to automatically group tabs by URL
https://github.com/loilo/auto-group-tabs

chrome-extension vue

Last synced: 4 months ago
JSON representation

Google Chrome extension to automatically group tabs by URL

• Host: GitHub
• URL: https://github.com/loilo/auto-group-tabs
• Owner: loilo
• License: mit
• Created: 2021-03-13T20:22:40.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2023-10-15T14:41:27.000Z (over 1 year ago)
• Last Synced: 2024-04-15T01:13:00.677Z (10 months ago)
• Topics: chrome-extension, vue
• Language: JavaScript
• Homepage: https://chrome.google.com/webstore/detail/auto-group-tabs/danncghahncanipdoajmakdbeaophenb
• Size: 503 KB
• Stars: 89
• Watchers: 5
• Forks: 11
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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](https://v3.vuejs.org/) and [Vite](https://vitejs.dev/).

### Setup

Clone this project:

```bash

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

```

Step into the cloned folder and install [npm](https://www.npmjs.com/) dependencies:

```bash

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:

```bash

npm run dev

```

This will start up the Vite dev server and serve the options page on [localhost:6655](http://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](https://developers.google.com/web/tools/chrome-devtools/device-mode) 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:

```bash

npm run build

```

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