Merge pull request 'align runner label to server config' (#12) from align-runner-label into master

Reviewed-on: http://192.168.1.74:30008/WesternTechnologies/goon_plugin/pulls/12

.claude/settings.local.json

@@ -1,8 +0,0 @@
-{
-  "permissions": {
-    "allow": [
-      "Bash(npm run *)",
-      "Bash(node --check /home/kyle/Documents/goon_plugin/src/viewer/index.js)"
-    ]
-  }
-}

.devcontainer/devcontainer.json

@@ -1,5 +1,5 @@
 {
-  "name": "Goon Plugin Dev",
+  "name": "VidPlex Dev",
   "image": "mcr.microsoft.com/devcontainers/javascript-node:22",
   "features": {
     "ghcr.io/devcontainers/features/sshd:1": {}

.github/workflows/ci.yml

@@ -8,7 +8,7 @@ on:
 
 jobs:
   test:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
     steps:
       - uses: actions/checkout@v4
 
@@ -19,6 +19,8 @@ jobs:
 
       - name: Install dependencies
         run: npm ci
+      - name: Build Articacts
+        run: npm run build
 
       - name: Run tests
         run: npm test

.github/workflows/release.yml

@@ -0,0 +1,81 @@
+name: Release
+
+on:
+  push:
+    tags:
+      - 'v*'
+
+jobs:
+  release:
+    runs-on: ubuntu-24.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build
+        run: npm run build
+
+      - name: Package dist.zip
+        shell: bash
+        run: |
+          cd dist
+          zip -r "../vidplex-${{ github.ref_name }}.zip" .
+
+      - name: Create Gitea release
+        shell: bash
+        env:
+          GITEA_TOKEN: ${{ secrets.GITEA_TOKEN }}
+          GITEA_API: ${{ secrets.GITEA_API || 'http://192.168.1.74:30008/api/v1' }}
+          REPO: ${{ github.repository }}
+          TAG: ${{ github.ref_name }}
+        run: |
+          if [ -z "$GITEA_TOKEN" ]; then
+            echo "::warning::GITEA_TOKEN secret is not set; skipping release creation. Add it in Gitea repo Settings > Secrets (repo scope)."
+            exit 0
+          fi
+
+          json_id() { node -e 'let d="";process.stdin.on("data",c=>d+=c).on("end",()=>{const j=JSON.parse(d||"{}");if(j.id==null){console.error("no release id:",JSON.stringify(j));process.exit(1)}console.log(j.id)})'; }
+
+          release_id=$(
+            curl -s -o /tmp/rel.json -w "%{http_code}" \
+              -H "Authorization: token $GITEA_TOKEN" \
+              "$GITEA_API/repos/$REPO/releases/tags/$TAG"
+          )
+
+          if [ "$release_id" = "200" ]; then
+            echo "Release for $TAG already exists; reusing it."
+            release_id=$(json_id < /tmp/rel.json)
+          else
+            echo "Creating release for $TAG."
+            release_id=$(
+              curl -s -o /tmp/rel.json -w "%{http_code}" -X POST \
+                -H "Authorization: token $GITEA_TOKEN" \
+                -H "Content-Type: application/json" \
+                -d "{\"tag_name\": \"$TAG\", \"name\": \"$TAG\", \"body\": \"Automated release build for $TAG\"}" \
+                "$GITEA_API/repos/$REPO/releases"
+            )
+            case "$release_id" in
+              201|200) release_id=$(json_id < /tmp/rel.json) ;;
+              *) echo "::error::release create returned HTTP $release_id: $(cat /tmp/rel.json)"; exit 1 ;;
+            esac
+          fi
+
+          echo "Uploading asset to release $release_id."
+          resp=$(curl -s -o /tmp/att.json -w "%{http_code}" -X POST \
+             -H "Authorization: token $GITEA_TOKEN" \
+             -F "attachment=@vidplex-${TAG}.zip" \
+             "$GITEA_API/repos/$REPO/releases/$release_id/assets")
+          if [ "$resp" != "200" ] && [ "$resp" != "201" ]; then
+            echo "::error::asset upload returned HTTP $resp: $(cat /tmp/att.json)"
+            exit 1
+          fi
+          cat /tmp/att.json
+          echo

.gitignore

@@ -3,3 +3,4 @@ dist/
 .vscode-insiders/
 /icons
 /icons/*
+.claude/settings.local.json

QA_REPORT_HLS.md

@@ -1,160 +0,0 @@
-# Goon Plugin — HLS QA Report
-
-## Summary
-
-**Scope**: Comprehensive QA verification of HLS (HTTP Live Streaming) support in the Goon Plugin Chrome extension, including detection, playback, tracking, interceptors, deep probe strategies, and edge cases.
-
-**Result**: 83/83 tests passing (39 existing + 44 new HLS-specific QA tests). 1 bug found and documented. 2 enhancement recommendations.
-
----
-
-## Test Coverage
-
-### New Test Suite: `hls_qa.test.mjs` (44 tests)
-
-#### Fragmented Playback Tracking (5 tests)
-- Segment loaded/failed counting via FRAG_LOADED, FRAG_BUFFERED, ERROR events
-- Buffer health tracking (BUFFER_APPENDED, BUFFER_FLUSHED, BUFFER_RESET)
-- Quality level switch tracking (LEVEL_SWITCHED, LEVEL_UPDATED)
-- FPS drop tracking (FPS_DROP, FPS_MAX_LEVEL_DROP)
-- Video element lifecycle events (autoplay, muted, loop, playsInline)
-
-**Verdict**: PASS — All HLS.js event handlers properly wired to panel state machine.
-
-#### Manifest Fallback Behavior (5 tests)
-- hlsManifest field used when present
-- src falls back when hlsManifest missing AND src looks like .m3u8
-- Non-.m3u8 src NOT treated as HLS manifest (mediaType=hls but src=.mp4)
-- blob: URLs not treated as HLS
-- data: URLs handled gracefully
-
-**Verdict**: PASS — Fallback chain works correctly: hlsManifest > src (if .m3u8) > native playback. Warning logged when HLS entry has no valid manifest.
-
-#### Interceptor Detection (8 tests)
-- XHR .m3u8 URL detection
-- fetch .m3u8 URL detection
-- Hls.prototype.loadSource interception
-- Deduplication of same manifest URL
-- Relative URL resolution to absolute
-- Non-HLS URLs NOT intercepted
-- /playlist and /manifest URL detection (even without .m3u8 extension)
-- Idempotent double-injection prevention
-
-**Verdict**: PASS — Interceptors detect all HLS request patterns, deduplicate, resolve relative URLs, and are safe against double injection.
-
-#### Deep Probe Strategies (7 tests)
-- Player global detection (hls, videojs, etc.)
-- Inline script .m3u8 URL extraction
-- Interceptor-collected manifest detection (__goon_plugin_data)
-- Hls.cast(video) API support
-- Interceptor-collected manifests preferred over inline-script (priority order)
-- Config globals (__NEXT_DATA__) — BUG DOCUMENTED
-- Config globals with top-level .m3u8 values — BUG DOCUMENTED
-
-**Verdict**: PASS with BUG — 5 of 7 probes work correctly. 2 config-global tests document a walk() dead-code bug (see below).
-
-#### Configuration and Resource Management (5 tests)
-- Grid-optimized HLS config (maxBufferLength: 10s, capLevelToPlayerSize, maxBufferSize: 2MB, lowLatencyMode: false)
-- CDN version pinned to @1.5.17 (not floating)
-- HLS instance destruction on page unload
-- Storage cleanup on viewer close
-- CDN failure graceful handling
-
-**Verdict**: PASS — Config values appropriate for grid-panel usage. Resource lifecycle is correct.
-
-#### iframe and Multi-frame Scenarios (3 tests)
-- HLS probe uses allFrames: true
-- Video scraping uses allFrames: true
-- content_scripts manifest has all_frames: true + run_at: document_start
-
-**Verdict**: PASS — Iframe detection properly configured at all levels.
-
-#### Edge Cases (6 tests)
-- Empty HLS manifest URL (empty string) — falls back to native
-- Null hlsManifest field — falls back to native
-- Multiple HLS streams in same grid (3 unique instances)
-- Oversized grid (3x3 with 1 video — 8 empty panels)
-- Mixed HLS + blob source in same grid
-- /manifest URLs without .m3u8 extension
-
-**Verdict**: PASS — All edge cases handled gracefully without crashes.
-
----
-
-## Bug Found
-
-### BUG: walk() dead code in m3u8DeepProbeFn — config globals not fully scanned
-
-**Severity**: MEDIUM
-**Location**: `src/viewer/index.js`, lines 107-120
-**Affected probe**: Strategy D (Config globals: __NEXT_DATA__, appData, __INITIAL_STATE__, etc.)
-
-**Root Cause**:
-```js
-function walk(obj, path, depth) {
-  if (!obj || typeof obj !== 'object' || depth > 5) return; // GUARD
-  if (typeof obj === 'string') { // NEVER REACHED — dead code
-    const match = obj.match(/https?:\/\/.../gi);
-    ...
-  }
-  for (const k of Object.keys(obj)) {
-    walk(obj[k], `${path}.${k}`, depth + 1);
-  }
-}
-```
-
-The guard `typeof obj !== 'object'` returns early for string values. When `walk()` recurses into `__NEXT_DATA__.props.pageProps.streamUrl`, the string value is rejected by the guard before the regex match can run. The `typeof obj === 'string'` branch is dead code.
-
-**Impact**: Config globals (Next.js, React SSR, etc.) that embed .m3u8 URLs deeply nested in JSON objects are NOT detected. Shallow player globals (hls.url, etc.) still work via Strategy A's direct key check.
-
-**Fix**: Move the string check before the object guard:
-```js
-function walk(obj, path, depth) {
-  if (typeof obj === 'string') {
-    const match = obj.match(/https?:\/\/.../gi);
-    // ...
-    return;
-  }
-  if (!obj || typeof obj !== 'object' || depth > 5) return;
-  // ...
-}
-```
-
-**Mitigation**: The interceptors (Strategy E) are the primary detection method and work correctly. This only affects pages that rely solely on config globals without active HLS players.
-
----
-
-## Enhancement Recommendations
-
-### 1. MediaSource MIME type validation for blob: URLs
-blob: URLs in `src` are currently treated as direct MediaSource playback. There is no verification that the content type is actually HLS-compatible (`application/x-mpegURL`). If a page sets `mediaType: 'hls'` with a `blob:` src, the viewer warns about missing manifest but falls through to native playback. Consider adding `MediaSource.isTypeSupported()` checks for blob URLs that claim to be HLS.
-
-### 2. HLS.js error recovery in grid panels
-When `onError` fires for one panel, `recoverMediaError()` is called. If recovery fails, the panel shows a persistent error overlay. There is no retry after recovery — the panel stays broken. Consider adding a configurable retry count (e.g., 3 attempts with backoff) before marking the panel as permanently failed.
-
----
-
-## Existing Test Suite
-
-All 39 pre-existing tests continue to pass:
-- 10 Schema validation tests
-- 4 resolveSrc() tests
-- 5 isHls() tests
-- 3 resolveHlsManifest() tests
-- 3 DOM setup tests
-- 5 Data flow tests
-- 9 Integration tests
-- 5 Config/build integrity tests
-
----
-
-## Files Changed
-
-- `__tests__/hls_qa.test.mjs` — NEW: 44 HLS-specific QA tests (83 total tests in suite)
-- `__tests__/run.mjs` — ADDED: import for hls_qa.test.mjs
-
-## Build/Deploy Status
-
-- 83/83 tests passing in 12s
-- No linting errors in test files
-- No changes to production source files

README.md

@@ -1,4 +1,4 @@
-# Goon Plugin
+# VidPlex
 
 A Chrome extension (Manifest V3) that finds videos on the current page and displays them in a 2x2 grid.
 
@@ -55,4 +55,4 @@ src/
 
 ## VS Code workspace
 
-Open `goon_plugin.code-workspace` to get the project with recommended extensions pre-installed.
+Open `vidplex.code-workspace` to get the project with recommended extensions pre-installed.

__tests__/config_validation.test.mjs

@@ -45,7 +45,7 @@ describe('Config: build integrity', () => {
     if (codeOnly.includes('textContent')) {
       throw new Error(
           'content.js uses inline script injection (textContent). ' +
-        'Sites like Pornhub block inline scripts via CSP. Use script.src instead.'
+          'Some sites block inline scripts via CSP. Use script.src instead.'
       );
     }
     if (!codeOnly.includes('script.src') || !codeOnly.includes('chrome.runtime.getURL')) {

__tests__/data_flow.test.mjs

@@ -185,4 +185,35 @@ describe('Data flow: popup -> storage -> viewer', () => {
       throw new Error('Entry with invalid mediaType should be rejected');
     }
   });
+
+  it('an HLS entry carrying a scan-time referer passes schema + round-trips', () => {
+     // The referer is bound to the entry at scan time so it survives the
+     // watch-later flow (the source tab may be long closed). Because the schema
+     // sets additionalProperties:false, a `referer` the store carries must be an
+     // explicit property or storage-layer validation would reject the entry.
+    const scrapedEntry = {
+      url: 'https://pageA.example.com/watch',
+      src: 'https://cdn.example.com/hls/live/master.m3u8',
+      hlsManifest: 'https://cdn.example.com/hls/live/master.m3u8',
+      mediaType: 'hls',
+      poster: 'https://pageA.example.com/thumb.jpg',
+      tab: 'Referer-protected stream',
+      referer: 'https://pageA.example.com/watch',
+    };
+
+    const valid = validate(scrapedEntry);
+    if (!valid) {
+      throw new Error(`Entry with referer fails schema: ${JSON.stringify(validate.errors)}`);
+    }
+
+     // The referer must survive the storage round-trip intact so the viewer can
+    // send it to the proxy when the user opens a previously-scanned entry.
+    const roundTripped = JSON.parse(JSON.stringify(scrapedEntry));
+    if (roundTripped.referer !== 'https://pageA.example.com/watch') {
+      throw new Error('referer lost during round-trip');
+    }
+    if (!validate(roundTripped)) {
+      throw new Error('Round-tripped entry with referer fails schema');
+    }
+  });
 });

__tests__/hls_qa.test.mjs

@@ -679,8 +679,43 @@ if (!probeMatch) {
 }
 const probeFnSource = probeMatch[0];
 
+// jsdom exposes a set of self-referential cyclic globals as *enumerable own-*
+// properties on the window object. A real Chrome MAIN-world window does not:
+// `window`, `self`, `top`, `parent`, `frames` are non-enumerable, and the
+// jsdom-internal `_globalObject`/`_globalProxy`/`_top`/`_parent` keys don't
+// exist at all. The deep-probe's Strategy H runs `Object.keys(window)` and a
+// no-visited-set `walk()` over each player-like value, so these cyclic
+// jsdom-only keys make the walk explode to O(keys^depth) (~3.5e11 ops) and the
+// suite never terminates. We can't fix the probe (production src/ is off-limits
+// for this test-only PR), so instead we make this jsdom window mirror a real
+// page by marking the cyclic globals non-enumerable before the probe runs.
+const JSDOM_CYCLIC_GLOBALS = [
+  '_globalObject', '_globalProxy', '_top', '_parent',
+  'window', 'self', 'top', 'parent', 'frames',
+];
+function sanitizeJsdomWinForProbe(win) {
+  for (const key of JSDOM_CYCLIC_GLOBALS) {
+    if (!Object.prototype.hasOwnProperty.call(win, key)) continue;
+    let desc;
+    try { desc = Object.getOwnPropertyDescriptor(win, key); } catch { continue; }
+    if (!desc) continue;
+    try {
+      // Re-assert the same descriptor but with enumerable:false so the probe's
+      // `Object.keys(window)` no longer sees jsdom's cyclic self-references.
+      Object.defineProperty(win, key, { ...desc, enumerable: false });
+     } catch {
+       // Non-configurable descriptors (e.g. the `window`/`top` getters) can't be
+       // redefined; skip them. The remaining cyclic keys are already suppressed,
+       // leaving only a shallow 2-branch recursion that terminates in ms.
+     }
+   }
+}
+
 // Helper: eval the probe function inside a JSDOM window, then return results
 function runProbeInWin(win) {
+  // Mirror a real page environment (see JSDOM_CYCLIC_GLOBALS note above):
+  // non-enumerable cyclic globals prevent Strategy H's window scan from looping.
+  sanitizeJsdomWinForProbe(win);
   // Define the function in the JSDOM context and call it
   const result = win.eval(`
     (${probeFnSource})();
@@ -905,10 +940,10 @@ describe('HLS QA: Configuration and resource management', () => {
 
   it('should vendor HLS bundle locally (not use CDN — avoids CSP blocks)', () => {
     // Viewer loads hls.js from extension origin via chrome.runtime.getURL('hls.min.js')
-    // instead of a CDN — sites like Pornhub restrict script-src to 'self', blocking
+      // instead of a CDN — sites that restrict script-src to 'self' block
       // cross-origin <script src> injection from CDN URLs.
-    if (!viewerSource.includes("chrome.runtime.getURL('hls.min.js')")) {
-      throw new Error('viewer.js should load hls.min.js from extension origin, not CDN');
+    if (!viewerSource.includes("chrome.runtime.getURL('hlds.js')")) {
+      throw new Error('viewer.js should load hlds.js from extension origin, not CDN');
     }
     // Verify no CDN references remain (cdn.jsdelivr, unpkg, etc.)
     const cdnRefs = viewerSource.match(/https?:\/\/(cdn\.jsdelivr|unpkg|cdnjs)/g);
@@ -916,13 +951,13 @@ describe('HLS QA: Configuration and resource management', () => {
       throw new Error(`viewer.js should not reference CDN URLs (found: ${cdnRefs.join(', ')})`);
     }
     // Verify the vendored bundle exists in dist
-    const hlsPath = path.join(__dirname, '../dist/hls.js');
+    const hlsPath = path.join(__dirname, '../dist/hlds.js');
     if (!fs.existsSync(hlsPath)) {
-      throw new Error('dist/hls.js not found — run npm run build');
+      throw new Error('dist/hlds.js not found — run npm run build');
     }
     const hlsSize = fs.statSync(hlsPath).size;
     if (hlsSize < 200_000) {
-      throw new Error(`dist/hls.js too small (${hlsSize} bytes) — bundle may be empty`);
+      throw new Error(`dist/hlds.js too small (${hlsSize} bytes) — bundle may be empty`);
     }
   });
 
@@ -1008,6 +1043,33 @@ describe('HLS QA: iframe and multi-frame scenarios', () => {
       }
     });
 
+   it('deep probe + scrape must run in the MAIN world (see page globals)', () => {
+      // The deep probe and scraper read page globals (window.Hls, player
+      // instances, video._goon_hls_manifest) and window.__goon_plugin_data,
+      // which the main-world interceptors write. The isolated world cannot see
+      // these, so a missing `world: 'MAIN'` makes every main-world strategy find
+      // 0 manifests — the "detects nothing on pages with just <video> elements"
+      // regression. Guard the exact executeScript calls that run each function.
+     const indexSource = fs.readFileSync(
+       path.join(__dirname, '../src/viewer/index.js'),
+       'utf-8'
+       );
+
+      // Capture each call's target + func block (world: 'MAIN' lives on the
+      // target: line, which precedes func:).
+     const probeMatch = indexSource.match(/executeScript\(\{[\s\S]*?func: m3u8DeepProbeFn/);
+     if (!probeMatch) throw new Error('deep probe executeScript call not found');
+     if (!probeMatch[0].includes("world: 'MAIN'")) {
+       throw new Error('deep probe (m3u8DeepProbeFn) must use world: "MAIN" to see page globals');
+       }
+
+     const scrapeMatch = indexSource.match(/executeScript\(\{[\s\S]*?func: scrapeFn/);
+     if (!scrapeMatch) throw new Error('scrape executeScript call not found');
+     if (!scrapeMatch[0].includes("world: 'MAIN'")) {
+       throw new Error('scrape (scrapeFn) must use world: "MAIN" to see page globals');
+       }
+     });
+
   it('should inject interceptors into all frames (content_scripts.all_frames)', () => {
     const manifestSource = fs.readFileSync(
       path.join(__dirname, '../manifest.json'),
@@ -1179,3 +1241,70 @@ describe('HLS QA: Edge cases', () => {
        }
      });
     });
+
+/* ========================================================================== */
+/* Test: deep probe must not report route-template / nav "manifests"            */
+/* ========================================================================== */
+
+describe('HLS QA: route-template / nav URL rejection', () => {
+   const probeMatch = indexSource.match(/function m3u8DeepProbeFn\(\)[\s\S]*?^}/m);
+   if (!probeMatch) throw new Error('Could not find m3u8DeepProbeFn in index.js');
+   const probeFnSource = probeMatch[0];
+
+   function runProbeWin(url, globals) {
+     const dom = new JSDOM(
+      '<!DOCTYPE html><html><body><video></video></body></html>',
+        { url, runScripts: 'dangerously' });
+     const win = dom.window;
+     for (const [k, v] of Object.entries(globals)) win[k] = v;
+     const result = win.eval(`(${probeFnSource})();`);
+     if (!Array.isArray(result)) throw new Error('m3u8DeepProbeFn did not return an array');
+     return result;
+      }
+
+     // Reproduces a provider whose pageContext.langUrls holds server-side route
+     // TEMPLATES / nav links (e.g. /playlists/, /playlist/%1%/video/%2%/) that the
+     // old /playlist|/manifest substring check misclassified as "manifests".
+   const TEMPLATE_URLS = [
+      'https://example.com/playlists/',
+      'https://example.com/playlists/liked/',
+      'https://example.com/playlists/popular/',
+      'https://example.com/playlists/commented/',
+      'https://example.com/playlists/updated/',
+      'https://example.com/playlists/largest/',
+      'https://example.com/playlist/%1%/video/%2%/',
+      'https://example.com/playlists/?category=%DIR%',
+      'https://example.com/members/%ID%/playlists/',
+      'https://example.com/my/playlists/%ID%/',
+      ];
+
+   it('route templates / nav links are NOT reported as manifests', () => {
+     const result = runProbeWin('https://example.com/videos/redneck/', {
+       pageContext: { langUrls: TEMPLATE_URLS },
+       kvsplayer: { config: { langUrls: TEMPLATE_URLS } },
+        __goon_plugin_data: { manifests: [], sources: [] },
+        });
+     const urls = result.map(m => m.url);
+     const leaked = TEMPLATE_URLS.filter(u => urls.includes(u));
+     if (leaked.length > 0) {
+       throw new Error(`template/nav URLs leaked as manifests: ${leaked.join(', ')}`);
+         }
+       });
+
+   it('a real .m3u8 with a %2B token is still found (no over-rejection)', () => {
+         // %2B is a valid percent-encoded token, not a placeholder — it must survive.
+     const real = 'https://cdn.example.com/live/master.m3u8?h=a%2Bb%2Fc&e=1234';
+     const result = runProbeWin('https://example.com/videos/redneck/', {
+       hls: { url: real },
+       pageContext: { langUrls: TEMPLATE_URLS },
+        });
+     if (!result.some(m => m.url === real)) {
+       throw new Error(`real manifest with %2B token was dropped: ${real} — got: ${result.map(m => m.url).join(', ')}`);
+        }
+         // And the templates still must not leak in the same run.
+     const leaked = TEMPLATE_URLS.filter(u => result.some(m => m.url === u));
+     if (leaked.length > 0) {
+       throw new Error(`templates leaked alongside real manifest: ${leaked.join(', ')}`);
+        }
+       });
+     });

