Building a 1-Click Video Audio Downloader: Solving DASH Chunking and Cloudflare 403 in Extensions

Have you ever tried building a lightweight browser extension to extract audio from video streams in a single click, only to hit two unexpected brick walls?

1. The 1-Second Audio Trap: You intercept videoplayback network requests, strip the range parameter, and download... only to realize it is a 1-second MSE initialization fragment.
2. The Cloudflare 403 Wall: You delegate conversion to an online API endpoint, but inside the browser extension, the request gets blocked with HTTP 403 Forbidden (api_key_required) because Chromium forces the Origin: chrome-extension://<id> header on all cross-site fetches.

In this deep dive, we break down how to solve both issues in Manifest V3 without installing heavy local dependencies like ffmpeg or yt-dlp.

The Problem with Modern Streaming: MediaSource Extensions (MSE) & DASH

Modern streaming platforms (YouTube, VK, Twitch) no longer serve single monolithic .mp4 or .mp3 files. Instead, they use Dynamic Adaptive Streaming over HTTP (DASH):

• The audio is split into 1 to 5 second byte chunks (mime=audio/mp4; codecs="mp4a.40.2" for itag 140, or mime=audio/webm; codecs="opus" for itag 251).
• Simply using chrome.webRequest.onResponseStarted captures whatever fragment the player is currently buffering. If you try to download that raw URL, you only get that isolated sequence chunk.

The Cloudflare 403 Dilemma in Manifest V3

To avoid cluttering the user's computer with heavy binaries (like Python, yt-dlp, or FFmpeg), offloading audio extraction to an online conversion API is ideal.

However, when you do this in JavaScript inside a Chrome/Chromium extension:

// This fails with HTTP 403 in the browser!
const resp = await fetch('https://api-service.com/download.php?url=' + encodeURIComponent(videoUrl), {
  headers: { 'Referer': 'https://api-service.com/' }
});

Even though you specify Referer, Chromium automatically injects:

Origin: chrome-extension://<your-extension-id>
Sec-Fetch-Site: cross-site
Sec-Fetch-Mode: cors

Anti-bot systems (like Cloudflare Turnstile or WAF rules) detect chrome-extension:// in the Origin header and immediately reject the request with HTTP 403 or a CAPTCHA challenge.

The Solution: DeclarativeNetRequest Header Rewriting

In Manifest V3, webRequestBlocking is deprecated for standard extensions, but declarativeNetRequest provides an efficient, declarative way to override outgoing headers before they touch the wire.

Here is the exact rule configuration in rules.json:

[
  {
    "id": 1,
    "priority": 1,
    "action": {
      "type": "modifyHeaders",
      "requestHeaders": [
        { "header": "Origin", "operation": "set", "value": "https://api-service.com" },
        { "header": "Referer", "operation": "set", "value": "https://api-service.com/" }
      ]
    },
    "condition": {
      "urlFilter": "*api-service.com*",
      "resourceTypes": ["xmlhttprequest", "other", "sub_frame"]
    }
  }
]

Key Nuances:

1. Include "other" in resourceTypes: Requests made via fetch() from an MV3 Background Service Worker are often categorized by the Chromium network stack as "other" rather than "xmlhttprequest".
2. Ensure Host Permissions: You must declare "https://*.api-service.com/*" under host_permissions in manifest.json.

Minimalist Apple-Style UX: 1-Click Download

Users do not want complex dashboards or multi-step forms. We designed the popup around Apple Human Interface Guidelines:

• Clean translucent dark surface (rgba(28, 28, 30, 0.95) with backdrop-filter: blur(20px)).
• Crisp SF Pro typography.
• Single prominent action button with tactile press states and keyboard shortcuts (Enter).
• Seamless background progress polling:

[ Click Header Icon ] ---> [ Show Video Title ] ---> [ Press Enter ] ---> [ Complete MP3 in Downloads ]

Live Showcase & Open Source

We released two free micro-extensions built on this architecture:

1. Yandex Neural Voiceover Downloader (capturing translated voiceover tracks in 1 click).
2. Original Video Audio Downloader (clean YouTube MP3 stream extraction).

Check out the live interactive showcase and downloadable ZIP packages:
AudioTools on Toolworks Showcase

Have you dealt with Cloudflare origin filtering in browser extensions? Share your thoughts below!