How I built one Manifest V3 extension that runs on Chrome...

I built a browser extension called Silenzio that blurs or blacks out videos and images, mutes audio, and lets me set rules about where and when it applies. The motivation is a bit personal: scrolling feeds, search results, and "people you may know" lists kept stealing minutes I didn't actually want to spend. A blurred feed turns out to be a surprisingly effective speed bump.

The technically interesting part is that the whole thing — Chrome, Edge, and Firefox — runs from a single source folder. No build step, no per-browser variants, no Webpack. Here's how that works, plus a handful of MV3-specific tricks I had to find along the way.

What it does

Two independent toggles — videos and images — each with Off / Blur / Blackout. Audio follows the video toggle. Three more knobs on top: an allowlist or blocklist of sites, per-site or global pause timers, and an optional "working hours" schedule so the whole thing only runs during a daily window you pick.

One manifest, three engines

Manifest V3 is technically the same across Chrome, Edge, and Firefox 115+. In practice you can write a single manifest.json that all three load, because:

Chromium engines ignore unknown manifest fields.
The MV3 fields Silenzio actually uses (content_scripts, host_permissions, action, options_page, permissions) are part of the standard that Firefox now implements.

The Firefox-specific block goes at the bottom and Chromium ignores it:

"browser_specific_settings": {
  "gecko": {
    "id": "silenzio@silenzio.local",
    "strict_min_version": "115.0"
  }
}

That's it. The same files load in three browsers with zero conditional code.

The one gotcha you can't solve in the manifest is that Firefox MV3 treats <all_urls> host permissions as user-granted post-install. After temporary-loading the add-on, you have to click the toolbar icon → puzzle-piece menu → Silenzio → "Always allow on all websites" once. Until then, the content script won't actually inject. Easy to miss the first time.

Catching short-form feeds

The hard case for a media-filtering extension is short-form video — Shorts, Reels, the LinkedIn feed. Those surfaces aggressively mount and unmount <video> elements as you scroll. A naive document.querySelectorAll("video") at load time finds nothing useful, because most of the videos haven't been mounted yet.

The fix is a MutationObserver rooted at document.documentElement, started at document_start:

const observer = new MutationObserver((mutations) => {
  const eff = effectiveModes();
  for (const m of mutations) {
    for (const node of m.addedNodes) {
      if (node.nodeType !== 1) continue;
      if (node.matches?.(SELECTOR)) applyTo(node, eff);
      node.querySelectorAll?.(SELECTOR).forEach((el) => applyTo(el, eff));
    }
  }
});
observer.observe(document.documentElement, { childList: true, subtree: true });

Because the manifest sets "run_at": "document_start", the observer is in place before the body even exists. Newly-mounted videos and images get the filter class within a tick of being inserted.

There's a small but important detail in the order: I start the observer before loading the saved config from chrome.storage.local. Storage is asynchronous, and the round trip easily takes long enough for an autoplay video to mount and start playing. So the observer runs with defaults immediately, then re-applies once storage resolves. The visible result is that pages never flash an unblurred frame.

One CSS path for videos and images

The CSS for the blur and blackout is dumb on purpose:

.silenzio-blur { filter: blur(40px) !important; }
.silenzio-blackout { filter: brightness(0) !important; }

filter is an element-level property. It applies to whatever the box renders — video frames, image content, even async-loaded image bytes that arrive after the class is set. That means <video> and <img> share exactly one apply path. The element-type dispatch happens once, in modeFor:

function modeFor(el, eff) {
  if (el instanceof HTMLVideoElement) return eff.video;
  if (el instanceof HTMLImageElement) return eff.image;
  if (el instanceof HTMLMediaElement) return eff.video; // <audio> follows video
  return "off";
}

Adding new media types later is a two-line change in this function and one selector update. The CSS doesn't need to know anything.

Re-muting hostile sites

el.muted = true is fine 90% of the time. The 10% case is sites that programmatically unmute on a player event, or swap the src on the same element when you scroll to the next short. So I attach two capture-phase listeners on document:

document.addEventListener("volumechange", (e) => {
  if (effectiveModes().video !== "off" &&
      e.target instanceof HTMLMediaElement &&
      !e.target.muted) {
    e.target.muted = true;
  }
}, true);

document.addEventListener("play", (e) => {
  if (e.target instanceof HTMLMediaElement) applyTo(e.target, effectiveModes());
}, true);

Capture phase matters here. By the time volumechange bubbles to the document the site's own handler has already run; capture-phase intercepts before. This is enough to keep YouTube, LinkedIn, and Reels muted reliably.

The decision flow

Every time the extension applies a mode it goes through effectiveModes():

Scope — if the current hostname doesn't match the user's allowlist or blocklist, both modes return off. Match is exact-or-suffix, so adding youtube.com covers www.youtube.com and m.youtube.com.
Pause — if there's a global or site-specific pause active right now, both modes return off.
Schedule — if working hours are enabled and the current time is outside the window, both modes return off.
Otherwise return the user's configured { video, image } modes.

This is the only place precedence is decided, and the order matters: I want a one-click pause to override the user's other rules without needing to think about them.

Time-based state is re-checked via a single setTimeout per page that targets the next relevant boundary — the exact pause expiry, or the next minute boundary if a schedule is active. Doing exact schedule-edge math with days-of-week and midnight crossings is fussy; minute granularity is more than enough for a "working hours" feature and avoids a category of bugs.

What I didn't (yet) solve

Three known gaps, all on the someday list:

CSS background-image — many avatars and decorative banners are painted via background-image rather than <img>. Filtering them requires walking computed styles and either injecting per-element CSS or patching stylesheets. I skipped it for v1.
Inline <svg> — mostly icons, rarely worth blurring. (<img src="*.svg"> is filtered because the selector catches <img>.)
Web Audio API graphs — HTMLMediaElement.muted doesn't stop a Web Audio graph that pulls samples directly. Ordinary playback on YouTube, LinkedIn, etc. uses HTMLMediaElement and is muted correctly; some games and audio editors aren't.

Each is solvable, just not at v1 scope.

Try it

Silenzio is on the Chrome Web Store — works in Edge too. The source, including the Firefox load instructions, lives at github.com/alicommit-malp/silenzio. No build step — Load unpacked and go.

If you've built a cross-browser MV3 extension and have a cleaner answer for Firefox's host-permission UX, the Web Audio mute, or background-image filtering, I'd love to hear it.

推荐订阅源

DEV Community