Tab Manager -- Chrome Extension

Automatically organize your browser tabs into color-coded groups based on URL rules you define. Stop drowning in 20+ open tabs -- set your rules once and Tab Manager keeps things tidy as you browse.

How It Works

You open gitlab.com/project/merge_requests
    --> Tab Manager sees the URL matches your "gitlab.com" rule
    --> Finds or creates a "GitLab" group (orange)
    --> Moves the tab into that group

Features

• URL-based auto-grouping -- Define rules using domain matching, substring matching, or full regex. Tabs are grouped the moment they finish loading.
• Smart group management -- If a matching group already exists, the tab is appended. If no group exists yet, one is created with the name and color you chose.
• Auto-collapse (optional) -- Toggle on from the popup to automatically expand the active group and collapse all others when you switch tabs. Off by default.
• Group-scoped tab cleanup -- Close tabs to the right or close other tabs within the active group only, without touching other groups or ungrouped tabs.
• Instant retroactive grouping -- Hit "Apply All" to group every currently open tab against your rules. Great for when you install the extension with 50 tabs already open.
• Full rule control -- Add, edit, delete, enable, or disable rules at any time through the popup.
• Synced across devices -- Rules and settings are stored via chrome.storage.sync, so they follow your Google account.
• Extensive debug logging -- Every action is logged with tagged, color-coded, leveled output in the service worker and popup consoles for easy troubleshooting.

Installation

From a release (easiest)

1. Go to the Releases page and download the latest tab-manager.zip.
2. Unzip it to a folder on your machine.
3. Navigate to chrome://extensions.
4. Enable Developer mode (top-right toggle).
5. Click Load unpacked and select the unzipped folder.
6. Pin the Tab Manager icon from the extensions menu for quick access.

From source

git clone https://github.com/sarveshhiwase/tab-manager.git
cd tab-manager
npm install
npm run build

Then load dist/ into Chrome using the same steps above (3--6).

Usage

1. Click the Tab Manager icon in your toolbar.
2. (Optional) Toggle Auto-collapse inactive groups if you want only the active group expanded.
3. Fill in the rule form:

Field	Description	Example
URL pattern	The text to match against tab URLs	gitlab.com
Match type	How to match: Domain, Contains, or Regex	Domain
Group name	The label shown on the tab group	GitLab
Color	One of Chrome's 9 group colors	Orange

4. Click Add Rule.
5. Browse normally -- any tab whose URL matches a rule is grouped automatically.

Match Types Explained

Type	Behavior	Example pattern	Matches
Domain	Compares the URL's hostname (supports subdomains)	gitlab.com	gitlab.com/..., us.gitlab.com/...
Contains	Checks if the full URL contains the substring	confluence	Any URL with "confluence" in it
Regex	Tests the full URL against a regular expression	github\.com/.*/pull	GitHub pull request URLs

Example Rules

Pattern	Match Type	Group Name	Color
gitlab.com	Domain	GitLab	Orange
confluence	Contains	Docs	Blue
jira	Contains	Bugs	Red
stackoverflow.com	Domain	Stack Overflow	Yellow
github\.com/.*/pull	Regex	PRs	Green
docs.google.com	Domain	Google Docs	Cyan

Group Actions

The Active Group section at the bottom of the popup provides two actions scoped to the currently active tab's group:

Button	Behavior
Close Right	Closes all tabs to the right of the active tab within its group.
Close Others	Closes all other tabs in the group, keeping only the active tab.

Both actions are no-ops if the active tab is not in any group.

Settings

Setting	Default	Description
Auto-collapse inactive groups	Off	When enabled, switching to a tab expands its group and collapses all others.

Settings are synced across devices alongside your rules.

Development

npm run dev

Starts webpack in watch mode. After saving a file, go to chrome://extensions and click the refresh icon on the Tab Manager card to reload.

Debugging

The service worker and popup each have their own console:

• Service worker console: chrome://extensions > Tab Manager > click the "service worker" link under "Inspect views".
• Popup console: Right-click the popup > Inspect.

All logs are tagged with their source module and color-coded by severity:

Tag	Module
[TabMgr:ServiceWorker]	Event listeners and tab evaluation
[TabMgr:RuleEngine]	Rule matching logic
[TabMgr:URLMatcher]	Individual URL pattern tests
[TabMgr:GroupMgr]	Tab group creation and assignment
[TabMgr:Collapse]	Auto-collapse decisions
[TabMgr:TabActions]	Group-scoped close right / close others
[TabMgr:Storage]	Storage reads and writes

Scripts

Command	Description
npm run build	Production build to dist/
npm run dev	Watch mode for development
npm run lint	Run ESLint on all source files
npm run lint:fix	Auto-fix lint issues

Project Structure

tab-manager/
  manifest.json                   Manifest V3 config
  package.json                    Dependencies and scripts
  tsconfig.json                   Strict TypeScript config
  eslint.config.mjs               Flat-config ESLint
  webpack.config.ts               Webpack bundler config
  .github/workflows/build.yml     CI/CD -- lint, build, and release on tag push
  src/
    icons/                        Extension icons (16, 32, 48, 128px PNGs)
    types/index.ts                Rule, Settings, MatchType, GroupColor types
    background/
      service-worker.ts           Entry point -- registers all Chrome event listeners
      rule-engine.ts              Matches URLs against user-defined rules
      group-manager.ts            Creates/finds tab groups and assigns tabs
      collapse-manager.ts         Expands active group, collapses the rest
      tab-actions.ts              Group-scoped close right / close others
    popup/
      popup.html                  Extension popup markup
      popup.ts                    Rule CRUD, settings, and group actions
      popup.css                   Dark-themed popup styling
    utils/
      logger.ts                   Tagged, leveled, color-coded console logger
      storage.ts                  Typed chrome.storage.sync wrapper (rules + settings)
      url-matcher.ts              Domain, contains, and regex matchers
  dist/                           Built extension -- load this into Chrome

Tech Stack

• TypeScript -- strict mode, noUncheckedIndexedAccess, noImplicitReturns
• Chrome Manifest V3 -- service worker, tabGroups API, storage.sync
• Webpack 5 -- bundles background and popup entry points with CSS extraction
• ESLint -- @typescript-eslint strict + recommended rulesets

Permissions

Permission	Why
tabs	Read tab URLs, listen to tab events, close tabs
tabGroups	Create, query, update, and collapse tab groups
storage	Persist rules and settings via chrome.storage.sync

No host permissions are requested. The extension never reads page content -- it only looks at URLs.

Releasing

Pushing a version tag triggers the CI pipeline to build the extension and publish a GitHub release with the packaged zip:

git tag v1.1.0
git push origin master --tags

Contributing

1. Fork the repo.
2. Create a feature branch (git checkout -b feature/my-change).
3. Make your changes and ensure npm run lint and npm run build pass cleanly.
4. Open a pull request. CI will automatically lint and build your branch.

License

MIT