MagicPause / FadeTab Audio

Experimental browser-extension toy. This is a personal MVP, not a production-ready media controller.

MagicPause (currently displayed as FadeTab Audio) is a small Manifest V3 extension for Chromium browsers. It experiments with making web-media transitions less abrupt: media can fade out and pause when you leave a tab, then resume and fade back in when you return.

The project intentionally controls standard HTML media elements directly. It does not capture tab audio, record audio, or use a backend.

Project status

• Version: 0.1.0
• Stage: toy / internal MVP
• Distribution: unpacked extension only
• Chrome Web Store: not published
• Compatibility: not systematically tested

Implemented

• Detect standard <audio> and <video> elements, including elements added later to the page
• Fade out currently playing media when switching away from its tab
• Optionally pause media after the fade-out
• Resume only media previously paused by the extension
• Fade resumed media back to its previous volume
• Fade in after a manual play action
• Separate fade-in and fade-out duration controls (0.2–5 seconds)
• Global enable/disable switch
• Per-hostname enable/disable switch
• Media status counts in the popup
• Three popup themes
• Twelve popup languages, including RTL layout for Arabic
• Local settings through Chrome sync storage

Site compatibility

The content script scans for standard <audio> and <video> elements on ordinary web pages. That makes the following sites mechanically compatible in their standard players, but the repository does not yet contain an end-to-end compatibility test suite.

Site / media type	Current status	Notes
YouTube	Expected to work; not fully verified	Standard videos expose an HTML <video> element. Shorts, live streams, ads, SPA navigation, PiP, and embedded players still need testing.
Bilibili	Expected to work; not fully verified	Standard players expose an HTML <video> element. Bangumi, live, ads, PiP, and player replacement still need testing.
Generic HTML5 audio/video	Expected to work	Works when playback and volume are controlled through normal HTML media elements.
YouTube Music	Experimental	May work through its media element, but has not been tested.
Spotify Web / custom players	Unknown	Custom playback logic or Web Audio may bypass this extension.
DRM and cross-origin embeds	Unreliable	Sites may reject or override JavaScript volume/playback changes.

“Expected to work” means the implementation targets the mechanism used by the site. It does not mean that every player mode or browser version has been validated.

Not implemented

• Manual-pause fade-out
  • The current Fade manual controls setting affects manual play fade-in.
  • A manual pause currently stops immediately; the extension records the state and restores the volume, but does not delay or intercept the pause to create a fade-out.
• Exact-frame-safe soft pause for video
• Different manual-pause policies for audio and video
• Fade-in after seeking
• Site-specific fade durations or behavior profiles
• Window blur/minimize handling
• Computer lock/unlock handling
• Picture-in-Picture policy
• Fullscreen policy
• Keyboard shortcuts
• User-facing debug-log switch
• Shadow DOM and comprehensive iframe traversal
• Full-tab audio processing with chrome.tabCapture
• Web Audio API-only players
• Browser games, meeting apps, system audio, or native desktop apps
• Compatibility test matrix and automated browser tests
• MV Mode
• Chrome Web Store or Edge Add-ons packaging

Known limitations

• Chrome autoplay rules can block automatic resume on some pages.
• Background tabs throttle timers; the fade engine uses several timer fallbacks, but site behavior can still vary.
• A page may replace media elements or overwrite volume/playback state through its own player logic.
• Restricted browser pages do not allow content scripts.
• The extension currently requests access to all ordinary web pages so it can find media elements.
• Multiple media-control or volume extensions may conflict with one another.

Install locally

npm install
npm run build

Then:

1. Open chrome://extensions (or the equivalent page in Edge, Brave, or Vivaldi).
2. Enable Developer mode.
3. Choose Load unpacked.
4. Select this project's dist directory.
5. After rebuilding or reloading the extension, refresh any media page being tested.

Development

npm run typecheck
npm run build

The extension consists of:

• a React/TypeScript popup
• a Manifest V3 service worker that observes tab activation
• a content script that tracks and controls HTML media elements
• shared settings, messaging, and localization modules

Privacy

The current source has no backend, analytics, account system, or audio recording. Settings are stored with chrome.storage.sync.

License

No open-source license has been selected yet. Until one is added, the source is visible for inspection but no reuse license is granted.