__tests__/instructions_ui.test.mjs

@@ -0,0 +1,269 @@
+import { describe, it } from './runner.mjs';
+import { JSDOM } from 'jsdom';
+
+const POPUP_HTML = `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>VidPlex</title>
+</head>
+<body>
+  <div id="app">
+    <h1>VidPlex</h1>
+    <section class="instructions-panel" role="region" aria-labelledby="instructions-title">
+      <div class="instructions-header">
+        <div>
+          <p class="instructions-kicker">Quick start</p>
+          <h2 id="instructions-title">How to use VidPlex</h2>
+        </div>
+        <button
+          id="instructions-toggle"
+          type="button"
+          class="instructions-toggle"
+          aria-expanded="true"
+          aria-controls="instructions-body"
+        >
+          Hide instructions
+        </button>
+      </div>
+      <div id="instructions-body" class="instructions-body">
+        <ol class="instructions-list">
+          <li>
+            <strong>Scan videos</strong>
+            <span>Click <strong>Find Videos</strong> to search the current browser window for videos.</span>
+          </li>
+          <li>
+            <strong>Review the list</strong>
+            <span>Check the popup list; each found video URL is clickable.</span>
+          </li>
+          <li>
+            <strong>Open the viewer</strong>
+            <span>Click <strong>Open Viewer</strong> to open the 2x2 grid player in a new window.</span>
+          </li>
+          <li>
+            <strong>Reset and rescan</strong>
+            <span>Click <strong>Clear</strong> to erase results and scan again.</span>
+          </li>
+        </ol>
+        <p class="instructions-note">Warning: Browser pages, extension pages, and restricted frames can hide videos, so results may be incomplete.</p>
+        <p class="instructions-learn-more">Learn more tooltip: Read the VidPlex README and audit notes.</p>
+      </div>
+    </section>
+    <button id="find-btn">Find Videos (all tabs)</button>
+    <div id="video-list" class="video-list" style="display:none;"></div>
+    <div id="status" class="status" style="min-height:16px;"></div>
+    <div id="btn-row" class="btn-row" style="display:none;">
+      <button id="clear-btn" class="btn-secondary">Clear</button>
+      <button id="open-btn">Open Viewer</button>
+    </div>
+  </div>
+</body>
+</html>`;
+
+function installPopupDom() {
+  const dom = new JSDOM(POPUP_HTML, { url: 'chrome-extension://test/src/viewer/index.html' });
+  const previous = {
+    window: globalThis.window,
+    document: globalThis.document,
+    navigator: globalThis.navigator,
+    chrome: globalThis.chrome,
+    HTMLElement: globalThis.HTMLElement,
+    Node: globalThis.Node,
+  };
+
+  globalThis.window = dom.window;
+  globalThis.document = dom.window.document;
+  Object.defineProperty(globalThis, 'navigator', {
+    value: dom.window.navigator,
+    configurable: true,
+    writable: true,
+  });
+  Object.defineProperty(globalThis, 'HTMLElement', {
+    value: dom.window.HTMLElement,
+    configurable: true,
+    writable: true,
+  });
+  Object.defineProperty(globalThis, 'Node', {
+    value: dom.window.Node,
+    configurable: true,
+    writable: true,
+  });
+  globalThis.chrome = {
+    storage: {
+      local: {
+        get: async () => ({}),
+        set: async () => undefined,
+        remove: async () => undefined,
+      },
+    },
+    tabs: { query: async () => [] },
+    scripting: { executeScript: async () => [] },
+    runtime: { getURL: (path) => `chrome-extension://test/${path}` },
+    windows: { create: async () => ({ id: 1 }) },
+  };
+
+  return {
+    dom,
+    cleanup() {
+      dom.window.close();
+      globalThis.window = previous.window;
+      globalThis.document = previous.document;
+      Object.defineProperty(globalThis, 'navigator', {
+        value: previous.navigator,
+        configurable: true,
+        writable: true,
+      });
+      globalThis.chrome = previous.chrome;
+      Object.defineProperty(globalThis, 'HTMLElement', {
+        value: previous.HTMLElement,
+        configurable: true,
+        writable: true,
+      });
+      Object.defineProperty(globalThis, 'Node', {
+        value: previous.Node,
+        configurable: true,
+        writable: true,
+      });
+    },
+  };
+}
+
+async function mountPopupWithStorage(storageGet = async () => ({}), captureWrite = null) {
+  const { dom, cleanup } = installPopupDom();
+  // Override the chrome.storage.local stub so we can seed a value and capture writes.
+  const writes = [];
+  globalThis.chrome.storage.local.get = async (...args) => {
+    const res = await storageGet(...args);
+    return res;
+  };
+  globalThis.chrome.storage.local.set = async (items) => {
+    if (captureWrite) captureWrite(items); else writes.push(items);
+  };
+  const moduleUrl = new URL('../src/viewer/index.js?test=' + Date.now(), import.meta.url);
+  await import(moduleUrl.href);
+  const flush = () => new Promise((resolve) => setTimeout(resolve, 0));
+  return { dom, cleanup, writes, flush };
+}
+
+describe('Viewer popup instructions', () => {
+  it('renders the drafted instructions copy on mount with accessible labeling', async () => {
+    const { dom, cleanup } = await mountPopupWithStorage();
+    try {
+      const doc = dom.window.document;
+      const region = doc.querySelector('.instructions-panel');
+      const title = doc.getElementById('instructions-title');
+      const toggle = doc.getElementById('instructions-toggle');
+      const body = doc.getElementById('instructions-body');
+
+      if (!region) throw new Error('Instructions region missing');
+      if (region.getAttribute('role') !== 'region') throw new Error('Instructions region missing role="region"');
+      if (region.getAttribute('aria-labelledby') !== 'instructions-title') throw new Error('Instructions region missing aria-labelledby');
+      if (!title || title.textContent !== 'How to use VidPlex') throw new Error('Instructions title not rendered');
+      if (!toggle) throw new Error('Instructions toggle missing');
+      if (toggle.getAttribute('aria-controls') !== 'instructions-body') throw new Error('Toggle missing aria-controls');
+      if (toggle.getAttribute('aria-expanded') !== 'true') throw new Error('Toggle should start expanded');
+      if (!body || body.hidden) throw new Error('Instructions body should be visible on mount');
+
+      const expectedTexts = [
+        'Scan videos',
+        'Click Find Videos to search the current browser window for videos.',
+        'Review the list',
+        'Check the popup list; each found video URL is clickable.',
+        'Open the viewer',
+        'Click Open Viewer to open the 2x2 grid player in a new window.',
+        'Reset and rescan',
+        'Click Clear to erase results and scan again.',
+        'Warning: Browser pages, extension pages, and restricted frames can hide videos, so results may be incomplete.',
+        'Learn more tooltip: Read the VidPlex README and audit notes.',
+      ];
+
+      for (const text of expectedTexts) {
+        if (!doc.body.textContent.includes(text)) {
+          throw new Error(`Missing instructions copy: ${text}`);
+        }
+      }
+    } finally {
+      cleanup();
+    }
+  });
+
+  it('toggles the instructions panel open and closed', async () => {
+    const { dom, cleanup } = await mountPopupWithStorage();
+    try {
+      const doc = dom.window.document;
+      const toggle = doc.getElementById('instructions-toggle');
+      const body = doc.getElementById('instructions-body');
+
+      if (!toggle || !body) throw new Error('Instructions controls missing');
+
+      toggle.click();
+      if (toggle.getAttribute('aria-expanded') !== 'false') throw new Error('Toggle should collapse the instructions');
+      if (!body.hidden) throw new Error('Instructions body should be hidden after collapse');
+      if (toggle.textContent !== 'Show instructions') throw new Error('Collapsed label should switch to Show instructions');
+
+      toggle.click();
+       if (toggle.getAttribute('aria-expanded') !== 'true') throw new Error('Toggle should expand the instructions');
+       if (body.hidden) throw new Error('Instructions body should be visible after expanding');
+       if (toggle.textContent !== 'Hide instructions') throw new Error('Expanded label should switch back to Hide instructions');
+     } finally {
+      cleanup();
+     }
+   });
+
+  it('honors a stored hidden state on mount', async () => {
+    const { dom, cleanup } = await mountPopupWithStorage(
+      async () => ({ goon_instructions_visible: false })
+     );
+    try {
+      const doc = dom.window.document;
+      const toggle = doc.getElementById('instructions-toggle');
+      const body = doc.getElementById('instructions-body');
+      // Wait for the async storage.get() to resolve and apply.
+      await new Promise((r) => setTimeout(r, 0));
+      if (toggle.getAttribute('aria-expanded') !== 'false') throw new Error('Stored hidden state should start collapsed');
+      if (!body.hidden) throw new Error('Stored hidden state should start hidden');
+      if (toggle.textContent !== 'Show instructions') throw new Error('Stored hidden state should show the "Show instructions" label');
+     } finally {
+      cleanup();
+     }
+   });
+
+  it('persists the new visibility on every user toggle', async () => {
+    let written = null;
+    const { dom, cleanup, flush } = await mountPopupWithStorage(
+      async () => ({}),
+      (items) => { written = items; }
+     );
+    try {
+      const doc = dom.window.document;
+      const toggle = doc.getElementById('instructions-toggle');
+      // Collapse -> must persist false.
+      toggle.click();
+      await flush();
+      if (written === null) throw new Error('Collapsing the panel must write to chrome.storage.local');
+      if (written.goon_instructions_visible !== false) throw new Error('Collapsing must persist goon_instructions_visible=false');
+      // Expand -> must persist true.
+      toggle.click();
+      await flush();
+      if (written.goon_instructions_visible !== true) throw new Error('Expanding must persist goon_instructions_visible=true');
+     } finally {
+      cleanup();
+     }
+   });
+
+  it('defaults a first-time user (no stored key) to shown', async () => {
+    const { dom, cleanup } = await mountPopupWithStorage(async () => ({}));
+    try {
+      const doc = dom.window.document;
+      const toggle = doc.getElementById('instructions-toggle');
+      const body = doc.getElementById('instructions-body');
+      await new Promise((r) => setTimeout(r, 0));
+      if (toggle.getAttribute('aria-expanded') !== 'true') throw new Error('First-time user should start expanded');
+      if (body.hidden) throw new Error('First-time instructions body should be visible on mount');
+     } finally {
+      cleanup();
+     }
+   });
+});

