Tab Volume Controller

A powerful Chrome browser extension that gives you independent volume control over each browser tab. Perfect for managing multiple audio sources simultaneously - whether you're listening to music while browsing, or need to quickly adjust volumes during video calls.

Key Features

• Per-tab volume control: Each tab can have different volume levels
• Smart call detection: Automatically detects video call platforms
• Auto-mute: Can mute other tabs when joining calls
• Persistent settings: Remembers volume levels and preferences
• Modern UI: Clean, responsive interface with dark mode
• Cross-origin support: Works with media in iframes (same-origin)

How It Works

The extension operates through a sophisticated multi-component architecture:

1. Extension Initialization

The browser reads manifest.json first, which registers the background service worker, popup interface, and content scripts. The extension requests necessary permissions for tabs, scripting, storage, and all URLs.

2. Background Script

Runs continuously as a service worker (src/background.js), monitoring tab updates and detecting when users join video calls. On install/update, it injects content scripts into all existing tabs. When call URLs are detected (Meet, Discord, Zoom, Teams, Slack), it can automatically mute other tabs if enabled.

3. Content Script

Injected into every web page the user visits (src/content.js), listening for messages from the popup. Controls all <audio>, <video> elements on the page, plus advanced media detection in iframes, canvas elements, and video-like selectors. Handles volume control (0-1) and play/pause functionality.

4. Popup Interface

Modern React-based UI (src/popup.html → src/popup-main.jsx → src/popup.jsx) that lists all audible tabs with individual controls. Manages per-tab volume, mute status, and play state, persisting user preferences to localStorage. Sends messages to content scripts via Chrome's messaging API.

5. Build System

Uses Vite with React plugin for fast development and optimized production builds. Multi-entry configuration builds popup, content script, and background script separately, outputting to the dist/ folder for extension loading.

Installation

Development Setup

1. Clone the repository
2. Install dependencies: npm install
3. Build the extension: npm run build
4. Open Chrome and navigate to chrome://extensions/
5. Enable "Developer mode" (toggle in top right)
6. Click "Load unpacked" and select the dist/ folder
7. The extension will now be loaded and ready for testing
8. Make changes to code and run npm run build again to update the extension

Production Installation

Here's the link to install extension on your chrome browser : https://chromewebstore.google.com/detail/tab-volume-controller/leafoodbdhdiebenamdicohohmhjflfe

Usage

1. Click the extension icon in your browser toolbar ( Pin the extension for ease of usage )
2. View audible tabs - all tabs with audio will be listed
3. Adjust volume - use the slider for each tab (0-100%)
4. Mute/unmute - click the volume icon to toggle mute
5. Play/pause - control playback (hidden for call tabs)
6. Toggle dark mode - switch between light and dark themes
7. Enable auto-mute - automatically mute other tabs when joining calls

Supported Platforms

The extension automatically detects and handles these video call platforms:

• Google Meet
• Discord
• Zoom
• Microsoft Teams
• Slack

Technical Details

• Manifest Version: 3
• Framework: React 19 with Vite
• Icons: React Icons (Material Design)
• Storage: Chrome Storage API + localStorage
• Permissions: tabs, scripting, storage, host permissions for all URLs

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Support

If you find this extension useful, consider supporting the development: Buy Me a Coffee