[Showcase] Building a Global Media Controller for Firefox (Proof-of-Concept)

I’ve developed a lightweight extension to add a feature that Firefox currently completely lacks: a native, global media controller.

The Problem: Firefox has no centralized, global UI for users to view or control media playing across different tabs.

The Solution: I built a fully functional global media controller from scratch. It uses browser.storage.local to cache MediaSession metadata, creating a persistent, system-wide hub for media management regardless of which tab is active.

Technical Implementation:

  • Repo: Media Controller (GitHub)

  • Stack: Manifest V3, WebExtensions API.

  • UI: Features dynamic color sampling to match media artwork seamlessly.

I am sharing this open-source proof-of-concept with the community. I would appreciate any feedback from developers on the architecture, and I’m offering this logic as a reference for anyone looking to finally bring a native global media controller to Firefox.

Yep, I know there is many extension, but the extension created by me is having a modern UI like that of Chrome and MS Edge. It will load music artwork from the web other meta data’s to make it more cool and look like MS Edge’s media controller.

If there is any bug in my codes, please let me know it.

Thank you.