How I Built a Chrome Volume Booster with Manifest V3 and Web Audio API
Building browser extensions looks simple from the outside — a popup, some buttons, and a few lines of JavaScript.
But when I started building VolumeX, a Chrome extension that can boost tab audio up to 600%, I discovered that working with browser audio is much more interesting.
Why I built VolumeX
I often found myself watching videos, attending online meetings, or using websites where the audio was too quiet. Increasing the system volume was not always enough.
I wanted a solution that could:
Control volume for individual tabs
Boost audio beyond the default limit
Remember settings for websites
Provide audio customization
Keep everything private
So I started building VolumeX.
The challenge: Chrome extension audio limitations
Chrome extensions cannot directly modify another tab's audio.
The solution was using:
chrome.tabCapture
offscreen documents
Web Audio API
The extension captures the tab's audio stream and processes it locally before sending it back to the user.
Building the Manifest V3 architecture
Manifest V3 changed the extension architecture by replacing background pages with service workers.
VolumeX uses:
background.js as the service worker
offscreen.html for continuous audio processing
Popup UI for user controls
The service worker manages communication, while the offscreen document owns the AudioContext and audio graph.
Creating the audio processing pipeline
The audio flow looks like this:
Tab Audio
↓
chrome.tabCapture
↓
MediaStream
↓
AudioContext
↓
EQ Filters
↓
GainNode
↓
Compressor
↓
Output
The extension uses:
GainNode for volume boosting
BiquadFilterNode for equalizer controls
DynamicsCompressorNode for protecting against sudden loud spikes
Adding an Equalizer
I added a 6-band EQ system:
60Hz bass
170Hz
350Hz
1kHz
3.5kHz
10kHz treble
Each band can be adjusted independently, giving users more control than just increasing volume.
Handling Manifest V3 challenges
Some interesting problems I solved:
- Service worker restarts
Manifest V3 service workers can shut down when idle.
To avoid losing state, VolumeX stores tab information using chrome.storage.session and restores it when the worker wakes up.
- Keeping audio alive after closing popup
The popup cannot own the AudioContext because it disappears when closed.
The offscreen document keeps audio processing alive in the background.
- Preventing audio spikes
Boosting audio can make sudden sounds uncomfortable.
I added an optional loud audio protection system using a compressor to reduce extreme spikes.
What I learned
Building VolumeX taught me:
Browser APIs can be powerful but have strict security rules
Manifest V3 requires a different mindset
Audio processing is a fascinating area of web development
Small tools can have surprisingly complex engineering behind them
Try VolumeX
VolumeX is available as a free Chrome extension.
Features:
Up to 600% volume boost
Per-tab volume control
Equalizer
Keyboard shortcuts
Website memory
Privacy-focused local processing
I would love feedback from developers and users:
Have you built Chrome extensions with Manifest V3?
What browser APIs should I explore next?
What features would make VolumeX more useful?
Try VolumeX
You can install VolumeX for free from the Chrome Web Store:
🔗 Chrome Web Store:
https://chromewebstore.google.com/detail/volumex-volume-booster/gaccfipegkaepdjkihmgdniloioibbga
Features:
🔊 Boost tab volume up to 600%
🎚️ Per-tab volume control
🎵 6-band equalizer
⌨️ Keyboard shortcuts
💾 Website-specific settings
🔒 Privacy-focused local audio processing
I would love your feedback and suggestions for future improvements!
Thanks for reading! 🚀
Top comments (2)
How did you handle audio context suspension in the background script, and would love to swap ideas on optimizing volume boosting algorithms.
Thanks! That's a great question. I don't keep the AudioContext in the background service worker since Manifest V3 service workers can be suspended. Instead, I use an offscreen document to host the AudioContext and audio processing pipeline, while the service worker mainly handles coordination and messaging. This approach keeps audio processing running even after the popup is closed. I'd definitely be interested in swapping ideas on volume boosting algorithms and audio processing techniques. Always looking for ways to improve quality while minimizing distortion!