__tests__/referer_proxy.test.mjs

@@ -0,0 +1,364 @@
+/**
+ * referer_proxy.test.mjs — coverage for the background worker's per-CDN-host
+ * referer capture + DNR proxy-host learning, added in PR #5.
+ *
+ * The background worker is not itself a module, so the test transpiles it into
+ * one (wrapping + top-level-statement `async function` transpile) under a mocked
+ * `chrome` + `fetch`/`btoa` environment, then exercises the captured listeners
+ * and the message handler directly.
+ *
+ * Covers the three gaps robot flagged:
+ *  (a) closing a tab must NOT wipe the host-keyed `goon_referers` global store,
+ *  (b) two hosts proxied concurrently must each keep their OWN referer (no race
+ *      that leaves host B's referer live for host A -> 412),
+ *  (c) the new referer-capture / proxy-host-learning / onRemoved paths run.
+ */
+import { describe, it } from './runner.mjs';
+import { readFileSync, writeFileSync } from 'node:fs';
+import { fileURLToPath, pathToFileURL } from 'node:url';
+import { dirname, join } from 'node:path';
+import { tmpdir } from 'node:os';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const backgroundSource = readFileSync(join(__dirname, '../src/background/background.js'), 'utf8');
+
+// Transpile the top-level-statement worker into an ES module. Wrapping in an
+// async IIFE makes its top-level `async function` declarations + `await`-using
+// nested functions legal inside a module.
+function buildModule(code) {
+  return `(async () => {\n${code}\n})();\n`;
+}
+
+  // A fresh mock of the chrome APIs the worker touches. `onBeforeRequest` and
+  // `tabs.onRemoved` capture their listener, and `tabs.get` serves the source
+  // tab's URL (the captured referer); `declarativeNetRequest.updateSessionRules`
+  // records the live rules.
+function makeChromeEnv() {
+  const storage = {};
+  const handlers = { onMessage: [] };
+  const tabUrls = {};
+  let sessionRules = {};
+
+  const webRequest = {
+    onBeforeRequest: { addListener: (cb) => { handlers.onBeforeRequest = cb; } },
+    };
+
+  const chrome = {
+    storage: {
+     local: {
+      get: async (keys) => {
+        const out = {};
+        const arr = Array.isArray(keys) ? keys : (keys === undefined ? Object.keys(storage) : [keys]);
+        for (const k of arr) if (k in storage) out[k] = storage[k];
+        return out;
+        },
+      set: async (data) => {
+        for (const [k, v] of Object.entries(data)) storage[k] = v;
+        },
+      remove: async (keys) => {
+        const arr = Array.isArray(keys) ? keys : [keys];
+        for (const k of arr) delete storage[k];
+        },
+      },
+     },
+    webRequest,
+     tabs: {
+      get: async (tabId) => tabUrls[tabId] ? { tabId, url: tabUrls[tabId] } : undefined,
+      onRemoved: { addListener: (cb) => { handlers.onRemoved = cb; } },
+       },
+    runtime: { onMessage: { addListener: (cb) => { handlers.onMessage.push(cb); } } },
+    declarativeNetRequest: {
+      updateSessionRules: async ({ removeRuleIds = [], addRules = [] } = {}) => {
+        const rm = new Set(removeRuleIds);
+        sessionRules = Object.fromEntries(
+          Object.entries(sessionRules).filter(([id]) => !rm.has(id))
+         );
+        for (const r of addRules) sessionRules[r.id] = r;
+        },
+      },
+   };
+
+  return { chrome, handlers, storage, tabUrls,
+     setTabUrl: (tabId, url) => { tabUrls[tabId] = url; },
+     getSessionRules: () => sessionRules };
+}
+
+// Load the worker into a fresh environment. `data:` URLs are cached by Node, so
+// the module body (listener registration) would only run once; instead we write
+// a uniquely-named temp file per load so each call registers into its own env.
+let loadCounter = 0;
+async function loadBackground(env) {
+  global.chrome = env.chrome;
+  const file = join(tmpdir(), `goon_bg_${process.pid}_${loadCounter++}.mjs`);
+  writeFileSync(file, buildModule(backgroundSource));
+  const module = await import(pathToFileURL(file).href);
+  await module.default;
+  return module;
+}
+
+// Drive a referer capture the way the worker now does it: the worker reads the
+// source tab's URL (via chrome.tabs.get) as the provider referer, so we set the
+// tab's URL and fire an onBeforeRequest for a video URL on that tab.
+async function capture(env, videoUrl, referer) {
+  env.setTabUrl(11, referer);
+  await env.handlers.onBeforeRequest({ tabId: 11, url: videoUrl });
+}
+
+describe('PR#5: per-host referer capture + proxy race', () => {
+   // (a) Blocking fix: a host-keyed `goon_referers` entry must outlive the close
+   // of ANY tab — including a different tab.
+  it('closing a tab does not wipe goon_referers captured for another host', async () => {
+    const env = makeChromeEnv();
+    global.chrome = env.chrome;
+    await loadBackground(env);
+
+      // A live source tab captures the provider referer for its CDN host.
+    await capture(env, 'https://cdnA.example.com/hls/live/seg-1.ts', 'https://pageA.example.com/watch');
+
+    const rA = env.storage['goon_referers']?.['example.com'];
+    if (!rA) throw new Error('referer was not captured for cdnA');
+    if (rA.referer !== 'https://pageA.example.com/watch') {
+      throw new Error('captured referer wrong: ' + JSON.stringify(rA));
+      }
+
+      // A DIFFERENT tab closes. The per-tab cleanup must NOT remove goon_referers.
+    await env.handlers.onRemoved(22);
+
+    const after = env.storage['goon_referers'];
+    if (!after || !after['example.com']) {
+      throw new Error('closing tab 22 wiped goon_referers — host A referer lost');
+      }
+      if (after['example.com'].referer !== 'https://pageA.example.com/watch') {
+       throw new Error('closing tab 22 corrupted the host A referer: ' + JSON.stringify(after));
+       }
+   });
+
+  it('closing the capturing tab itself preserves the referer for later proxy use', async () => {
+    const env = makeChromeEnv();
+    global.chrome = env.chrome;
+    await loadBackground(env);
+
+    await capture(env, 'https://cdnB.example.com/video/x/master.m3u8', 'https://pageB.example.com/v');
+
+       // The very tab that captured the referer now closes.
+    await env.handlers.onRemoved(11);
+
+    const after = env.storage['goon_referers']?.['example.com'];
+    if (!after) throw new Error('goon_referers for the capturing host was wiped on its own tab close');
+    if (after.referer !== 'https://pageB.example.com/v') {
+      throw new Error('capturing-tab close corrupted referer: ' + JSON.stringify(after));
+     }
+   });
+
+   // (b) Should-fix + coverage: two hosts proxied concurrently must each keep
+   // their own referer. With a shared rule id + non-atomic install this regressed;
+   // per-host rule ids + the per-host lock keep them distinct.
+  it('concurrent proxy fetches for two distinct registrable domains keep distinct referer rules', async () => {
+    const env = makeChromeEnv();
+    let fetchCalls = 0;
+    global.chrome = env.chrome;
+     global.fetch = async (url) => {
+      fetchCalls++;
+      return {
+        ok: true,
+        status: 200,
+        headers: { get: () => 'application/vnd.apple.mpegurl' },
+        arrayBuffer: async () => new Uint8Array([0]).buffer,
+       };
+     };
+
+    await loadBackground(env);
+
+      // Two GOON_PROXY_FETCH messages for different CDN hosts, fired together.
+    const handler = env.handlers.onMessage[env.handlers.onMessage.length - 1];
+    let respA, respB;
+    handler({ type: 'GOON_PROXY_FETCH', url: 'https://cdnA.example.com/hls/live/seg-1.ts', referer: 'https://pageA.example.com/watch' }, {}, (r) => { respA = r; });
+    handler({ type: 'GOON_PROXY_FETCH', url: 'https://cdnB.other.com/hls/live/seg-1.ts', referer: 'https://pageB.other.com/watch' }, {}, (r) => { respB = r; });
+
+     await new Promise(r => setTimeout(r, 30)); // let async sends + installs flush
+
+    if (!respA || !respA.ok) throw new Error('proxy A failed: ' + JSON.stringify(respA));
+    if (!respB || !respB.ok) throw new Error('proxy B failed: ' + JSON.stringify(respB));
+    if (fetchCalls < 2) throw new Error('expected both proxy fetches to run, got ' + fetchCalls);
+
+    // Each host must have its OWN installed DNR rule with its OWN referer —
+    // host A must NOT be served host B's referer (the 412 regression).
+     const rules = env.getSessionRules();
+    const ruleA = Object.values(rules).find(r => r.condition?.requestDomains?.includes('example.com'));
+    const ruleB = Object.values(rules).find(r => r.condition?.requestDomains?.includes('other.com'));
+    if (!ruleA) throw new Error('no DNR rule installed for cdna; rules=' + JSON.stringify(rules));
+    if (!ruleB) throw new Error('no DNR rule installed for cdnb; rules=' + JSON.stringify(rules));
+    if (ruleA.id === ruleB.id) {
+      throw new Error('cdnA and cdnB shared a DNR rule id -> concurrent race possible');
+     }
+    const refA = ruleA.action.requestHeaders?.find(h => h.header.toLowerCase() === 'referer')?.value;
+    const refB = ruleB.action.requestHeaders?.find(h => h.header.toLowerCase() === 'referer')?.value;
+    if (refA !== 'https://pageA.example.com/watch') {
+      throw new Error('cdnA served wrong referer: ' + refA);
+     }
+    if (refB !== 'https://pageB.other.com/watch') {
+      throw new Error('cdnB served wrong referer: ' + refB);
+     }
+    if (refA === refB) throw new Error('both hosts got the same referer — cross-host bleed');
+   });
+
+  it('repeated proxy for the same host is idempotent (one rule, one install)', async () => {
+    const env = makeChromeEnv();
+    let installs = 0;
+    env.chrome.declarativeNetRequest.updateSessionRules = async ({ addRules = [] } = {}) => {
+      for (const r of addRules) installs++;
+     };
+    global.chrome = env.chrome;
+    global.fetch = async () => ({
+      ok: true, status: 200,
+      headers: { get: () => 'application/vnd.apple.mpegurl' },
+      arrayBuffer: async () => new Uint8Array([0]).buffer,
+     });
+
+    await loadBackground(env);
+    const handler = env.handlers.onMessage[env.handlers.onMessage.length - 1];
+
+    const run = async (n) => {
+      handler(
+        { type: 'GOON_PROXY_FETCH', url: 'https://cdnA.example.com/hls/live/seg-1.ts', referer: 'https://pageA.example.com/watch' },
+        {},
+        () => {}
+       );
+      await new Promise(r => setTimeout(r, 5));
+     };
+    await run(1);
+    const installsAfterFirst = installs;
+    await run(2);
+    await run(3);
+
+     // Same host + same referer should not re-add the rule on repeat fetches.
+    if (installs !== installsAfterFirst) {
+      throw new Error(`expected idempotent install, but re-added rule ${installs - installsAfterFirst} extra time(s)`);
+     }
+   });
+
+   // (c) Domain generalization — the core 412 fix. A provider referer captured for
+   // ONE edge subdomain must cover a SIBLING subdomain: the DNR rule is scoped to
+   // the registrable domain and the store is domain-keyed, so a proxy for ev-h
+   // needs no per-subdomain capture.
+  it('a proxy for a sibling subdomain reuses the captured referer via the registrable domain', async () => {
+    const env = makeChromeEnv();
+    global.chrome = env.chrome;
+    global.fetch = async () => ({
+      ok: true,
+      status: 200,
+      headers: { get: () => 'application/vnd.apple.mpegurl' },
+      arrayBuffer: async () => new Uint8Array([0]).buffer,
+       });
+    await loadBackground(env);
+
+       // Capture the provider referer for hv-h.example.net (one edge subdomain).
+    await capture(env, 'https://hv-h.example.net/hls/live/seg-1.ts', 'https://provider.example.com/watch');
+
+       // Proxy a SIBLING subdomain ev-h.example.net with NO referer in the message:
+     // the SW must resolve it from the domain-keyed store.
+    const handler = env.handlers.onMessage[env.handlers.onMessage.length - 1];
+    let resp;
+    handler({ type: 'GOON_PROXY_FETCH', url: 'https://ev-h.example.net/hls/live/seg-1.ts' }, {}, (r) => { resp = r; });
+    await new Promise(r => setTimeout(r, 20));
+
+    if (!resp || !resp.ok) throw new Error('sibling proxy failed: ' + JSON.stringify(resp));
+    const rules = env.getSessionRules();
+    const rule = Object.values(rules).find(r => r.condition?.requestDomains?.includes('example.net'));
+    if (!rule) throw new Error('no domain-scoped DNR rule for example.net; rules=' + JSON.stringify(rules));
+    const ref = rule.action.requestHeaders?.find(h => h.header.toLowerCase() === 'referer')?.value;
+    if (ref !== 'https://provider.example.com/watch') {
+      throw new Error('sibling edge served wrong referer: ' + ref);
+       }
+     // The rule is scoped to the registrable domain, NOT the exact subdomain.
+    if (rule.condition.requestDomains?.includes('ev-h.example.net')) {
+      throw new Error('rule scoped to exact subdomain instead of registrable domain');
+       }
+    });
+
+   // (d) With no captured referer and none in the message, install NO rule: the
+   // self-origin fallback (guaranteed-wrong for hotlink protection) is dropped.
+  it('no captured referer and no message referer installs no DNR rule', async () => {
+    const env = makeChromeEnv();
+    let fetchCalls = 0;
+    global.chrome = env.chrome;
+    global.fetch = async () => {
+      fetchCalls++;
+      return {
+        ok: true,
+        status: 200,
+        headers: { get: () => 'application/vnd.apple.mpegurl' },
+        arrayBuffer: async () => new Uint8Array([0]).buffer,
+         };
+       };
+    await loadBackground(env);
+    const handler = env.handlers.onMessage[env.handlers.onMessage.length - 1];
+    let resp;
+    handler({ type: 'GOON_PROXY_FETCH', url: 'https://cdnA.example.com/hls/live/seg-1.ts' }, {}, (r) => { resp = r; });
+    await new Promise(r => setTimeout(r, 20));
+
+    if (!resp || !resp.ok) throw new Error('proxy fetch failed: ' + JSON.stringify(resp));
+    if (fetchCalls < 1) throw new Error('proxy fetch did not run');
+    const rules = env.getSessionRules();
+    if (Object.keys(rules).length !== 0) {
+      throw new Error('installed a rule with no referer (self-origin fallback not dropped): ' + JSON.stringify(rules));
+       }
+    });
+
+   // (e) GOON_GET_REFERERS (used by scan-time capture) resolves each manifest host
+   // via the domain-keyed store: a sibling subdomain gets the provider referer,
+   // and an uncaptured host is omitted.
+  it('GOON_GET_REFERERS resolves manifest hosts through the domain-keyed store', async () => {
+    const env = makeChromeEnv();
+    global.chrome = env.chrome;
+    await loadBackground(env);
+
+        // Capture for hv-h.example.net only.
+    await capture(env, 'https://hv-h.example.net/hls/live/seg-1.ts', 'https://provider.example.com/watch');
+
+    const handler = env.handlers.onMessage[env.handlers.onMessage.length - 1];
+    let resp;
+    handler(
+       { type: 'GOON_GET_REFERERS', hosts: ['ev-h.example.net', 'hv-h.example.net', 'cdnA.example.com'] },
+       {},
+       (r) => { resp = r; });
+    await new Promise(r => setTimeout(r, 15));
+
+    if (!resp || !resp.ok) throw new Error('GOON_GET_REFERERS failed: ' + JSON.stringify(resp));
+    const referers = resp.referers || {};
+    if (referers['ev-h.example.net'] !== 'https://provider.example.com/watch') {
+      throw new Error('sibling subdomain did not resolve the captured referer: ' + JSON.stringify(referers));
+       }
+    if (referers['hv-h.example.net'] !== 'https://provider.example.com/watch') {
+      throw new Error('captured subdomain did not resolve its own referer: ' + JSON.stringify(referers));
+       }
+    if ('cdnA.example.com' in referers) {
+      throw new Error('uncaptured host should be omitted from referers: ' + JSON.stringify(referers));
+       }
+    });
+
+     // Regression for the live 412 bug: the worker captures the provider referer
+     // from the source tab's URL via chrome.tabs.get inside onBeforeRequest. The
+     // old path read request headers via onBeforeSendHeaders + extraInfoSpec, which
+     // is rejected by some Chromium builds and fails the whole service worker, so it
+     // was removed; this asserts the new tab-URL capture is wired up and actually
+     // stores a referer.
+   it('the onBeforeRequest capture reads the referer from the source tab URL', async () => {
+     const env = makeChromeEnv();
+     global.chrome = env.chrome;
+     await loadBackground(env);
+
+     const cap = env.handlers.onBeforeRequest;
+     if (!cap) throw new Error('onBeforeRequest listener was not registered');
+
+     // A video request for cdnA from a tab whose URL IS the provider referer.
+     env.setTabUrl(11, 'https://pageA.example.com/watch');
+     await cap({ tabId: 11, url: 'https://cdnA.example.com/hls/live/seg-1.ts' });
+
+     const rA = env.storage['goon_referers']?.['example.com'];
+     if (!rA) throw new Error('referer was not captured from the source tab URL');
+     if (rA.referer !== 'https://pageA.example.com/watch') {
+       throw new Error('captured referer wrong: ' + JSON.stringify(rA));
+        }
+     });
+   });

__tests__/run.mjs

@@ -3,10 +3,13 @@
  */
 import './schema.test.mjs';
 import './viewer_units.test.mjs';
+import './instructions_ui.test.mjs';
 import './data_flow.test.mjs';
 import './viewer_integration.test.mjs';
 import './config_validation.test.mjs';
 import './hls_qa.test.mjs';
+import './simple_video.test.mjs';
+import './referer_proxy.test.mjs';
 import { run } from './runner.mjs';
 
 const result = await run();

__tests__/simple_video.test.mjs

@@ -0,0 +1,131 @@
+// Regression tests: simple <video> / direct-media detection.
+//
+// The feature branch broke detection of pages that expose a plain <video>
+// (e.g. a site that serves a direct MP4 with a TRAILING SLASH and a
+// ?rnd= query: .../14644093/14644093.mp4/?rnd=...). Two site-agnostic fixes
+// are guarded here:
+//   1) The URL predicate (isValidManifestUrl) must let concrete media signals
+//      (.mp4/.m3u8/.webm/... and /hls/) WIN over the placeholder/`%`/trailing-
+//      slash rejections, so a real direct-media URL is not mistaken for a
+//      route template.
+//   2) scrapeTab must fall back to an ISOLATED-world scrape when the MAIN-world
+//      scrape yields nothing — the runtime cause of "detects nothing" on such pages
+//      is a MAIN-world + allFrames rejection on its ad-iframe-heavy page.
+import { describe, it } from './runner.mjs';
+import { JSDOM } from 'jsdom';
+import * as fs from 'fs';
+import * as path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const indexSource = fs.readFileSync(
+  path.join(__dirname, '../src/viewer/index.js'),
+   'utf-8'
+);
+
+// Extract a `function <name>(...) {…}` by balanced-brace scan. Robust to the
+// file's quirky/mixed indentation (a column-0 `}` heuristic would mis-truncate
+// nested or oddly-indented bodies).
+function extractFn(src, name) {
+  const re = new RegExp('function ' + name + '\\s*\\(');
+  const m = re.exec(src);
+  if (!m) throw new Error('not found: ' + name);
+  const start = m.index;
+  let i = src.indexOf('{', start), depth = 0;
+  for (; i < src.length; i++) {
+    const c = src[i];
+    if (c === '{') depth++;
+    else if (c === '}') { depth--; if (depth === 0) return src.slice(start, i + 1); }
+   }
+  throw new Error('unbalanced: ' + name);
+}
+
+// The direct-media URL, shaped exactly like the rejected case (a trailing slash +
+// ?rnd= query). This is the concrete case the predicate used to reject.
+const DIRECT_MP4 =
+  'https://example.com/get_file/5/6cae22f8b3ba9d74f10cc2f8d060af738c8d30ddf5/14644000/14644093/14644093.mp4/?rnd=1787811205406';
+
+describe('HLS QA: simple <video> direct-media predicate', () => {
+  // Extract and evaluate the REAL isValidManifestUrl from index.js in a browser
+  // window so its `new URL(...)` / string behavior matches production.
+  const isValidSrc = extractFn(indexSource, 'isValidManifestUrl');
+
+  function assertValid(url, expectValid, label) {
+    const dom = new JSDOM(
+      '<!DOCTYPE html><html><body></body></html>',
+       { url: 'https://example.com/videos/x/', runScripts: 'dangerously' }
+     );
+    const got = dom.window.eval('(' + isValidSrc + ')(' + JSON.stringify(url) + ')');
+    if (got !== expectValid) {
+      throw new Error(
+        `${label || 'isValidManifestUrl'}(${url}) = ${got}, expected ${expectValid}`
+       );
+    }
+  }
+
+  it('accepts a real direct-MP4 URL WITH a trailing slash + ?rnd=', () => {
+    // Before the fix, `path.endsWith('/')` rejected this real media source.
+    assertValid(DIRECT_MP4, true, 'trailing-slash MP4');
+   });
+
+  it('accepts a direct .mp4 with no trailing slash', () => {
+    assertValid('https://cdn.example.com/vids/abc123.mp4', true, 'plain MP4');
+   });
+
+  it('accepts real .m3u8 / .webm / .mpd / .m4s / /hls/ media signals', () => {
+    assertValid('https://cdn.example.com/live/master.m3u8', true, 'master.m3u8');
+    assertValid('https://cdn.example.com/seg/webm/v.webm', true, 'webm');
+    assertValid('https://cdn.example.com/seg/dash/master.mpd', true, 'mpd');
+    assertValid('https://cdn.example.com/seg/1-0.m4s', true, 'm4s');
+    assertValid('https://cdn.example.com/hls/abc/playlist.m3u8', true, '/hls/');
+   });
+
+  it('does not over-reject a real .m3u8 carrying a valid %2B/%2F token', () => {
+     // %2B/%2F are valid percent-encoded hex pairs — a genuine auth token, not a
+    // route-template placeholder, so it must survive.
+    assertValid('https://cdn.example.com/live/master.m3u8?h=a%2Bb%2Fc&e=1234', true, '%2B token');
+   });
+
+  it('still rejects route-template / nav URLs (no over-acceptance)', () => {
+     // The fix must not trade one regression for the other: the route templates
+    // a provider's pageContext.langUrls leaks must still be rejected.
+    assertValid('https://example.com/playlists/', false, '/playlists/');
+    assertValid('https://example.com/playlists/liked/', false, '/playlists/liked/');
+    assertValid('https://example.com/playlist/%1%/video/%2%/', false, '/playlist/%1%/');
+    assertValid('https://example.com/members/%ID%/playlists/', false, '/members/%ID%/playlists/');
+    assertValid('https://example.com/videos/%DIR%/', false, '/videos/%DIR%/');
+   });
+});
+
+describe('HLS QA: scrapeTab isolated-world fallback', () => {
+  // Extract the whole scrapeTab function (balanced braces, indentation-agnostic).
+  const scrapeSrc = extractFn(indexSource, 'scrapeTab');
+
+  it('runs an isolated-world scrape attempt (no `world` key) as a fallback', () => {
+    const calls = scrapeSrc.match(/executeScript\(\s*\{[\s\S]*?\}\s*\)/g) || [];
+    if (calls.length === 0) {
+      throw new Error('scrapeTab has no executeScript call');
+     }
+     // At least one executeScript must omit `world` so it runs in the always-
+    // permitted isolated world (recovers simple videos a MAIN-world injection
+    // rejects on sandboxed/opaque-origin ad iframes).
+    const hasIsolated = calls.some((c) => !/\bworld\s*:/.test(c));
+    if (!hasIsolated) {
+      throw new Error(
+        'scrapeTab has no isolated-world (no `world:`) executeScript fallback — ' +
+         'a MAIN-world+allFrames rejection on an ad-iframe-heavy page leaves 0 videos'
+       );
+    }
+   });
+
+  it('primary scrape still uses world: \'MAIN\' (reads page globals)', () => {
+    const calls = scrapeSrc.match(/executeScript\(\s*\{[\s\S]*?\}\s*\)/g) || [];
+    const hasMain = calls.some((c) => /world\s*:\s*['"]MAIN['"]/.test(c));
+    if (!hasMain) {
+      throw new Error(
+        'scrapeTab primary attempt must use world: "MAIN" to read page globals ' +
+         '(interceptor data, Hls instances, custom <video> props)'
+       );
+    }
+   });
+});

docs/instructions-audit.md

@@ -0,0 +1,25 @@
+# Instructions UI audit
+
+## Scope
+This audit covers the VidPlex popup instructions banner added in `src/viewer/index.html`, `src/viewer/index.css`, and `src/viewer/index.js`.
+
+## What the UI now explains
+- How to scan the current page for videos
+- How to review clickable results
+- How to open the 2x2 viewer
+- How to clear and rescan
+- A caveat that browser pages, extension pages, and restricted frames may hide videos
+
+## Accessibility checks
+- The instructions section uses `role="region"` and an accessible label
+- The collapse toggle is wired with `aria-expanded` and `aria-controls`
+- The body is hidden with the `hidden` attribute when collapsed
+
+## UX notes
+- The panel is visible on mount so first-time users see the steps immediately
+- The toggle label changes between “Hide instructions” and “Show instructions”
+- The copy intentionally stays short so the popup remains readable in a narrow extension window
+
+## Validation
+- Covered by `__tests__/instructions_ui.test.mjs`
+- Verified alongside the existing build/test flow in the parent implementation task

docs/instructions-copy.md

@@ -0,0 +1,17 @@
+# Instructions UI copy
+
+## Banner copy
+Quick start
+How to use VidPlex
+
+## Steps
+1. Scan videos — Click Find Videos to search the current browser window for videos.
+2. Review the list — Check the popup list; each found video URL is clickable.
+3. Open the viewer — Click Open Viewer to open the 2x2 grid player in a new window.
+4. Reset and rescan — Click Clear to erase results and scan again.
+
+## Warning copy
+Warning: Browser pages, extension pages, and restricted frames can hide videos, so results may be incomplete.
+
+## Learn-more copy
+Learn more tooltip: Read the VidPlex README and audit notes.

docs/instructions-demo.svg

@@ -0,0 +1,50 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="720" viewBox="0 0 1280 720" role="img" aria-label="VidPlex popup instructions preview">
+  <defs>
+    <style>
+      .bg { fill: #ffffff; }
+      .panel { fill: #f8fafc; stroke: #e2e8f0; stroke-width: 1; }
+      .text { fill: #1a1a2e; font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
+      .muted { fill: #64748b; }
+      .accent { fill: #4361ee; }
+      .warn { fill: #7c3aed; }
+      .small { font-size: 12px; }
+      .tiny { font-size: 11px; letter-spacing: .08em; font-weight: 700; }
+      .title { font-size: 18px; font-weight: 600; }
+      .h2 { font-size: 14px; font-weight: 600; }
+      .step-title { font-size: 12px; font-weight: 600; }
+      .body { font-size: 12px; fill: #475569; }
+      .button-text { font-size: 12px; fill: #4361ee; }
+      .primary-text { fill: #ffffff; font-size: 14px; }
+    </style>
+  </defs>
+
+  <rect class="bg" x="0" y="0" width="1280" height="720"/>
+  <text class="text title" x="18" y="30">VidPlex</text>
+
+  <rect class="panel" x="17" y="50" width="1264" height="276" rx="10"/>
+  <text class="text muted tiny" x="30" y="72">QUICK START</text>
+  <text class="text h2" x="30" y="90">How to use VidPlex</text>
+
+  <rect x="1150" y="62" width="104" height="28" rx="8" fill="#ffffff" stroke="#e2e8f0"/>
+  <text class="button-text" x="1165" y="80">Hide instructions</text>
+
+  <g class="text">
+    <text class="step-title" x="48" y="126">Scan videos</text>
+    <text class="body" x="48" y="144">Click Find Videos to search the current browser window for videos.</text>
+
+    <text class="step-title" x="48" y="176">Review the list</text>
+    <text class="body" x="48" y="194">Check the popup list; each found video URL is clickable.</text>
+
+    <text class="step-title" x="48" y="226">Open the viewer</text>
+    <text class="body" x="48" y="244">Click Open Viewer to open the 2x2 grid player in a new window.</text>
+
+    <text class="step-title" x="48" y="276">Reset and rescan</text>
+    <text class="body" x="48" y="294">Click Clear to erase results and scan again.</text>
+
+    <text class="warn small" x="30" y="319">Warning: Browser pages, extension pages, and restricted frames can hide videos, so results may be incomplete.</text>
+    <text class="body" x="30" y="348">Learn more tooltip: Read the VidPlex README and audit notes.</text>
+  </g>
+
+  <rect x="17" y="339" width="1264" height="31" rx="8" fill="#4361ee"/>
+  <text class="primary-text" x="561" y="359">Find Videos (all tabs)</text>
+</svg>

docs/instructions-design.md

@@ -0,0 +1,26 @@
+# Instructions UI design
+
+## Placement
+The instructions banner sits above the primary action button so new users can read the steps before interacting with the popup.
+
+## Structure
+- Short kicker: “Quick start”
+- Heading: “How to use VidPlex”
+- Expand/collapse toggle for users who want a smaller popup
+- Ordered list of the core tasks
+- One warning line for edge cases
+- One short learn-more line that points to the README and audit notes
+
+## Copy strategy
+The microcopy avoids jargon and keeps each step tied to a visible control:
+- Find Videos
+- Open Viewer
+- Clear
+
+## Accessibility strategy
+- A labelled region exposes the whole panel to assistive tech
+- The toggle reflects the current visibility state
+- The collapsed state removes the body from the layout entirely
+
+## Notes
+This design intentionally favors clarity over density because extension popups are small and users typically need the instructions only once.

docs/pr-description.md

@@ -0,0 +1,42 @@
+# Add user instructions to goon plugin UI
+
+Branch: `feature/goon-instructions`
+
+## Summary
+Adds an always-visible, collapsible quick-start panel to the VidPlex popup so users can understand the scan / review / open / clear flow without reading the README first.
+
+## Links
+- Audit notes: [docs/instructions-audit.md](docs/instructions-audit.md)
+- Design notes: [docs/instructions-design.md](docs/instructions-design.md)
+- Copy deck: [docs/instructions-copy.md](docs/instructions-copy.md)
+- Preview render: [docs/instructions-demo.svg](docs/instructions-demo.svg)
+
+## Testing
+- `npm run build`
+- `npm test`
+
+Manual verification:
+1. Open the extension popup.
+2. Confirm the instructions banner renders expanded on mount.
+3. Click the toggle and confirm the panel collapses / expands and the label changes.
+4. Confirm the main Scan Videos button still works normally.
+
+## Changed files
+- `src/viewer/index.html`
+- `src/viewer/index.css`
+- `src/viewer/index.js`
+- `__tests__/instructions_ui.test.mjs`
+- `__tests__/run.mjs`
+- `docs/instructions-audit.md`
+- `docs/instructions-design.md`
+- `docs/instructions-copy.md`
+- `docs/instructions-demo.svg`
+
+## Acceptance criteria
+- A PR exists against `master`.
+- The PR description includes summary, links to the design/copy docs, a visual preview, testing steps, changed files, and acceptance criteria.
+- Reviewers are requested before handoff.
+
+## Open questions / risks
+- The repo still has some pre-existing lint warnings outside this change.
+- The preview asset is an SVG render of the UI rather than a raster screenshot.

manifest.json

@@ -1,12 +1,14 @@
 {
   "manifest_version": 3,
-  "name": "Goon Plugin",
-  "version": "0.1.0",
-  "description": "A Chrome extension",
+  "name": "VidPlex",
+   "version": "0.2.0",
+  "description": "Find videos on any page and view them in a grid.",
       "permissions": [
           "storage",
           "tabs",
-    "scripting"
+          "scripting",
+            "webRequest",
+            "declarativeNetRequest"
        ],
   "host_permissions": [
     "<all_urls>"
@@ -33,7 +35,7 @@
   ],
   "web_accessible_resources": [
     {
-      "resources": ["interceptors.js", "hls.min.js"],
+      "resources": ["interceptors.js", "hlds.js"],
       "matches": ["<all_urls>"]
     }
   ],

package-lock.json

@@ -1,15 +1,12 @@
 {
-  "name": "goon-plugin",
+  "name": "vidplex",
   "version": "0.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "goon-plugin",
+      "name": "vidplex",
       "version": "0.1.0",
-      "dependencies": {
-        "hls.js": "^1.5.17"
-      },
       "devDependencies": {
         "ajv": "^8.17.1",
         "ajv-formats": "^3.0.1",
@@ -2784,12 +2781,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/hls.js": {
-      "version": "1.6.17",
-      "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.6.17.tgz",
-      "integrity": "sha512-NUplVGVuc1hSPwdB/9/cbRkUmLrYi75/hqiXKdA+l300pJNxDu96R7jRb2imDzWJqIUF4I5ThmAdp9GvOCXsuQ==",
-      "license": "Apache-2.0"
-    },
     "node_modules/html-encoding-sniffer": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-4.0.0.tgz",

package.json

@@ -1,12 +1,12 @@
 {
-  "name": "goon-plugin",
-  "version": "0.1.0",
+  "name": "vidplex",
+   "version": "0.2.0",
   "private": true,
-  "description": "Chrome extension scaffold",
+  "description": "Chrome extension: find videos on a page and view them in a grid.",
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
+    "build": "vite build && node scripts/copy-hlds.mjs",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "test": "node __tests__/run.mjs",
@@ -23,5 +23,7 @@
     "typescript": "^5.7.0",
     "vite": "^6.0.0",
     "vitest": "^3.0.0"
+  },
+  "dependencies": {
   }
 }

scripts/copy-hlds.mjs

@@ -0,0 +1,20 @@
+// Copy the original ES5 hls.min.js source directly to dist/hlds.js.
+// This avoids Vite/esbuild adding arrow functions (which Chrome flags as "ES module content"
+// in extension URLs, preventing window.Hls from registering).
+
+import { readFileSync, writeFileSync } from 'fs';
+import { fileURLToPath } from 'url';
+import { dirname, resolve } from 'path';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const src = resolve(__dirname, '../src/inject/hls.min.js');
+const dst = resolve(__dirname, '../dist/hlds.js');
+let data = readFileSync(src, 'utf-8');
+
+// Remove sourceMappingURL line (avoids Chrome trying to fetch it from an invalid chrome-extension:// URL)
+data = data.replace(/[\r\n]+\/\/# sourceMappingURL=[^\s]*[\r\n]*/, '');
+
+writeFileSync(dst, data);
+console.log(`[copy-hlds] Copied hls.min.js -> dist/hlds.js (${data.length} bytes, pure ES5 source)`);

src/background/background.js

@@ -4,23 +4,617 @@
  * Uses Manifest V3 module-type service worker.
  */
 
-// Fired when the extension is first installed / updated / Chrome starts.
-chrome.runtime.onInstalled.addListener((details) => {
-  if (details.reason === 'install') {
-    console.log('[goon-plugin] Extension installed');
-  } else if (details.reason === 'update') {
-    console.log(`[goon-plugin] Extension updated from ${details.previousVersion}`);
+// === HLS manifest tracking via chrome.webRequest ===
+// Intercepts network requests at the browser level — no world/timing issues.
+// Catches .m3u8 manifest requests from ANY player (HLS.js, Video.js, custom).
+//
+// IMPORTANT: MV3 service workers are ephemeral — they are killed when idle and
+// restarted on demand. In-memory state (Map, Set, etc.) is LOST on kill.
+// Therefore, we persist captured manifests to chrome.storage.local so they
+// survive service worker restarts.
+
+function isHlsManifest(url) {
+  const u = url.toLowerCase();
+  // Exclude media segments
+  if (u.includes('.ts') || u.includes('.mp4') || u.includes('.webm') ||
+      u.includes('.aac') || u.includes('.m4s')) return false;
+  return u.includes('.m3u8') || u.includes('.hlsvod') ||
+         (u.includes('/hls/') && u.includes('.m3u')) ||
+         u.includes('/playlist.m3u') || u.includes('/manifest');
 }
+
+// === STRATEGY 8: Network-level fallback — log video requests across any CDN ===
+// Some players generate HLS manifests in-memory and make zero .m3u8 network
+// requests, only fetching video segments from a CDN. By logging every video-like
+// request (any host) we can: (a) confirm HLS activity via segment patterns,
+// (b) reconstruct manifest URLs from segment paths, (c) detect CDN response
+// headers that reveal playlist endpoints. No site-specific host list.
+const VIDEO_PATH_PATTERNS = ['/hls/', '/dash/', '/video/', '/segment', '/media/', '/stream'];
+
+function isVideoRequest(url) {
+  const u = url.toLowerCase();
+  // Already a known video/manifest extension
+  if (u.includes('.m3u8') || u.includes('.mpd') || u.includes('.hlsvod') ||
+      u.includes('.ts') || u.includes('.m4s') || u.includes('.mp4')) return true;
+  // Path-based detection for in-memory playlists
+  return VIDEO_PATH_PATTERNS.some(p => u.includes(p));
+}
+
+// Persist all video requests per tab (survives SW restarts)
+async function persistVideoRequest(tabId, url) {
+  const key = 'vr_requests_' + tabId;
+  try {
+    const stored = await chrome.storage.local.get(key);
+    const arr = stored[key] || [];
+    // Avoid duplicates — video segments come in rapid succession
+    if (!arr.some(r => r === url)) {
+      arr.push(url);
+      // Keep last 200 requests per tab (enough to detect segment patterns)
+      if (arr.length > 200) arr.splice(0, arr.length - 200);
+      await chrome.storage.local.set({ [key]: arr });
+    }
+  } catch(e) {
+    console.warn('[vidplex-bg] Failed to persist video request:', e && e.message ? e.message : e);
+  }
+}
+
+// --- Token / URL helpers ------------------------------------------
+//
+// A media CDN's auth token (h= / hash= / hdnea=) is base64 and its %-encoded
+// escapes are significant: a `+` decoded to a space corrupts it, which is what
+// produces the 410 Gone the live player avoids by sending `%2B`. So every
+// helper below keeps the query string RAW — it is never passed through
+// URLSearchParams (which decodes + -> space).
+
+// Group key for a video's URL: the path directory holding its variant/segment
+// (the last non-file path segment of a CDN URL). Used to match the freshest
+// live URL by video, host-independent. '' when the URL is malformed.
+function extractGroupKey(url) {
+  if (!url) return '';
+  try {
+    const path = new URL(url).pathname.split('/');
+    // Drop the final (file/segment or manifest) segment; the remaining
+    // directory joins into a key that is stable across a video's variants.
+    path.pop();
+    return path.join('/');
+  } catch {
+    return '';
+  }
+}
+
+// Raw query (everything after '?') with no decoding. '' when absent.
+function extractRawQuery(url) {
+  const idx = url.indexOf('?');
+  return idx === -1 ? '' : url.slice(idx + 1);
+}
+
+// Best-effort token expiry (epoch seconds) from a RAW query; 0 = unknown.
+// Used to rank tokens freshest-first so rescans pick the one most likely to
+// still validate.
+function tokenExpirySeconds(rawQuery) {
+  let secs = 0;
+  for (const key of ['validto', 'exp', 'e']) {
+    const m = new RegExp(key + '=(\\d+)').exec(rawQuery);
+    if (m) { secs = Math.max(secs, parseInt(m[1], 10)); break; }
+   }
+  return secs;
+}
+
+  // Build the parent manifest URL for a segment URL, keeping the FULL path to
+  // the variant directory and the RAW query (token encoding intact). Swaps the
+  // segment filename for a manifest filename in the same directory:
+  // {host}/path/to/variant/seg-1.ts   ->   {host}/path/to/variant/master.m3u8
+  // The variant directory is MANDATORY — a master playlist lives inside it;
+  // dropping it yields a 404/410. Returns '' for non-segment URLs.
+  function buildManifestForVariant(url) {
+  if (!url || !/\/seg-\d+/i.test(url)) return '';
+  try {
+    const [pathPart, queryPart] = url.split('?');
+    const idx = pathPart.lastIndexOf('/');
+    if (idx === -1) return '';
+    const dir = pathPart.slice(0, idx);            // variant directory
+    const rawQuery = queryPart ? '?' + queryPart : '';
+    return `${dir}/master.m3u8${rawQuery}`;
+       } catch {
+    return '';
+       }
+}
+
+// Reconstruct manifest URLs from segment URLs, keeping the raw query intact.
+// The live tab keeps rotating short-lived tokens; each captured segment's query
+// is the most recent token seen for that variant.
+function reconstructManifestsFromSegments(segments) {
+  const seen = new Set();
+  const manifests = [];
+  for (const url of segments) {
+        // Only handle video/segment URLs (e.g. .../seg-N.ts).
+    const manifestUrl = buildManifestForVariant(url);
+    if (manifestUrl && !seen.has(manifestUrl)) {
+      seen.add(manifestUrl);
+      manifests.push(manifestUrl);
+        }
+       }
+  return manifests;
+}
+
+// Collect captured video URLs across ALL tabs without a tabs.query match pattern
+// (which throws if the pattern is malformed). We scan every persisted vr_requests_ /
+// wr_manifests_ key so the rescan works even if the live source tab is closed.
+async function collectAllVideoUrls() {
+  const all = await chrome.storage.local.get();
+  const out = [];
+  for (const key of Object.keys(all)) {
+    if ((key.startsWith('vr_requests_') || key.startsWith('wr_manifests_')) && Array.isArray(all[key])) {
+      out.push(...all[key]);
+      }
+    }
+  return out;
+}
+
+  // For a group key, return the freshest live captured URL (highest token
+  // expiry) across all persisted tabs, preferring captured .m3u8 manifest URLs.
+  // null if nothing usable is captured yet. Rescans use this to replace a
+  // stored URL that now 410s with the newest token the live tab captured.
+  //
+  // No tabs.query match pattern is used: match patterns are brittle (a bad
+  // pattern throws "Invalid url pattern" and silently drops every rescan).
+  // We scan persisted capture data instead, which is always available and
+  // sidesteps the match-pattern API entirely.
+ async function freshLiveForGroup(groupKey, preferManifest) {
+  let all;
+  try {
+    all = await collectAllVideoUrls();
+     } catch (e) {
+    console.warn('[vidplex-bg] collectAllVideoUrls failed:', e && e.message ? e.message : e);
+    all = [];
+     }
+
+  let bestManifest = null, bestManifestExp = 0;
+  let bestVariant = null, bestVariantExp = 0;
+  let bestTokenSource = null, bestTokenExp = 0;
+  for (const url of all) {
+    if (extractGroupKey(url) !== groupKey) continue;
+    const exp = tokenExpirySeconds(extractRawQuery(url));
+    if (url.includes('.m3u8')) {
+      if (exp > bestManifestExp) { bestManifestExp = exp; bestManifest = url; }
+       } else if (/\/seg-\d+/i.test(url)) {
+      if (exp > bestVariantExp) { bestVariantExp = exp; bestVariant = url; }
+       } else {
+        if (exp > bestTokenExp) { bestTokenExp = exp; bestTokenSource = url; }
+       }
+      }
+
+     // Prefer a captured manifest; else the best segment (reconstructable to a
+     // manifest); else a token source so the proxy can re-token a good path.
+    if (bestManifest) return bestManifest;
+    if (!preferManifest && bestVariant) return bestVariant;
+    if (!preferManifest && bestTokenSource) return bestTokenSource;
+    if (bestVariant) return bestVariant;
+    return bestManifest || bestTokenSource || null;
+  }
+
+// Cache freshest tokens per group key so we don't query storage on every proxy
+// request. Keyed by group key; values resolve once and are reused until a rescan
+// (GOON_RESOLVE_MANIFEST) or a 410 forces an invalidation.
+const tokenCache = new Map();
+
+// Given a CDN URL that arrives WITHOUT a query (hls.js drops the relative-URL
+// token when building sub-playslists/segments), inject the freshest live token
+// for that group. Returns the URL with a query appended, or the original URL
+// unchanged when no token is available yet.
+async function injectFreshToken(url) {
+  if (!url) return url;
+  // Already carries a token — leave it alone.
+ if (url.includes('?')) return url;
+ try {
+    const groupKey = extractGroupKey(url);
+    if (!groupKey) return url;
+    if (tokenCache.has(groupKey)) {
+      const token = tokenCache.get(groupKey);
+      return token ? url + '?' + token : url;
+     }
+    const fresh = await freshLiveForGroup(groupKey, false);
+    const token = fresh ? extractRawQuery(fresh) : '';
+    tokenCache.set(groupKey, token);
+    console.log('[vidplex-bg] injectFreshToken for', groupKey, (token ? token.substring(0, 40) + '…' : '(none captured)'));
+    return token ? url + '?' + token : url;
+   } catch {
+    return url;
+     }
+}
+
+// Clear the per-video token cache. Called on rescan so the next proxy fetches
+// re-query storage for a freshly-rotated token.
+function invalidateTokenCache() { tokenCache.clear(); }
+
+// CDN registrable domains whose referer we have already captured this SW
+// lifetime, so we do not re-query the tab for every segment of a stream.
+// Lost if the SW is killed; persistReferer's storage dedupe covers a fresh SW.
+const refererCapturedDomains = new Set();
+
+chrome.webRequest.onBeforeRequest.addListener(
+  async (details) => {
+    if (details.tabId < 0) return;
+
+    // Log video-like requests from any host (CDN-agnostic).
+    if (isVideoRequest(details.url)) {
+      console.log('[vidplex-bg] webRequest: video request in tab', details.tabId, ':', details.url.substring(0, 180));
+      await persistVideoRequest(details.tabId, details.url);
+       // Capture the provider referer for this CDN host from the source tab's
+       // URL: the browser sends the referring page's URL as the Referer for a
+       // cross-origin video request, and that IS the tab's URL. extraInfoSpec
+       // (reading the actual request headers) is rejected by some Chromium
+       // builds and fails the whole service worker, so we derive the referer
+       // from the tab instead. The `tabs` + host_permissions already allow it.
+      const host = hostOf(details.url);
+      const domain = host ? registrableDomain(host) : '';
+      if (domain && !refererCapturedDomains.has(domain)) {
+        try {
+          const tab = await chrome.tabs.get(details.tabId);
+          const ref = tab && tab.url;
+          if (ref) {
+            await persistReferer(host, ref);
+            refererCapturedDomains.add(domain);
+            console.log('[vidplex-bg] captured referer for', domain, '->', ref);
+          }
+        } catch {
+          // Tab may have closed mid-stream; a later request from a live tab
+          // re-captures. Best-effort.
+        }
+      }
+      }
+
+      // Also capture HLS manifest URLs (original logic)
+     if (!isHlsManifest(details.url)) return;
+
+    console.log('[vidplex-bg] webRequest: HLS manifest in tab', details.tabId, ':', details.url.substring(0, 120));
+
+    const key = 'wr_manifests_' + details.tabId;
+    try {
+      const stored = await chrome.storage.local.get(key);
+      const arr = stored[key] || [];
+      if (!arr.includes(details.url)) {
+        arr.push(details.url);
+        await chrome.storage.local.set({ [key]: arr });
+      }
+    } catch(e) {
+      console.warn('[vidplex-bg] Failed to persist webRequest manifest:', e && e.message ? e.message : e);
+    }
+  },
+  { urls: ['<all_urls>'] }
+);
+
+// Clean up stale PER-TAB entries when tabs are closed. NOTE: 'goon_referers' is
+// a domain-keyed GLOBAL store — it must outlive its capture tab so a proxy fetch
+// for that host still finds its referer after the source tab is closed. It is
+// therefore NOT removed here (only the per-tab vr_requests_/wr_manifests_ keys
+// are). Stale referers are pruned opportunistically in persistReferer.
+chrome.tabs.onRemoved.addListener(async (tabId) => {
+  const keys = ['wr_manifests_' + tabId, 'vr_requests_' + tabId];
+  try {
+    await chrome.storage.local.remove(keys);
+     } catch { /* ignore */ }
     });
 
-// Listen for messages from popup or content scripts.
+// === Capture the provider-origin Referer per CDN host (CDN-agnostic) ===
+// Some media CDNs reject requests whose `Referer` is not the provider page's
+// origin (HTTP 412). A fetch() CANNOT set `Referer` — it is a "forbidden
+// header" in the Fetch API, so a service-worker fetch() would send
+// `Referer: chrome-extension://<id>`, which the CDN rejects. The
+// declarativeNetRequest API rewrites request headers at the network layer, below
+// the Fetch API's restriction, and its rules apply to fetch() calls made inside
+// the SW.
+//
+// We cannot hardcode a target referer: the proxy is invoked from the viewer
+// (a different origin than the source page), and a DNR rule cannot read a live
+// page's origin. So we derive the provider referer from the source tab's own URL.
+// For a cross-origin video request the browser sends the referring page's URL as
+// the Referer, and that page IS the tab currently loading the video — so the tab
+// URL is the referer we need. We read it via chrome.webRequest.onBeforeRequest
+// (no header access — it cannot read the request headers) plus chrome.tabs.get,
+// which returns the source tab's URL, and persist that per CDN host. The
+// GOON_PROXY_FETCH handler then installs a DNR rule that re-inserts that
+// captured referer for just that host, so the proxy's fetch() is accepted.
+// This requires no knowledge of any particular site. Deriving the referer from
+// the tab URL (rather than reading the real request header via
+// onBeforeSendHeaders + extraHeaders) is intentional: extraInfoSpec header
+// parsing is rejected by some Chromium builds and fails the whole service worker,
+// and the tabs + host permissions already permit chrome.tabs.get.
+//
+// Each CDN host gets its OWN declarativeNetRequest rule id so that concurrent
+// proxy fetches for different hosts can't clobber each other's rule (a single
+// shared id + a remove-then-add lets two hosts interleave and leave the wrong
+// host's referer live). The id is derived from the host via a monotonic counter
+// keyed by host, so it is stable for a given host across installs.
+let nextRefererRuleId = 9001;
+const refererRuleIds = new Map();
+function refererRuleIdFor(host) {
+  const existing = refererRuleIds.get(host);
+  if (existing !== undefined) return existing;
+  const id = nextRefererRuleId++;
+  refererRuleIds.set(host, id);
+  return id;
+}
+
+// host of a URL (CDN host, lowercased); '' when the URL is malformed.
+function hostOf(url) {
+  if (!url) return '';
+  try { return new URL(url).host.toLowerCase(); } catch { return ''; }
+}
+
+// Registrable domain of a CDN host — the label a single provider's referer
+// applies to. A referer-protecting CDN serves manifests and segments from many
+// edge subdomains that share ONE
+// provider referer, so we key the referer store, the DNR rule, and proxy-host
+// matching on this domain rather than the exact subhost.
+//
+// Heuristic: the last two DNS labels. Correct for the overwhelmingly common
+// single-label public suffixes (.com, .net, .org, .io, ...). Known caveat:
+// multi-label public suffixes such as .co.uk / .com.au collapse to the public
+// suffix itself (foo.co.uk -> co.uk); that is an exotic edge case and no worse
+// than the exact-host behavior it replaces. A single-level host (no dot, or a
+// bare TLD) is returned unchanged.
+function registrableDomain(host) {
+  if (!host) return '';
+  const parts = host.split('.');
+  if (parts.length < 2) return host;
+  return parts.slice(-2).join('.');
+}
+
+
+// How long a captured referer is trusted before it is pruned on the next
+// persist. Kept long enough for the scan-now / watch-later flow (a user scans a
+// page, then opens the viewer much later) without tying cleanup to tab close (a
+// still-open source tab's referer must survive other tabs closing).
+const REFERER_TTL_MS = 7 * 24 * 60 * 60 * 1000;
+
+// Persist the captured referer per CDN registrable domain so the proxy can
+// re-use it even after the capture tab closes. Keyed by the host's registrable
+// domain so a single provider referer covers every edge subdomain (a CDN serves
+// manifests/segments from many subhosts that share one referer), and so a proxy
+// for any sibling subhost can look it up without knowing the source tab. Each
+// entry is stamped with a capture time; entries older than the TTL are pruned
+// opportunistically here (never on tab close).
+async function persistReferer(host, referer) {
+  const domain = registrableDomain(host);
+  if (!domain || !referer) return;
+  try {
+    const stored = await chrome.storage.local.get('goon_referers');
+    const map = stored['goon_referers'] || {};
+    const now = Date.now();
+    // Opportunistic per-domain prune: drop entries older than the TTL.
+    for (const [h, entry] of Object.entries(map)) {
+      if (h !== domain && (!entry || !entry.at || now - entry.at > REFERER_TTL_MS)) {
+        delete map[h];
+      }
+    }
+    const current = map[domain];
+    if (current && current.referer === referer) return;
+    map[domain] = { referer, at: now };
+    await chrome.storage.local.set({ goon_referers: map });
+      } catch (e) {
+    console.warn('[vidplex-bg] persistReferer failed:', e && e.message ? e.message : e);
+     }
+ }
+
+// Look up the referer captured for a host's registrable domain. '' when none
+// has been captured (or the stored entry is malformed).
+async function getReferer(host) {
+  if (!host) return '';
+  try {
+    const stored = await chrome.storage.local.get('goon_referers');
+    const entry = (stored['goon_referers'] || {})[registrableDomain(host)];
+    return entry && entry.referer ? entry.referer : '';
+      } catch {
+    return '';
+      }
+ }
+
+// Install (idempotently) a DNR rule that sets the captured referer for a given
+// CDN host. The value comes from capture (or a fallback origin), never a
+// hardcoded site. Scoped to the requested host so only proxy fetches for that
+// host get the rewritten header.
+//
+// Each host gets its own rule id (refererRuleIdFor) so that concurrent proxy
+// fetches for DIFFERENT hosts never interleave: host A's rule and host B's rule
+// are distinct DNR ids and one install can't remove the other. Within a single
+// host, a per-host async lock (refererRuleLocks) serializes the idempotency
+// check + updateSessionRules so the install-and-record pair is atomic — no two
+// installs for the same host can interleave their check/update.
+const refererRuleInstalled = new Map();
+const refererRuleLocks = new Map();
+
+async function ensureRefererRule(host, referer) {
+  const domain = registrableDomain(host);
+  if (!domain || !referer) return;
+  const api = chrome.declarativeNetRequest;
+  if (!api || typeof api.updateSessionRules !== 'function') {
+    console.warn('[vidplex-bg] declarativeNetRequest unavailable; skipping referer rule');
+    return;
+  }
+
+   // Serialize per host so the idempotency check + updateSessionRules is atomic.
+  const run = (async () => {
+    if (refererRuleInstalled.has(domain) && refererRuleInstalled.get(domain) === referer) {
+      return;
+    }
+    const ruleId = refererRuleIdFor(domain);
+    try {
+      // Remove only THIS host's own rule id, then add it back scoped to the host.
+      await api.updateSessionRules({
+        removeRuleIds: [ruleId],
+        addRules: [{
+          id: ruleId,
+          priority: 1,
+          action: {
+            type: 'modifyHeaders',
+            // `set` is allowed for any request header (only `append` is restricted
+            // to a fixed allowlist). `referer` is the header the CDN checks.
+            requestHeaders: [
+              { header: 'referer', operation: 'set', value: referer },
+            ],
+          },
+          condition: {
+            // Host + subdomains ONLY, so only proxy fetches for this host get the
+            // rewritten referer; the source page's own requests keep theirs.
+            requestDomains: [domain],
+          },
+        }],
+      });
+      refererRuleInstalled.set(domain, referer);
+      console.log('[vidplex-bg] DNR referer rule installed for', domain, '(' + ruleId + ')');
+    } catch (e) {
+      console.warn('[vidplex-bg] ensureRefererRule failed:', e && e.message ? e.message : e);
+    }
+  })().finally(() => { refererRuleLocks.set(domain, null); });
+  refererRuleLocks.set(domain, run);
+  return run;
+}
+
+
+// === Message handlers for popup/data consumers ===
+
 chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => {
   switch (message.type) {
     case 'PING':
       sendResponse({ pong: true, timestamp: Date.now() });
       return;
 
+    case 'GOON_GET_WEBREQUEST_MANIFESTS': {
+      (async () => {
+        const tabId = message.tabId;
+        const key = 'wr_manifests_' + tabId;
+        try {
+          const stored = await chrome.storage.local.get(key);
+          sendResponse({ manifests: stored[key] || [] });
+        } catch(e) {
+          sendResponse({ manifests: [] });
+        }
+      })();
+      return true;
+    }
+
+     case 'GOON_GET_VIDEO_REQUESTS': {
+        // Strategy 8: Return all video requests for a tab, including reconstructed manifests
+        (async () => {
+         const tabId = message.tabId;
+         const [segKey] = ['vr_requests_' + tabId];
+        try {
+          const stored = await chrome.storage.local.get(segKey);
+          const segments = stored[segKey] || [];
+          // Also reconstruct manifest URLs from segment patterns
+          const reconstructed = reconstructManifestsFromSegments(segments);
+          sendResponse({
+            segments: segments,
+            reconstructedManifests: reconstructed,
+            totalRequests: segments.length,
+          });
+        } catch(e) {
+          sendResponse({ segments: [], reconstructedManifests: [], totalRequests: 0 });
+        }
+        })();
+      return true;
+      }
+
+      case 'GOON_RESOLVE_MANIFEST': {
+           // Resolve the freshest live manifest for the video encoded in a stored
+           // URL. The viewer calls this at startup and on a fatal network error:
+           // the live tab keeps rotating short-lived tokens, so the freshest
+           // captured manifest (highest expiry) replaces one that has 410'd.
+           // Clears the token cache first so subsequent proxy fetches re-query for
+           // the freshly-rotated token rather than the cached (now-dead) one.
+         async function resolveFreshManifest(message, sendResponse) {
+           invalidateTokenCache();
+           const url = message.url || '';
+           const groupKey = extractGroupKey(url);
+           if (!groupKey) { sendResponse({ ok: false, error: 'no group key' }); return; }
+           try {
+             const fresh = await freshLiveForGroup(groupKey, true);
+             sendResponse({ ok: true, fresh, groupKey, changed: !!(fresh && fresh !== url) });
+            } catch (e) {
+             console.warn('[vidplex-bg] resolveFreshManifest failed:', e && e.message ? e.message : e);
+             sendResponse({ ok: false, error: e && e.message ? e.message : String(e), groupKey });
+            }
+          }
+         resolveFreshManifest(message, sendResponse);
+         return true;
+        }
+
+       case 'GOON_PROXY_FETCH': {
+            // Proxy a fetch request through the service worker (bypasses CORS).
+            // Returns base64-encoded response data. Used by the viewer when
+            // extension-origin requests to video CDNs are blocked by CORS.
+            //
+            // A fetch() can't set the Referer itself (forbidden header — Chrome
+            // replaces it with chrome-extension://...), so a declarativeNetRequest
+            // rule installs the captured provider-origin referer at the network
+            // layer (DNR applies to SW fetch() per Chrome docs). The rule is
+            // installed on demand for the requested host only.
+           (async () => {
+             try {
+                const proxyHost = hostOf(message.url);
+                if (proxyHost) {
+                   // Prefer the provider's real referer captured from the live
+                   // tab (domain-aware), or the entry's scan-time referer the viewer sent.
+                    // With neither, install no rule: a self-origin referer is
+                    // guaranteed-wrong for hotlink protection, so we never fall
+                    // back to one (it would just 412).
+                   const captured = await getReferer(proxyHost);
+                   const referer = captured || message.referer || '';
+                   if (referer) await ensureRefererRule(proxyHost, referer);
+                   }
+                      // hls.js resolves sub-playslists/segments relative to the master
+                      // and can DROP the token query, handing us a token-less
+                      // URL that 410s. injectFreshToken supplies the freshest live
+                      // token for that video; the final `+` -> `%2B` pass keeps the
+                      // (possibly injected or surviving) base64 token intact for the
+                      // CDN's query parsing.
+               const resolved = await injectFreshToken(message.url || '');
+               const proxyUrl = resolved.replace(/\+/g, '%2B');
+               const resp = await fetch(proxyUrl);
+              if (!resp.ok) {
+                console.warn('[vidplex-bg] proxyFetch', resp.status, message.url.substring(0, 120));
+                sendResponse({ ok: false, status: resp.status, error: 'HTTP ' + resp.status });
+                return;
+                   }
+               const buffer = await resp.arrayBuffer();
+               const bytes = new Uint8Array(buffer);
+                     // Convert to base64 (btoa can only handle strings up to ~65k chars)
+                let binary = '';
+                const CHUNK_SIZE = 32768;
+                for (let i = 0; i < bytes.length; i += CHUNK_SIZE) {
+                 const chunk = bytes.subarray(i, i + CHUNK_SIZE);
+                 binary += String.fromCharCode.apply(null, Array.from(chunk));
+                   }
+               const base64 = btoa(binary);
+                sendResponse({ ok: true, data: base64, mimeType: resp.headers.get('content-type') || '' });
+              } catch(e) {
+              console.warn('[vidplex-bg] proxyFetch failed:', e && e.message ? e.message : e);
+              sendResponse({ ok: false, error: e && e.message ? e.message : String(e) });
+              }
+           })();
+         return true;
+         }
+
+    case 'GOON_GET_REFERERS': {
+        // Resolve the provider referer captured for each manifest host
+        // (domain-aware: one provider referer covers every edge subdomain).
+        // Used at scan time to bind the referer to a stored video entry so it
+        // survives the watch-later flow.
+       async function getReferers(message, sendResponse) {
+         const hosts = Array.isArray(message.hosts) ? message.hosts : [];
+         const referers = {};
+         for (const host of hosts) {
+           const r = await getReferer(host);
+           if (r) referers[host] = r;
+            }
+         sendResponse({ ok: true, referers });
+        }
+       getReferers(message, sendResponse);
+       return true;
+        }
+
     default:
-      console.warn('[goon-plugin] Unknown message type:', message.type);
+      console.warn('[vidplex-plugin] Unknown message type:', message.type);
   }
 });

src/content/content.js

@@ -26,21 +26,30 @@
    * Inject interceptors into the MAIN world at document_start.
    *
      * Uses script.src = chrome.runtime.getURL('interceptors.js') instead of
-   * script.textContent to bypass strict page CSP. Sites like Pornhub enforce
+     * script.textContent to bypass strict page CSP. Some sites enforce
      * 'script-src' that blocks inline execution (textContent). Chrome treats
      * extension-originated <script src="..."> as content scripts — not as
      * page inline code — so the page's CSP does not apply.
    *
+   * IMPORTANT: Remove the script element ONLY after the load event fires.
+   * Removing it synchronously can prevent the browser from starting the fetch,
+   * especially in Edge/Chrome with strict timing.
+   *
    * Runs BEFORE any page JS (document_start), so we catch all HLS activity.
    */
   function injectInterceptors() {
     const script = document.createElement('script');
     script.src = chrome.runtime.getURL('interceptors.js');
     script.setAttribute('type', 'text/javascript');
-    (document.head || document.documentElement).appendChild(script);
-    // Remove the script element after execution but keep interceptors active
+    script.onload = function () {
+      // Script loaded and executed — safe to remove the element now
+      if (script.parentNode) {
         script.parentNode.removeChild(script);
       }
+    };
+    (document.head || document.documentElement).appendChild(script);
+    // Keep the element in the DOM — onload will remove it after execution
+  }
 
   // Inject immediately at document_start
   injectInterceptors();
@@ -58,7 +67,8 @@
           source: source,
           timestamp: event.data.timestamp
         });
-        console.log('[goon-plugin] Intercepted HLS manifest via', source, ':', url);
+        console.log('[vidplex-plugin] Intercepted HLS manifest via', source, ':', url);
+        console.log('[vidplex-plugin] Total intercepted manifests so far:', interceptedManifests.length);
       }
     }
   });
@@ -96,14 +106,28 @@
    */
   function getVideoData() {
     const poster = extractPoster();
+    console.log('[vidplex-content] getVideoData called. Poster:', poster);
+    console.log('[vidplex-content] Intercepted manifests count:', interceptedManifests.length);
+    if (interceptedManifests.length > 0) {
+      console.log('[vidplex-content] Manifest details:', JSON.stringify(interceptedManifests.map(m => ({ url: m.url, source: m.source }))));
+    }
 
     // DOM video scan (isolated world — can access DOM but not page JS)
     const videoElements = [];
     try {
       const videos = document.querySelectorAll('video');
+      console.log('[vidplex-content] Found', videos.length, '<video> elements in DOM');
       for (const video of videos) {
         const style = window.getComputedStyle(video);
-        if (style.display !== 'none' && video.clientWidth > 0 && video.clientHeight > 0) {
+        const isVisible = style.display !== 'none' && video.clientWidth > 0 && video.clientHeight > 0;
+        console.log('[vidplex-content] Video:', {
+          src: (video.currentSrc || video.src || '').substring(0, 120),
+          visible: isVisible,
+          dimensions: video.clientWidth + 'x' + video.clientHeight,
+          networkState: video.networkState,
+          readyState: video.readyState,
+        });
+        if (isVisible) {
           // Extract buffered ranges as serializable arrays
           const bufferedRanges = [];
           if (video.buffered && video.buffered.length > 0) {
@@ -122,7 +146,25 @@
           });
         }
       }
-    } catch { /* ignore DOM access errors */ }
+    } catch(e) { /* ignore DOM access errors */
+      console.warn('[vidplex-content] DOM scan error:', e && e.message ? e.message : e);
+    }
+
+    console.log('[vidplex-content] Visible video elements:', videoElements.length);
+    // Expose interceptor data globally so the popup's deep probe can read it.
+    window.__goon_plugin_data = window.__goon_plugin_data || {
+      manifests: [],
+      sources: [],
+      _contentType: 'content-script',
+    };
+    // Merge our intercepted manifests into the shared data store (the interceptors
+    // write their own URLs here; we add content-script-level XHR intercepts).
+    for (const m of interceptedManifests) {
+      if (!window.__goon_plugin_data.manifests.includes(m.url)) {
+        window.__goon_plugin_data.manifests.push(m.url);
+        window.__goon_plugin_data.sources.push(m.source);
+      }
+    }
 
     return {
       posterUrl: poster,
@@ -141,5 +183,5 @@
     return false;
   });
 
-  console.log('[goon-plugin] Content script loaded. Interceptors injected at document_start.');
+  console.log('[vidplex-plugin] Content script loaded. Interceptors injected at document_start.');
 })();

src/icons/icon.svg

@@ -1,4 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
   <rect width="128" height="128" rx="24" fill="#4361ee"/>
-  <text x="64" y="84" text-anchor="middle" dominant-baseline="middle" font-size="64" font-weight="bold" font-family="sans-serif" fill="white">G</text>
+  <text x="64" y="84" text-anchor="middle" dominant-baseline="middle" font-size="64" font-weight="bold" font-family="sans-serif" fill="white">V</text>
 </svg>

src/inject/interceptors.js

@@ -2,7 +2,8 @@
  * interceptors.js — Main-world interceptors for HLS manifest detection.
  *
  * This file is injected into the main world via a <script src="..."> tag
- * (NOT inline textContent) to bypass strict CSP on sites like Pornhub.
+ * (NOT inline textContent) to bypass strict CSP on sites that restrict
+ * script-src.
  *
  * When loaded as an external script from the extension origin, Chrome treats
  * it as an extension content script — not as page inline code — so the

src/viewer/index.css

@@ -32,6 +32,90 @@ h1 {
   font-weight: 600;
 }
 
+.instructions-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: #f8fafc;
+}
+
+.instructions-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.instructions-kicker {
+  margin-bottom: 2px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #64748b;
+}
+
+.instructions-panel h2 {
+  font-size: 14px;
+  line-height: 1.3;
+  font-weight: 600;
+}
+
+.instructions-toggle {
+  flex: 0 0 auto;
+  padding: 6px 10px;
+  font-size: 12px;
+  background: transparent;
+  color: var(--accent);
+  border: 1px solid var(--border);
+}
+
+.instructions-toggle:hover {
+  background: #eef2ff;
+}
+
+.instructions-body {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.instructions-body[hidden] {
+  display: none;
+}
+
+.instructions-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding-left: 18px;
+}
+
+.instructions-list li {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.instructions-list strong {
+  font-size: 12px;
+}
+
+.instructions-list span,
+.instructions-note,
+.instructions-learn-more {
+  font-size: 12px;
+  line-height: 1.45;
+  color: #475569;
+}
+
+.instructions-note {
+  color: #7c3aed;
+}
+
 button {
   padding: 8px 16px;
   background: var(--accent);

src/viewer/index.html

@@ -3,12 +3,54 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Goon Plugin</title>
+  <title>VidPlex</title>
   <link rel="stylesheet" href="index.css">
 </head>
 <body>
   <div id="app">
-    <h1>Goon Plugin</h1>
+    <h1>VidPlex</h1>
+    <section class="instructions-panel" role="region" aria-labelledby="instructions-title">
+      <div class="instructions-header">
+        <div>
+          <p class="instructions-kicker">Quick start</p>
+          <h2 id="instructions-title">How to use VidPlex</h2>
+        </div>
+        <button
+          id="instructions-toggle"
+          type="button"
+          class="instructions-toggle"
+          aria-expanded="true"
+          aria-controls="instructions-body"
+        >
+          Hide instructions
+        </button>
+      </div>
+      <div id="instructions-body" class="instructions-body">
+        <ol class="instructions-list">
+          <li>
+            <strong>Start your videos</strong>
+            <span>Open the videos you want to play, one per tab, and begin their playback.</span>
+          </li>
+          <li>
+            <strong>Scan videos</strong>
+            <span>Click <strong>Find Videos</strong> to search the current browser window's tabs for playing videos.</span>
+          </li>
+          <li>
+            <strong>Review the list</strong>
+            <span>Check to make sure the right number of videos was found.</span>
+          </li>
+          <li>
+            <strong>Open the viewer</strong>
+            <span>Click <strong>Open Viewer</strong> to open the grid player in a new window.</span>
+          </li>
+          <li>
+            <strong>Reset and rescan</strong>
+            <span>Click <strong>Clear</strong> to erase results and scan again.</span>
+          </li>
+        </ol>
+        <p class="instructions-note">Warning: Browser pages, extension pages, and restricted frames can hide videos, so results may be incomplete.</p>
+      </div>
+    </section>
     <button id="find-btn">Find Videos (all tabs)</button>
     <div id="video-list" class="video-list" style="display:none;"></div>
     <div id="status" class="status" style="min-height:16px;"></div>

src/viewer/schema.json

@@ -33,6 +33,11 @@
       "type": "string",
       "enum": ["direct", "hls"],
       "description": "Media delivery format. Defaults to 'direct' when omitted. Set to 'hls' for HTTP Live Streaming."
+    },
+    "referer": {
+      "type": ["string", "null"],
+      "format": "uri",
+      "description": "Provider Referer captured at scan time for the manifest's CDN; the proxy sends it so a referer-protecting CDN accepts sibling edge subdomains. Optional."
     }
   },
   "additionalProperties": false,

src/viewer/viewer.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Goon Viewer</title>
+  <title>VidPlex Viewer</title>
   <link rel="stylesheet" href="viewer.css">
 </head>
 <body>

src/viewer/viewer.js

@@ -19,10 +19,10 @@
  * overlays and an aggregate status bar.
  */
 
-// HLS is vendored locally to avoid CSP blocks on sites like Pornhub that
-// restrict script-src to 'self'. The hls.min.js bundle is built by Vite
-// and exposed via chrome.runtime.getURL() so it loads from the extension
-// origin, bypassing page CSP entirely.
+// HLS is vendored locally to avoid CSP blocks on sites that restrict
+// script-src to 'self'. The hls.js bundle is copied (not minified) so it
+// loads from the extension origin via chrome.runtime.getURL(), bypassing
+// page CSP entirely.
 
 /**
  * Grid-optimized hls.js configuration.
@@ -52,6 +52,276 @@ const gridN = parseInt(params.get('grid'), 10) || 2;
 const tags = params.get('tags') ? JSON.parse(params.get('tags')) : [];
 const panelsEl = document.getElementById('panels');
 
+/** Track all Hls instances so we can destroy them on unload. */
+
+    /**
+     * Custom HLS loader that proxies URLs whose host blocks extension-origin
+     * requests (via a learned proxy-host set) through the service worker
+     * (bypassing CORS/Referer restrictions) and fetches everything else natively.
+     *
+     * hls.js creates one loader instance per request via `new HlsLoader(hls)`, then
+     * calls `loader.load(context, config, callbacks)` — callbacks are the 3rd arg
+     * in v9 (some wrapper paths put them 2nd, so we scan each argument). The stats
+     * object passed to the callbacks is pre-allocated by us and mutated by hls.js
+    * in place, so it must have the correct sub-shape (see createLoadedStats).
+    */
+    function HlsLoader(config) {
+      this._config = config;
+      this._xhr = null;
+       // hls.js's loadFragment does `t.stats = h.stats` BEFORE calling h.load(),
+      // so the LoadedStats object must exist on the instance at construction.
+      // Without it every fragment's `stats` becomes undefined and hls.js's
+      // auto-level `_abandonRulesCheck` crashes on `o.loading.start`.
+      this.stats = createLoadedStats();
+       }
+
+  HlsLoader.prototype.abort = function () {
+    this._aborted = true;
+    if (this._xhr) { this._xhr.abort(); this._xhr = null; }
+    };
+
+   /**
+    * Build a hls.js-compatible LoadedStats object. hls.js's loader `load()`
+    * pre-allocates one of these and passes it (by reference) as the 2nd arg to
+    * onSuccess/onError/onTimeout; hls.js then mutates its sub-objects
+    * (`stats.parsing.start`, `stats.loading.first`, ...). A flat object crashes
+    * with "Cannot set properties of undefined (setting 'start')".
+    */
+   function createLoadedStats() {
+     return {
+      aborted: false,
+      loaded: 0,
+      retry: 0,
+      total: 0,
+      chunkCount: 0,
+      bwEstimate: 0,
+      loading: { start: 0, first: 0, end: 0 },
+      parsing: { start: 0, end: 0 },
+      buffering: { start: 0, first: 0, end: 0 },
+        };
+       }
+
+    HlsLoader.prototype.load = function (context, loaderConfig, callbacksArg) {
+     const self = this;
+     self._aborted = false;
+
+
+      // hls.js invokes loaders as load(context, config, callbacks) in v9, but
+      // some paths/wrappers pass callbacks as the 2nd arg. Scan every argument
+      // for the object carrying {onSuccess,onError,onTimeout} so it works either
+      // way.
+      const args = [callbacksArg, loaderConfig, context].filter(Boolean);
+      let cb = null;
+      for (const c of args) {
+        if (c && (typeof c.onSuccess === 'function' || typeof c.onError === 'function' || typeof c.onTimeout === 'function')) {
+          cb = c;
+          break;
+           }
+          }
+      const onSuccess = cb && typeof cb.onSuccess === 'function' ? cb.onSuccess : null;
+      const onError = cb && typeof cb.onError === 'function' ? cb.onError : null;
+      const onTimeout = cb && typeof cb.onTimeout === 'function' ? cb.onTimeout : null;
+
+      // `context` carries the request URL/type; `loaderConfig` may carry a
+      // per-loader timeout. Fall back defensively.
+      const url = (context && context.url) || (loaderConfig && loaderConfig.url);
+      self._loaderContext = ((context && context.type) || '?') + ': ' + (url || '').substring(0, 100);
+      self._timeout = (loaderConfig && loaderConfig.timeout) || (context && context.timeout) || 10000;
+
+       const trequest = Date.now();
+       // Reuse this.stats: hls.js already copied this reference onto every
+       // fragment via `t.stats = h.stats` before load(), so the object we
+       // mutate here is the very one `_abandonRulesCheck` reads.
+       const stats = this.stats;
+       stats.loading.start = trequest;
+
+       const isManifest = /\.m3u8($|\?)/i.test(url || '');
+       const needProxy = needsProxy(url);
+
+       // hls.js loader callback contract (verified against the bundled loader):
+       //   onSuccess(response, stats, context, networkDetails)
+       //   onError(response,   stats, context, networkDetails)
+       //   onTimeout(response,  stats, context)
+       // `response` is {url, data, code, headers}; `data` is a *string* for
+       // .m3u8 manifests (hls.js runs indexOf/regex on it) and an ArrayBuffer
+       // for .ts segments. hls.js mutates `stats` and `context` in place, so we
+       // pass the SAME object references we received — passing a timestamp there
+       // caused "Cannot create property 'levelDetails' on number".
+       const fireSuccess = (data) => {
+        if (!onSuccess) {
+          console.warn('[vidplex-viewer] no onSuccess callback for', (url || '').substring(0, 100));
+          return;
+            }
+        const tLoad = Date.now();
+        stats.loading.first = tLoad;
+        stats.loading.end = tLoad;
+        stats.loaded = (data instanceof ArrayBuffer ? data.byteLength : (data && data.length) || 0);
+         onSuccess({ url, data, code: 200, headers: {} }, stats, context, null);
+         };
+
+       const fireError = (code, text) => {
+        if (!onError) {
+          console.error('[vidplex-viewer] no onError callback; error:', text || code, (url || '').substring(0, 100));
+          return;
+            }
+        stats.loading.end = Date.now();
+        console.warn('[vidplex-viewer] HlsLoader error:', code, text, (url || '').substring(0, 100));
+         onError({ code: code || 0, text: text || '', url, headers: {}, data: null }, stats, context, null);
+         };
+
+       const fireTimeout = () => {
+        if (!onTimeout) return;
+        onTimeout({ url, code: 0, text: 'timeout', headers: {}, data: null }, stats, context);
+         };
+
+      if (needProxy) {
+          // Route through the service worker to bypass the CDN's CORS/Referer
+        // restrictions. The SW adds the required Referer and returns base64.
+         console.log('[vidplex-viewer] Proxying via SW:', (url || '').substring(0, 120));
+        chrome.runtime.sendMessage({ type: 'GOON_PROXY_FETCH', url, referer: refererForUrl(url) }, (resp) => {
+          if (self._aborted) return;
+          const lastErr = chrome.runtime.lastError;
+          if (lastErr || !resp || !resp.ok) {
+            const status = resp && resp.status ? resp.status : 0;
+            const text = lastErr && lastErr.message ? lastErr.message : (resp && resp.error) || ('HTTP ' + status || 'unknown');
+             fireError(status || 0, text);
+             return;
+              }
+           // resp.data is base64. Decode to a binary string, then to a UTF-8
+            // string (manifests) or an ArrayBuffer (segments).
+          let binary = '';
+          try {
+            binary = atob(resp.data || '');
+             } catch {
+              fireError(0, 'Failed to decode proxy response base64');
+               return;
+                }
+          if (isManifest) {
+            const bytes = new Uint8Array(binary.length);
+            for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
+             fireSuccess(new TextDecoder().decode(bytes));
+             return;
+              }
+          const segBytes = new Uint8Array(binary.length);
+          for (let i = 0; i < binary.length; i++) segBytes[i] = binary.charCodeAt(i);
+            // Pass an ArrayBuffer to match hls.js's default XHR loader.
+          fireSuccess(segBytes.buffer);
+           });
+      } else {
+        const xhr = new XMLHttpRequest();
+        self._xhr = xhr;
+        xhr.open('GET', url, true);
+        xhr.withCredentials = false;
+         xhr.onload = () => {
+          if (xhr.status >= 200 && xhr.status < 300) {
+            const data = isManifest
+                ? new TextDecoder().decode(new Uint8Array(xhr.response))
+                : xhr.response;
+             fireSuccess(data);
+              } else {
+             fireError(xhr.status, 'HTTP ' + xhr.status);
+              }
+            };
+        xhr.onerror = () => fireError(0, 'XHR network error');
+        xhr.ontimeout = () => fireTimeout();
+        xhr.timeout = self._timeout;
+          // hls.js requests ArrayBuffer for segments; manifests are decoded above.
+        xhr.responseType = 'arraybuffer';
+        xhr.send();
+        }
+};
+
+HlsLoader.prototype.destroy = function () { this.abort(); };
+HlsLoader.canSupportLoader = function () { return true; };
+
+ // === Service-worker proxy helper (CDN-agnostic) ===
+ // Proxies a video URL through the service worker (no CORS restrictions). The
+ // SW forces the correct provider-origin Referer for the host (captured by the
+ // background worker), so a referer-protecting CDN accepts the request.
+ // Returns an ArrayBuffer of the response content.
+ async function proxyFetch(url, referer) {
+  try {
+    const resp = await chrome.runtime.sendMessage({ type: 'GOON_PROXY_FETCH', url, referer });
+    if (resp && resp.data && resp.ok) {
+        // Decode base64 → ArrayBuffer
+      const binary = atob(resp.data);
+      const bytes = new Uint8Array(binary.length);
+      for (let i = 0; i < binary.length; i++) {
+        bytes[i] = binary.charCodeAt(i);
+       }
+      return bytes.buffer;
+      }
+    return null;
+    } catch(e) {
+    console.warn('[vidplex-viewer] proxyFetch failed for:', url.substring(0, 120), e && e.message ? e.message : e);
+    return null;
+    }
+ }
+
+ // CDN hosts that block extension-origin requests are learned by a CORS probe
+ // at viewer startup (hosts that fail the probe are recorded), then stored in
+ // chrome.storage.local. The proxy is used only for those hosts, so we never
+ // hardcode a particular CDN.
+ const PROXY_HOSTS_KEY = 'goon_proxy_hosts';
+ const proxyHosts = new Set();
+ // Provider referers bound to a stored entry at scan time, keyed by the entry's
+ // manifest registrable domain. A single provider referer covers every edge
+ // subdomain, so a segment on a sibling subhost resolves to the same referer.
+ const refererByDomain = new Map();
+ (async () => {
+   try {
+     const stored = await chrome.storage.local.get(PROXY_HOSTS_KEY);
+     const hosts = stored[PROXY_HOSTS_KEY];
+     if (Array.isArray(hosts)) for (const h of hosts) proxyHosts.add(registrableDomainOf(String(h).toLowerCase()));
+    } catch { /* ignore */ }
+   })();
+
+ // Registrable domain of a CDN host — the label a single provider referer
+ // applies to (a referer-protecting CDN serves from many edge subdomains that
+ // share one referer). Last-two-labels heuristic; mirrors the SW's copy.
+ function registrableDomainOf(host) {
+   if (!host) return '';
+   const parts = host.split('.');
+   if (parts.length < 2) return host;
+   return parts.slice(-2).join('.');
+ }
+
+ // The provider referer to send for a proxied request: the referer bound to the
+ // entry at scan time (domain-keyed), or '' when none was captured. No self-origin
+ // fallback — a self-origin referer is guaranteed-wrong for hotlink protection.
+ function refererForUrl(url) {
+   const ref = refererByDomain.get(registrableDomainOf(hostOfUrl(url)));
+   return ref || '';
+ }
+
+ // Whether a given video URL should be proxied: its host is a known
+ // referer-protected CDN host.
+ function needsProxy(url) {
+   if (!url || typeof url !== 'string') return false;
+   const host = hostOfUrl(url);
+   return host ? proxyHosts.has(registrableDomainOf(host)) : false;
+ }
+
+ // host of a URL (lowercased); '' when malformed.
+ function hostOfUrl(url) {
+   try { return new URL(url).host.toLowerCase(); } catch { return ''; }
+ }
+
+ // Whether any of the given URLs needs proxying.
+ function urlsNeedProxy(urls) {
+   return urls.some(u => needsProxy(u));
+ }
+ 
+ /** Check whether fetching a URL from the extension page works (CORS test). */
+ async function corsCheck(url) {
+  try {
+    const resp = await fetch(url, { method: 'HEAD', mode: 'cors' });
+    return resp.ok;
+   } catch {
+    return false;
+   }
+ }
+
 /** Track all Hls instances so we can destroy them on unload. */
 const hlsInstances = new Map();
 
@@ -474,14 +744,14 @@ function wireHlsEvents(hls, video, panel) {
     state.fpsDropCount++;
     state.lastEvent = 'FPS_DROP';
     state.lastActivity = Date.now();
-    console.warn(`[goon-viewer] FPS drop: current=${data.currentFPS}, threshold=${data.thresholdFPS}`);
+    console.warn(`[vidplex-viewer] FPS drop: current=${data.currentFPS}, threshold=${data.thresholdFPS}`);
     renderPanelState(video, panel);
   });
 
   hls.on(HlsEvents.FPS_MAX_LEVEL_DROP, (_ev, data) => {
     state.lastEvent = 'FPS_MAX_LEVEL_DROP';
     state.lastActivity = Date.now();
-    console.warn(`[goon-viewer] Max level dropped due to FPS: ${data.currentLevel}`);
+    console.warn(`[vidplex-viewer] Max level dropped due to FPS: ${data.currentLevel}`);
     renderPanelState(video, panel);
   });
 
@@ -520,9 +790,21 @@ function wireHlsEvents(hls, video, panel) {
       state.segmentsFailed++;
       state.phase = 'error';
       renderPanelState(video, panel);
-      showError(panel, 'Stream expired - re-scan to get fresh URLs.');
       hls.destroy();
       hlsInstances.delete(video);
+        // A fatal network error on a token-protected stream is almost always an
+        // expired auth token. The live source tab keeps rotating tokens, so pull a
+        // fresh manifest from it and retry — capped at a few attempts per panel so a
+        // tab with no live source doesn't loop forever.
+      if ((video.dataset.hlsRescans || '0') | 0 < 3) {
+        video.dataset.hlsRescans = ((video.dataset.hlsRescans || '0') | 0) + 1;
+        console.log('[vidplex-viewer] fatal NETWORK_ERROR → auto-rescan attempt #' + video.dataset.hlsRescans);
+        showError(panel, 'Refreshing stream…');
+        rescanAndRetry(video, panel, video.dataset.hlsManifest || '');
+       } else {
+        showError(panel, 'Stream expired - re-scan to get fresh URLs.');
+        video.dataset.hlsRescans = '0';
+       }
       } else if (data.type === window.Hls.ErrorTypes.MEDIA_ERROR) {
       state.errorMessage = `Media: ${data.details}`;
       state.phase = 'buffering';
@@ -654,12 +936,20 @@ function destroyHls(video) {
 
  /** Show an error message inside a panel's video placeholder. */
  function showError(panel, message) {
+   removeErrorOverlay(panel);
    const err = document.createElement('div');
+   err.className = 'goon-error-overlay';
    err.style.cssText = 'position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#f87171;background:rgba(0,0,0,0.6);font-family:sans-serif;font-size:13px;text-align:center;padding:12px;';
    err.textContent = message;
    panel.appendChild(err);
  }
 
+ /** Remove the error overlay from a panel (used before a retry re-plays). */
+ function removeErrorOverlay(panel) {
+   const existing = panel.querySelectorAll('.goon-error-overlay');
+   for (const el of existing) el.remove();
+ }
+
 /** Create a video element with standard autoplay attributes. */
 function createVideoElement() {
   const video = document.createElement('video');
@@ -682,9 +972,26 @@ function playHls(video, manifestUrl, panel) {
     return;
   }
 
+   // Check whether this manifest URL needs proxying (a referer-protected host
+   // without CORS headers blocks extension-origin requests from the viewer page).
+   const needProxy = needsProxy(manifestUrl);
+   if (needProxy) {
+     console.log('[vidplex-viewer] Manifest needs proxying via service worker');
+    }
+
   destroyHls(video);
 
-  const hls = new window.Hls(HLS_CONFIG);
+  const config = Object.assign({}, HLS_CONFIG);
+
+  if (needProxy) {
+    // Override hls.js's default XHRLoader with our custom proxy loader.
+    // Must NOT use DefaultConfig.loader || HlsLoader — the XHRLoader is always truthy,
+    // so that would never apply HlsLoader. Set it directly on config (hls.js uses
+    // the instance config, not DefaultConfig, when present).
+    config.loader = HlsLoader;
+  }
+
+  const hls = new window.Hls(config);
   hlsInstances.set(video, hls);
 
   hls.on(window.Hls.Events.MANIFEST_PARSED, () => {
@@ -709,30 +1016,96 @@ function playHls(video, manifestUrl, panel) {
     origDestroy();
   };
 
+   // Log the manifest URL being loaded for debugging (helps diagnose playback failures).
+  console.log(`[vidplex-viewer] Loading HLS manifest:`, manifestUrl.substring(0, 200));
+
+     // Remember the manifest actually loaded so a later auto-rescan can retry from
+     // the freshest token on the same video (the service worker keys off the path).
+   video.dataset.hlsManifest = manifestUrl;
+
   hls.loadSource(manifestUrl);
   hls.attachMedia(video);
 }
 
 /**
- * Load hls.js from the extension bundle. Returns a Promise that resolves when ready.
- * We load from chrome.runtime.getURL() (extension origin) instead of a CDN to
- * avoid CSP blocks — sites like Pornhub restrict script-src to 'self', which
- * would block any cross-origin <script src> injection in the viewer window.
+ * Load hlds.js (renamed from hls.js) from the extension bundle. Returns a Promise that resolves when ready.
+ * Strategy: <script src="chrome-extension://.../hlds.js"> — esbuild minification is disabled so the
+ * original ES5 UMD bundle preserves function expressions (no arrow functions), avoiding Chrome's
+ * content-based ESM auto-detection that prevents window.Hls from registering globally.
  */
 function loadHlsJs() {
-  return new Promise((resolve, reject) => {
-    if (window.Hls && window.Hls.isSupported) {
-      resolve();
-      return;
+  if (window.Hls && typeof window.Hls.isSupported === 'function') {
+    return Promise.resolve();
   }
+
+  const hldsSrc = chrome.runtime.getURL('hlds.js');
+  console.log('[vidplex-viewer] Trying script src:', hldsSrc);
+
+  return new Promise((resolve, reject) => {
     const script = document.createElement('script');
-    script.src = chrome.runtime.getURL('hls.min.js');
-    script.onload = () => resolve();
-    script.onerror = () => reject(new Error('Hls.js bundle unavailable - rebuild the extension.'));
+    script.src = hldsSrc;
+    script.onload = () => {
+      if (window.Hls && typeof window.Hls.isSupported === 'function') {
+        console.log('[vidplex-viewer] hlds.js via script src OK, Hls.isSupported:', window.Hls.isSupported());
+        resolve();
+      } else {
+        reject(new Error('hlds.js loaded but did not register global Hls'));
+      }
+    };
+    script.onerror = () => {
+      reject(new Error('hlds.js failed to load: resource not found or CSP blocked'));
+    };
      document.head.appendChild(script);
     });
 }
 
+  /* ======================================================================== */
+  /* Fresh-token resolution — replace expired/revoked token URLs                */
+  /* ======================================================================== */
+
+  /**
+   * Ask the service worker for the freshest live manifest for the video encoded
+   * in `storedUrl`. The live source tab keeps rotating short-lived auth tokens
+   * (a stored one may already be 410 Gone), so the freshest captured manifest —
+   * identified by matching the video's group key in the path — is the one that
+   * will actually validate. Resolves to the new URL, or null when the tab
+   * captured nothing (or the caller can't reach the SW).
+   */
+   async function resolveFreshManifest(storedUrl) {
+    if (!storedUrl || !needsProxy(storedUrl)) return null;
+    try {
+     const resp = await chrome.runtime.sendMessage({ type: 'GOON_RESOLVE_MANIFEST', url: storedUrl });
+     if (resp && resp.ok && resp.changed && resp.fresh) {
+      console.log('[vidplex-viewer] resolved fresh manifest for', (resp.groupKey || '?'),
+          '→', (resp.fresh || '').substring(0, 100));
+      return resp.fresh;
+        }
+      } catch (e) {
+     console.warn('[vidplex-viewer] resolveFreshManifest failed:', e && e.message ? e.message : e);
+       }
+   return null;
+    }
+
+ /**
+  * Re-attempt playback on `video` after its stored manifest died (fatal
+  * network error). Pulls a fresh manifest from the live tab's rotating token
+  * stream and, if one is found, replays it. No-op (and false) when the tab has
+  * captured nothing usable yet — the user must let the source tab load a bit
+  * longer, then re-open.
+  */
+ async function rescanAndRetry(video, panel, originalUrl) {
+   const fresh = await resolveFreshManifest(originalUrl);
+   if (!fresh) {
+    showError(panel, 'Stream expired & no live source — reload the source tab, then re-open viewer.');
+    console.warn('[vidplex-viewer] rescan gave up: no fresh manifest for', (originalUrl || '').substring(0, 100));
+    return false;
+    }
+   if (panel) removeErrorOverlay(panel);
+   console.log('[vidplex-viewer] retrying with fresh manifest:', fresh.substring(0, 120));
+   playHls(video, fresh, panel);
+   return true;
+ }
+
  /**
   * Create a single panel (video or empty).
  * Returns { panel, hlsEntry } — hlsEntry is set for deferred HLS playback.
@@ -774,7 +1147,7 @@ function createPanel(entry, tag) {
     }
     // mediaType says HLS but we have no manifest URL — fall through to native playback.
     // On Safari this may still work for .m3u8; on Chrome it will fail.
-    console.warn('[goon-viewer] HLS entry missing manifest URL, src:', src);
+    console.warn('[vidplex-viewer] HLS entry missing manifest URL, src:', src);
   }
 
   video.src = src;
@@ -807,6 +1180,53 @@ async function init() {
   overlay.style.cssText = 'position:absolute;top:0;left:0;right:0;background:rgba(0,0,0,0.85);color:#fff;padding:8px 16px;font-family:sans-serif;font-size:14px;z-index:999;';
   document.body.style.position = 'relative';
   document.body.insertBefore(overlay, document.body.firstChild);
+
+  // === DIAGNOSTIC: Check storage + CORS ===
+  console.log('[vidplex-viewer] Viewer ID:', id, 'Grid:', gridN + 'x' + gridN);
+  console.log('[vidplex-viewer] Raw stored data:', JSON.stringify(videoUrls));
+
+  if (videoUrls.length > 0) {
+    for (const entry of videoUrls) {
+      const src = (entry.src || '').substring(0, 120);
+      console.log('[vidplex-viewer] Entry:', {
+        src: src,
+        mediaType: entry.mediaType,
+        hlsManifest: (entry.hlsManifest || '').substring(0, 120),
+        poster: (entry.poster || '').substring(0, 80),
+      });
+    }
+
+      // Probe CORS on each video URL. Hosts that block extension-origin
+      // requests are learned as referer-protected and persisted so the viewer
+      // routes them through the service-worker proxy.
+     // Bind each entry's scan-time referer to its manifest's registrable
+     // domain, so the proxy sends it for every edge subdomain the provider
+     // serves from (segments often resolve to a sibling subhost).
+     for (const entry of videoUrls) {
+       const ref = entry && entry.referer;
+       if (!ref) continue;
+       const dom = registrableDomainOf(hostOfUrl(entry.src || entry.hlsManifest || ''));
+       if (dom) refererByDomain.set(dom, ref);
+       }
+     const urlsToTest = videoUrls.map(v => v.src || v.hlsManifest || 'none').filter(u => u !== 'none' && typeof u === 'string');
+     const blockedHosts = new Set();
+     for (const url of [...new Set(urlsToTest)]) {
+       const corsOk = await corsCheck(url);
+       if (!corsOk) blockedHosts.add(registrableDomainOf(hostOfUrl(url)));
+        console.log('[vidplex-viewer] CORS', corsOk ? 'OK' : 'BLOCKED:', url.substring(0, 120));
+        }
+     if (blockedHosts.size > 0) {
+      for (const h of blockedHosts) if (h) proxyHosts.add(h);
+      try { await chrome.storage.local.set({ [PROXY_HOSTS_KEY]: [...proxyHosts] }); } catch { /* ignore */ }
+        }
+
+        // Report whether any URL needs proxying (referer-protected host).
+     const anyNeedsProxy = urlsNeedProxy(urlsToTest);
+     console.log('[vidplex-viewer] Proxy required:', anyNeedsProxy);
+  } else {
+    console.warn('[vidplex-viewer] No video entries in storage for ID:', id, '— data may have been cleared or never saved');
+  }
+
   overlay.textContent = `Found ${videoUrls.length} video URL(s) in ${gridN}x${gridN} grid`;
   statusElRef = overlay;
 
@@ -833,8 +1253,17 @@ async function init() {
        }
       return;
      }
-    for (const { video, manifest, panel } of hlsEntries) {
-      playHls(video, manifest, panel);
+          // Before playback, swap each referer-protected manifest for the freshest
+          // live one the source tab has captured (a stored token may already be 410
+          // Gone). Non-protected manifests are left untouched.
+      for (const { video, manifest } of hlsEntries) {
+       if (needsProxy(manifest)) {
+         const fresh = await resolveFreshManifest(manifest);
+         if (fresh) video.dataset.hlsManifest = fresh;
+           }
+       }
+     for (const { video, panel } of hlsEntries) {
+      playHls(video, video.dataset.hlsManifest, panel);
        }
     }
 }

vite.config.ts

@@ -8,8 +8,8 @@
  */
 import { defineConfig } from 'vite';
 import { resolve } from 'path';
-import { copyFileSync, mkdirSync, writeFileSync } from 'fs';
 import sharp from 'sharp';
+import { copyFileSync, mkdirSync, writeFileSync } from 'fs';
 
 export default defineConfig({
   root: 'src',
@@ -51,10 +51,8 @@ export default defineConfig({
   build: {
     target: 'chrome110',
     outDir: '../dist',
-    emptyOutDir: true,
-    modulePreload: {
-      polyfill: false,
-    },
+    emptyOutdir: true,
+    minify: false,
     rollupOptions: {
       input: {
         background: resolve(__dirname, 'src/background/background.js'),
@@ -62,7 +60,9 @@ export default defineConfig({
         viewer: resolve(__dirname, 'src/viewer/viewer.html'),
         viewerIndex: resolve(__dirname, 'src/viewer/index.html'),
         interceptors: resolve(__dirname, 'src/inject/interceptors.js'),
-        hls: resolve(__dirname, 'src/inject/hls.min.js'),
+        // NOTE: hlds is NOT built by Vite — copied from source as pure ES5 to avoid
+        // esbuild injecting arrow functions (Chrome flags these as "ES module content"
+        // in extension URLs, preventing window.Hls registration).
       },
       output: {
         entryFileNames: '[name].js',
@@ -70,5 +70,8 @@ export default defineConfig({
         assetFileNames: '[name][extname]',
       },
     },
+    modulePreload: {
+      polyfill: false,
+    },
   },
 });