feat: add HLS deep-probe scanning with refactored pipeline and cleanup

- Deep-probe HLS manifests via known player globals, inline scripts, config objects
- Scan main frame only (no nested iframes); pick largest visible video per tab
- Store mediaType/hlsManifest metadata through the pipeline
- CSP-safe interceptor injection via script.src (not inline textContent)
- Remove probeFn/scrapeFn from Vite build entries (non-existent files)
- Refactor: extract m3u8DeepProbeFn, scrapeFn, scanVideos, storeVideos,
  makeVideoEntry, filterValidTabs, probeHlsManifests, dedupManifests, scrapeTab
  to module-level functions (no inline closures recreated on every click)
- Clean up viewer.js: extract createVideoElement(), createPanel(),
  consolidate HLS_CONFIG, remove console.log noise
- Add DEBUG flag to gate console output in popup
- Unify url/src fields — prefer 'src' everywhere
- Remove dead code in renderList and setTimeout(100) hack

.eslintignore

@@ -0,0 +1 @@
+dist/

src/content/content.js

@@ -24,123 +24,18 @@
 
   /**
    * Inject interceptors into the MAIN world at document_start.
-   * Runs BEFORE any page JS, so we catch all HLS activity.
+   *
+   * Uses script.src = chrome.runtime.getURL('interceptors.js') instead of
+   * script.textContent to bypass strict page CSP. Sites like Pornhub 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.
+   *
+   * Runs BEFORE any page JS (document_start), so we catch all HLS activity.
    */
   function injectInterceptors() {
-    const interceptCode = `
-      (function() {
-        if (window.__goon_plugin_intercepted) return;
-        window.__goon_plugin_intercepted = true;
-
-        window.__goon_plugin_data = window.__goon_plugin_data || {
-          manifests: [],
-          sources: []
-        };
-
-        // Helper: resolve relative URLs
-        function resolveUrl(url) {
-          if (!url) return null;
-          try {
-            if (url.startsWith('//')) return 'https:' + url;
-            if (url.startsWith('http')) return url;
-            return new URL(url, window.location.origin).href;
-          } catch { return null; }
-        }
-
-        // Helper: report manifest to content script via postMessage
-        function reportManifest(url, source) {
-          var resolved = resolveUrl(url);
-          if (!resolved) return;
-          if (window.__goon_plugin_data.manifests.includes(resolved)) return;
-          window.__goon_plugin_data.manifests.push(resolved);
-
-          window.postMessage({
-            type: 'GOON_PLUGIN_HLS_INTERCEPT',
-            url: resolved,
-            source: source,
-            timestamp: Date.now()
-          }, '*');
-        }
-
-        // === INTERCEPTORS ===
-
-        // 1. Intercept XMLHttpRequest for manifest-like requests
-        var originalOpen = XMLHttpRequest.prototype.open;
-        var originalSend = XMLHttpRequest.prototype.send;
-        XMLHttpRequest.prototype.open = function(method, url) {
-          this._goon_url = url;
-          return originalOpen.apply(this, arguments);
-        };
-        XMLHttpRequest.prototype.send = function(body) {
-          if (this._goon_url && typeof this._goon_url === 'string') {
-            var resolved = resolveUrl(this._goon_url);
-            if (resolved && (resolved.includes('.m3u8') ||
-                             resolved.includes('/playlist') ||
-                             resolved.includes('/manifest'))) {
-              reportManifest(resolved, 'xhr');
-            }
-          }
-          return originalSend.apply(this, arguments);
-        };
-
-        // 2. Intercept fetch() for manifest-like requests
-        var originalFetch = window.fetch;
-        window.fetch = function(resource, init) {
-          var url = typeof resource === 'string' ? resource : (resource && resource.url);
-          if (url && typeof url === 'string') {
-            var resolved = resolveUrl(url);
-            if (resolved && (resolved.includes('.m3u8') ||
-                             resolved.includes('/playlist') ||
-                             resolved.includes('/manifest'))) {
-              reportManifest(resolved, 'fetch');
-            }
-          }
-          return originalFetch.apply(this, arguments);
-        };
-
-        // 3. Intercept HLS.js loadSource (catches HLS.js instances)
-        function patchHlsPrototype() {
-          if (typeof Hls === 'undefined') return;
-          var originalLoadSource = Hls.prototype.loadSource;
-          if (!originalLoadSource) return;
-
-          Hls.prototype.loadSource = function(url) {
-            reportManifest(url, 'hls_loadSource');
-            return originalLoadSource.apply(this, arguments);
-          };
-
-          var originalAttachMedia = Hls.prototype.attachMedia;
-          if (originalAttachMedia) {
-            Hls.prototype.attachMedia = function(media) {
-              if (media && media.tagName === 'VIDEO') {
-                media._goon_hls_manifest = this.url;
-                reportManifest(this.url, 'hls_attachMedia');
-              }
-              return originalAttachMedia.apply(this, arguments);
-            };
-          }
-        }
-
-        // Patch immediately if HLS is already defined
-        patchHlsPrototype();
-
-        // Watch for HLS.js to be dynamically defined later
-        var originalDefineProperty = Object.defineProperty;
-        var hlsPatched = false;
-        Object.defineProperty = function(obj, prop, descriptor) {
-          var result = originalDefineProperty.apply(this, arguments);
-          if (obj === window && prop === 'Hls' && !hlsPatched) {
-            hlsPatched = true;
-            patchHlsPrototype();
-          }
-          return result;
-        };
-
-      })();
-    `;
-
     const script = document.createElement('script');
-    script.textContent = interceptCode;
+    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

src/inject/interceptors.js

@@ -0,0 +1,134 @@
+/**
+ * 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.
+ *
+ * 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
+ * page's script-src CSP does not apply.
+ *
+ * Loaded by content.js at document_start before any page JS runs.
+ */
+
+(function () {
+  'use strict';
+
+  if (window.__goon_plugin_intercepted) return;
+  window.__goon_plugin_intercepted = true;
+
+  window.__goon_plugin_data = window.__goon_plugin_data || {
+    manifests: [],
+    sources: [],
+  };
+
+  // Helper: resolve relative URLs
+  function resolveUrl(url) {
+    if (!url) return null;
+    try {
+      if (url.startsWith('//')) return 'https:' + url;
+      if (url.startsWith('http')) return url;
+      return new URL(url, window.location.origin).href;
+    } catch {
+      return null;
+    }
+  }
+
+  // Helper: report manifest to content script via postMessage
+  function reportManifest(url, source) {
+    var resolved = resolveUrl(url);
+    if (!resolved) return;
+    if (window.__goon_plugin_data.manifests.includes(resolved)) return;
+    window.__goon_plugin_data.manifests.push(resolved);
+
+    window.postMessage(
+      {
+        type: 'GOON_PLUGIN_HLS_INTERCEPT',
+        url: resolved,
+        source: source,
+        timestamp: Date.now(),
+      },
+      '*',
+    );
+  }
+
+  // === INTERCEPTORS ===
+
+  // 1. Intercept XMLHttpRequest for manifest-like requests
+  var originalOpen = XMLHttpRequest.prototype.open;
+  var originalSend = XMLHttpRequest.prototype.send;
+  XMLHttpRequest.prototype.open = function (method, url) {
+    this._goon_url = url;
+    return originalOpen.apply(this, arguments);
+  };
+  XMLHttpRequest.prototype.send = function (body) {
+    if (this._goon_url && typeof this._goon_url === 'string') {
+      var resolved = resolveUrl(this._goon_url);
+      if (
+        resolved &&
+        (resolved.includes('.m3u8') ||
+          resolved.includes('/playlist') ||
+          resolved.includes('/manifest'))
+      ) {
+        reportManifest(resolved, 'xhr');
+      }
+    }
+    return originalSend.apply(this, arguments);
+  };
+
+  // 2. Intercept fetch() for manifest-like requests
+  var originalFetch = window.fetch;
+  window.fetch = function (resource, init) {
+    var url = typeof resource === 'string' ? resource : resource && resource.url;
+    if (url && typeof url === 'string') {
+      var resolved = resolveUrl(url);
+      if (
+        resolved &&
+        (resolved.includes('.m3u8') ||
+          resolved.includes('/playlist') ||
+          resolved.includes('/manifest'))
+      ) {
+        reportManifest(resolved, 'fetch');
+      }
+    }
+    return originalFetch.apply(this, arguments);
+  };
+
+  // 3. Intercept HLS.js loadSource (catches HLS.js instances)
+  function patchHlsPrototype() {
+    if (typeof Hls === 'undefined') return;
+    var originalLoadSource = Hls.prototype.loadSource;
+    if (!originalLoadSource) return;
+
+    Hls.prototype.loadSource = function (url) {
+      reportManifest(url, 'hls_loadSource');
+      return originalLoadSource.apply(this, arguments);
+    };
+
+    var originalAttachMedia = Hls.prototype.attachMedia;
+    if (originalAttachMedia) {
+      Hls.prototype.attachMedia = function (media) {
+        if (media && media.tagName === 'VIDEO') {
+          media._goon_hls_manifest = this.url;
+          reportManifest(this.url, 'hls_attachMedia');
+        }
+        return originalAttachMedia.apply(this, arguments);
+      };
+    }
+  }
+
+  // Patch immediately if HLS is already defined
+  patchHlsPrototype();
+
+  // Watch for HLS.js to be dynamically defined later
+  var originalDefineProperty = Object.defineProperty;
+  var hlsPatched = false;
+  Object.defineProperty = function (obj, prop, descriptor) {
+    var result = originalDefineProperty.apply(this, arguments);
+    if (obj === window && prop === 'Hls' && !hlsPatched) {
+      hlsPatched = true;
+      patchHlsPrototype();
+    }
+    return result;
+  };
+})();

src/viewer/index.js

@@ -1,16 +1,19 @@
 /**
- * index.js — Popup logic for the Goon Plugin.
+ * index.js - Popup logic for the Goon Plugin.
- * Runs inside the popup; scans all tabs for videos and opens the viewer.
+ * Runs inside the popup; scans the current window's tabs for videos
- *
+ * and stores the results for the viewer to consume.
- * Video detection strategy (per tab):
- *   1. executeScript in main world: deeply query HLS player state for manifests
- *   2. chrome.tabs.sendMessage to content script: get intercepted manifests + poster
- *   3. executeScript DOM scan: fallback to <video> element attributes
  */
 
 const STORAGE_KEY = 'goon_videos';
 const TAGGED_KEY = 'goon_tagged';
 
+// Set to true to enable verbose console output in the popup.
+const DEBUG = false;
+
+function log(...args) { if (DEBUG) console.log('[goon]', ...args); }
+function warn(...args) { if (DEBUG) console.warn('[goon]', ...args); }
+
+// UI references
 const findBtn = document.getElementById('find-btn');
 const clearBtn = document.getElementById('clear-btn');
 const openBtn = document.getElementById('open-btn');
@@ -21,45 +24,47 @@ const btnRow = document.getElementById('btn-row');
 listEl.style.wordBreak = 'break-word';
 listEl.style.whiteSpace = 'pre-wrap';
 
+/* ======================================================================== */
+/* UI helpers                                                               */
+/* ======================================================================== */
+
 function setStatus(msg) {
   statusEl.textContent = msg;
-  console.log('[goon]', msg);
+  log(msg);
 }
 
 /** Load the current video list and tags from storage. */
 function loadVideos() {
   return chrome.storage.local.get([STORAGE_KEY, TAGGED_KEY]).then(data => ({
-    urls: data[STORAGE_KEY] || [],
+    videos: data[STORAGE_KEY] || [],
     tags: data[TAGGED_KEY] || [],
   }));
 }
 
-/** Render the video list UI from stored {url, label} objects. */
+/** Render the video list UI from stored video entries. */
-function renderList(items) {
+function renderList(videos) {
   listEl.innerHTML = '';
-  if (!items || items.length === 0) {
+  if (!videos || videos.length === 0) {
     listEl.style.display = 'none';
     return;
   }
   listEl.style.display = 'block';
 
-  for (const item of items) {
+  for (const video of videos) {
     const link = document.createElement('a');
     link.className = 'video-item';
-    let url = item.url;
+    link.href = video.src || video.url || '';
-    if (typeof url === 'string' && item.src) url = item.src;
+    link.textContent = video.label ? `${video.label}: ${link.href}` : link.href;
-    if (typeof url === 'object' && url.src) url = url.src;
-    link.href = url;
-    link.textContent = item.label ? `${item.label}: ${url}` : url;
     link.target = '_blank';
     listEl.appendChild(link);
   }
 
+  // Copy all URLs button
   const copyBtn = document.createElement('button');
   copyBtn.className = 'copy-btn';
   copyBtn.textContent = 'Copy All URLs';
   copyBtn.addEventListener('click', () => {
-    const urls = items.map(v => (typeof v === 'object' && v.src) ? v.src : (typeof v === 'object' ? v.url : v));
+    const urls = videos.map(v => v.src || v.url);
     navigator.clipboard.writeText(urls.join('\n')).then(() => {
       copyBtn.textContent = 'Copied!';
       setTimeout(() => { copyBtn.textContent = 'Copy All URLs'; }, 1500);
@@ -68,482 +73,369 @@ function renderList(items) {
   listEl.appendChild(copyBtn);
 }
 
-/** Show the main button row. */
+/** Show the main button row and render saved videos. */
 function showActions() {
   btnRow.style.display = 'flex';
-  loadVideos().then(({ urls, tags }) => {
+  loadVideos().then(({ videos, tags }) => {
-    if (urls.length > 0) {
+    if (videos.length > 0) {
-      const items = urls.map((url, i) => {
+      const items = videos.map((video, i) => ({
-        const entry = { url: url.src || url, label: tags[i] };
+        src: video.src || video.url || '',
-        if (typeof url === 'object' && url.src) entry.src = url.src;
+        label: tags[i],
-        return entry;
+      }));
-      });
       renderList(items);
-      setStatus(`Using ${urls.length} video(s) from last search.`);
+      setStatus(`Using ${videos.length} video(s) from last search.`);
     } else {
       setStatus('');
     }
   });
 }
 
-/* ====================================================================
+/* ======================================================================== */
- * HLS DATA STRUCTURE QUERY — runs in the MAIN world via executeScript
+/* HLS deep probe - runs in target page context via executeScript           */
- *
+/* ======================================================================== */
- * This is the primary detection strategy. We deeply probe the page's
- * JavaScript state for HLS player instances, config objects, and
- * playlist URLs. Works regardless of whether the page uses HLS.js,
- * video.js, DASH.js, FLV.js, or a custom player.
- * ==================================================================== */
 
-const hlsQueryFn = function () {
+/**
-  // Resolve relative URLs
+ * Deep probe a page for HLS manifest URLs.
-  function resolveUrl(url) {
+ * Walks known player objects, video elements, inline scripts, and config globals.
-    if (!url) return null;
+ * Returns an array of { url, player } objects.
-    try {
+ */
-      if (url.startsWith('//')) return 'https:' + url;
+function m3u8DeepProbeFn() {
-      if (url.startsWith('http')) return url;
-      return new URL(url, window.location.origin).href;
-    } catch (e) { return null; }
-  }
-
-  function isManifestUrl(url) {
-    if (!url || typeof url !== 'string') return false;
-    return url.includes('.m3u8') ||
-           url.includes('/playlist') ||
-           url.includes('/manifest') ||
-           url.includes('.mpd');
-  }
-
-  // Collect unique manifest URLs
   const manifests = [];
-  const manifestSet = new Set();
+  const seen = new Set();
 
-  function addManifest(url) {
+  function walk(obj, path, depth) {
-    const resolved = resolveUrl(url);
+    if (!obj || typeof obj !== 'object' || depth > 5) return;
-    if (resolved && !manifestSet.has(resolved)) {
+    if (typeof obj === 'string') {
-      manifestSet.add(resolved);
+      const match = obj.match(/https?:\/\/[^"'\s`)]+\.m3u8[^"'\s`)]*/gi);
-      manifests.push(resolved);
+      if (match) {
+        for (const u of match) {
+          if (!seen.has(u)) { seen.add(u); manifests.push({ url: u, player: path }); }
+        }
+      }
+      return;
+    }
+    for (const k of Object.keys(obj)) {
+      walk(obj[k], `${path}.${k}`, depth + 1);
     }
   }
 
-  // --- STRATEGY 1: Probe video elements for HLS player instances ---
+  // Strategy A: Known player globals (shallow + deep)
-  try {
+  const playerGlobals = [
-    const videos = document.querySelectorAll('video');
+    'hls', 'Hls', 'videojs', 'Video', 'flowplayer', 'jwplayer',
-    const hlsProps = [
+    '__hls', '__hls_player', 'player', 'videoPlayer', 'mainPlayer',
-      'hls', 'hlsInstance', '_hls', '__hls', 'player', '_player',
+    'fhplayer', '__pj', 'playerInstance',
-      'videoPlayer', '_videoPlayer', 'mediaPlayer', '_mediaPlayer',
+    'PHPlayer', 'fh', '__phPlayer', '__ph', 'phPlayer', 'phPlayerInstance',
-      'flvjsPlayer', '_flvjsPlayer', 'dashPlayer', '_dashPlayer',
-      '__hlsPlayer', '__player', '__videoPlayer', 'phPlayer',
-      '_phPlayer', 'phVideoPlayer', '_phVideoPlayer'
   ];
-
+  for (const name of playerGlobals) {
-    for (const video of videos) {
+    const obj = window[name];
-      for (const prop of hlsProps) {
+    if (!obj || typeof obj === 'function') continue;
-        const instance = video[prop];
+    for (const key of ['url', '_url', 'src', 'manifestUrl', 'hlsUrl', 'playlistUrl']) {
-        if (!instance || typeof instance !== 'object') continue;
+      if (typeof obj[key] === 'string' && obj[key].includes('.m3u8')) {
-
+        if (!seen.has(obj[key])) { seen.add(obj[key]); manifests.push({ url: obj[key], player: `${name}.${key}` }); }
-        // HLS.js: .url, .opts.url, ._stream.url
-        if (instance.url) addManifest(instance.url);
-        if (instance.opts && instance.opts.url) addManifest(instance.opts.url);
-        if (instance._stream && instance._stream.url) addManifest(instance._stream.url);
-
-        // HLS.js levels (quality variants)
-        if (instance.levels) {
-          for (const level of instance.levels) {
-            if (level.uri) addManifest(level.uri);
-            if (level._uri) addManifest(level._uri);
       }
     }
+    walk(obj, name, 0);
+  }
 
-        // video.js: .currentSource_.src or .src_
+  // Strategy B: Video element HLS instances
-        if (instance.currentSource_ && instance.currentSource_.src) addManifest(instance.currentSource_.src);
+  for (const v of document.querySelectorAll('video')) {
-        if (instance.src_) addManifest(instance.src_);
+    for (const key of Object.keys(v)) {
-
+      if (key.toLowerCase().includes('hls') || key === 'player') {
-        // Generic: .playlist, .source, .mediaUrl
+        const hlsObj = v[key];
-        if (instance.playlist) addManifest(instance.playlist);
+        if (hlsObj && typeof hlsObj === 'object') {
-        if (instance.source) addManifest(instance.source);
+          for (const subKey of Object.keys(hlsObj)) {
-        if (instance.mediaUrl) addManifest(instance.mediaUrl);
+            if (typeof hlsObj[subKey] === 'string' && hlsObj[subKey].includes('.m3u8')) {
+              if (!seen.has(hlsObj[subKey])) { seen.add(hlsObj[subKey]); manifests.push({ url: hlsObj[subKey], player: `video.${key}.${subKey}` }); }
             }
           }
-  } catch (e) { /* DOM access error */ }
+          walk(hlsObj, `video.${key}`, 0);
-
+        }
-  // --- STRATEGY 2: Probe window-level player variables ---
-  try {
-    const windowPlayerVars = [
-      'Hls', '_Hls', 'hls', 'FLV', 'flvjs', 'Video', 'Videojs',
-      'videojs', 'p7m', 'P7m', 'Player', 'player', '_player',
-      'PornhubPlayer', 'PHPlayer', '_PHPlayer', 'phVideoPlayer',
-      'phPlayer', '_phPlayer', 'videoPlayer', 'MediaPlayer',
-      'CustomPlayer', 'phVideo', 'ph_media', '_PH_VIDEO',
-      '_hls', '_dash', '_video', '__player', '__hls'
-    ];
-
-    // Deep-probe an object for manifest URLs (up to depth 3)
-    function deepProbe(obj, depth, seen) {
-      if (!obj || typeof obj !== 'object' || depth <= 0) return;
-      if (seen.has(obj)) return;
-      seen.add(obj);
-
-      for (const key of Object.keys(obj)) {
-        const val = obj[key];
-        if (typeof val === 'string' && isManifestUrl(val)) {
-          addManifest(val);
-        } else if (typeof val === 'object' && val !== null) {
-          deepProbe(val, depth - 1, seen);
       }
     }
   }
 
-    for (const varName of windowPlayerVars) {
+  // Strategy C: Inline scripts
-      const obj = window[varName];
+  for (const script of document.querySelectorAll('script:not([src])')) {
-      if (obj && typeof obj === 'object') {
-        deepProbe(obj, 3, new Set());
-
-        // Also check prototype chain
-        const proto = Object.getPrototypeOf(obj);
-        if (proto && proto !== Object.prototype) {
-          deepProbe(proto, 2, new Set());
-        }
-      }
-    }
-  } catch (e) { /* Ignore */ }
-
-  // --- STRATEGY 3: Probe intercepted data (from content script interceptors) ---
-  try {
-    if (window.__goon_plugin_data && window.__goon_plugin_data.manifests) {
-      for (const url of window.__goon_plugin_data.manifests) {
-        addManifest(url);
-      }
-    }
-  } catch (e) { /* Ignore */ }
-
-  // --- STRATEGY 4: Extract from inline scripts ---
-  try {
-    const scripts = document.querySelectorAll('script');
-    for (const script of scripts) {
     const text = script.textContent || '';
-      if (!text.includes('.m3u8') && !text.includes('manifest') &&
+    const matches = text.match(/https?:\/\/[^"'\s]+.(m3u8|hlsvod)[^"'\s]*/gi);
-          !text.includes('playlist') && !text.includes('/hls')) continue;
+    if (matches) {
-
+      for (const u of matches) {
-      // m3u8 URLs in quotes
+        if (!seen.has(u)) { seen.add(u); manifests.push({ url: u, player: 'inline-script' }); }
-      const m3u8Regex = /['"]([^'"]*\.m3u8[^'"]*)['"]/g;
+      }
-      let match;
+    }
-      while ((match = m3u8Regex.exec(text)) !== null) {
-        addManifest(match[1]);
   }
 
-      // CDN-style HLS URLs (Pornhub CDN patterns)
+  // Strategy D: Config globals
-      const cdnRegex = /['"]([^'"]*(?:phncdn|pornhub|porn\.com|pornhubpremium)[^'"]*(?:m3u8|playlist|manifest|\/hls\/)[^'"]*)['"]/g;
+  const configKeys = ['__dataLayer', '__INITIAL_STATE__', 'config', '__NEXT_DATA__', '__PRELOADED_STATE__', 'appData', 'pageData', '__data'];
-      while ((match = cdnRegex.exec(text)) !== null) {
+  for (const name of configKeys) {
-        addManifest(match[1]);
+    const obj = window[name];
+    if (obj && typeof obj === 'object') walk(obj, name, 0);
   }
 
-      // Generic manifest/playlist URLs
+  return manifests;
-      const genericRegex = /['"]([^'"]*(?:\/manifest\/|\/playlist\/|\/hls\/)[^'"]*)['"]/g;
+}
-      while ((match = genericRegex.exec(text)) !== null) {
-        addManifest(match[1]);
-      }
-    }
-  } catch (e) { /* Ignore */ }
 
-  // --- STRATEGY 5: Probe __dataLayer, __INITIAL_STATE__, and similar ---
+/* ======================================================================== */
-  try {
+/* Video scraper - runs in target page context via executeScript            */
-    const dataKeys = Object.keys(window).filter(k =>
+/* ======================================================================== */
-      k.startsWith('__') && k !== '__goon_plugin_data' &&
-      k !== '__goon_plugin_intercepted'
-    );
 
-    const maxProbe = Math.min(dataKeys.length, 15);
+/**
-    for (let i = 0; i < maxProbe; i++) {
+ * Scrape visible video elements from the main frame.
-      const key = dataKeys[i];
+ * Returns at most one video entry (the largest visible one).
-      const obj = window[key];
+ * @param {Array} hlsManifests - manifests found by the deep probe
-      if (!obj || typeof obj !== 'object') continue;
+ * @returns {{ videos: Array, videoCount: number, hlsManifest: string|null }}
+ */
+function scrapeFn(hlsManifests) {
+  const allVideos = Array.from(document.querySelectorAll('video'))
+    .filter(v => {
+      const style = window.getComputedStyle(v);
+      return style.display !== 'none' && v.clientWidth > 0 && v.clientHeight > 0;
+    })
+    .map(v => {
+      const area = v.clientWidth * v.clientHeight;
+      const rawSrc = v.currentSrc || v.src || '';
+      const poster = v.poster || v.getAttribute('data-poster') || null;
 
-      // Quick heuristic: only deep-probe if it looks media-related
+      let hlsManifest = null;
-      try {
+      let mediaType = 'video';
-        const peek = JSON.stringify(obj).substring(0, 300);
+      let src = rawSrc;
-        if (peek.includes('video') || peek.includes('m3u8') ||
-            peek.includes('stream') || peek.includes('playlist') ||
-            peek.includes('hls') || peek.includes('manifest') ||
-            peek.includes('phncdn') || peek.includes('pornhubpremium')) {
 
-          function deepProbeLimited(o, d) {
+      if (rawSrc.includes('.m3u8') && rawSrc.startsWith('http')) {
-            if (!o || typeof o !== 'object' || d <= 0) return;
+        hlsManifest = rawSrc;
-            for (const k of Object.keys(o)) {
+        mediaType = 'hls';
-              const v = o[k];
+      } else if (rawSrc.startsWith('http') && !rawSrc.startsWith('blob:')) {
-              if (typeof v === 'string' && isManifestUrl(v)) {
+        mediaType = 'video';
-                addManifest(v);
+      } else if (hlsManifests && hlsManifests.length > 0) {
-              } else if (typeof v === 'object' && v !== null) {
+        hlsManifest = hlsManifests[0].url || hlsManifests[0];
-                deepProbeLimited(v, d - 1);
+        mediaType = 'hls';
+        src = hlsManifest;
       }
-            }
-          }
-          deepProbeLimited(obj, 3);
-        }
-      } catch (e) { /* Ignore stringify errors */ }
-    }
-  } catch (e) { /* Ignore */ }
 
-  // --- STRATEGY 6: Query intercepted data from main world ---
+      return { src, poster, area, width: v.clientWidth, height: v.clientHeight, mediaType, hlsManifest };
-  try {
+    });
-    if (window.__goon_plugin_data && Array.isArray(window.__goon_plugin_data.manifests)) {
-      for (const m of window.__goon_plugin_data.manifests) {
-        addManifest(m);
-      }
-    }
-  } catch (e) {}
 
+  allVideos.sort((a, b) => b.area - a.area);
+
+  // Filter: only keep entries with a real playable source
+  const playable = allVideos.filter(v => {
+    const srcOk = v.src && (v.src.startsWith('http://') || v.src.startsWith('https://'));
+    const hlsOk = v.hlsManifest && (v.hlsManifest.startsWith('http://') || v.hlsManifest.startsWith('https://'));
+    return srcOk || hlsOk;
+  });
+
+  // Dedup: if multiple videos share the same HLS manifest, keep only the largest
+  const seen = new Map();
+  const unique = [];
+  for (const v of playable) {
+    const key = (v.hlsManifest || v.src || '') + '||' + (v.poster || '');
+    if (!seen.has(key)) {
+      seen.set(key, v);
+      unique.push(v);
+    }
+  }
+
+  const largest = unique.length > 0 ? unique[0] : null;
   return {
-    manifests: manifests,
+    videos: largest ? [largest] : [],
-    count: manifests.length,
+    videoCount: largest ? 1 : 0,
+    hlsManifest: largest?.hlsManifest || null,
   };
-};
+}
+
+/* ======================================================================== */
+/* Scan pipeline                                                            */
+/* ======================================================================== */
+
+/** URLs that should not be scanned. */
+const SYSTEM_PREFIXES = ['chrome://', 'chrome-extension://', 'edge://', 'about:', 'view-source:'];
+
+/** Filter out system/browser pages from the tab list. */
+function filterValidTabs(tabs) {
+  return tabs.filter(t =>
+    t.url && !SYSTEM_PREFIXES.some(prefix => t.url.startsWith(prefix))
+  );
+}
+
+/**
+ * Probe all frames in a tab for HLS manifests.
+ * @param {number} tabId
+ * @returns {Promise<Array>} array of { url, player } or empty on error
+ */
+async function probeHlsManifests(tabId) {
+  try {
+    const results = await chrome.scripting.executeScript({
+      target: { tabId, allFrames: true },
+      func: m3u8DeepProbeFn,
+    });
+    return results.flatMap(r => r.result || []);
+  } catch {
+    return [];
+  }
+}
+
+/**
+ * Aggregate and deduplicate HLS manifests across frames for one tab.
+ * Prefers manifests from known players over inline-script scraping.
+ * @param {Array} allManifests
+ * @returns {Array}
+ */
+function dedupManifests(allManifests) {
+  const seenUrls = new Set();
+  const unique = allManifests.filter(m => {
+    if (seenUrls.has(m.url)) return false;
+    seenUrls.add(m.url);
+    return true;
+  });
+  unique.sort((a, b) => {
+    const aInline = a.player === 'inline-script' ? 1 : 0;
+    const bInline = b.player === 'inline-script' ? 1 : 0;
+    return aInline - bInline;
+  });
+  return unique;
+}
+
+/**
+ * Scrape video elements from the main frame of a tab.
+ * @param {number} tabId
+ * @param {Array} manifests - HLS manifests found by probing
+ * @returns {Promise<Object|null>} scrape result or null on error
+ */
+async function scrapeTab(tabId, manifests) {
+  try {
+    const results = await chrome.scripting.executeScript({
+      target: { tabId },
+      func: scrapeFn,
+      args: [manifests],
+    });
+    return results[0]?.result || null;
+  } catch {
+    warn('skipping tab', tabId);
+    return null;
+  }
+}
+
+/**
+ * Build a normalized video entry from a scraped video object.
+ * @param {{ src: string, poster: string|null, mediaType: string, hlsManifest: string|null }} video
+ * @param {string} tabTitle
+ * @returns {{ src: string, poster: string|null, tab: string, mediaType: string, hlsManifest?: string }}
+ */
+function makeVideoEntry(video, tabTitle) {
+  const entry = {
+    src: video.hlsManifest || video.src || '',
+    poster: video.poster || null,
+    tab: tabTitle,
+    mediaType: video.mediaType || 'video',
+  };
+  if (video.hlsManifest) entry.hlsManifest = video.hlsManifest;
+  return entry;
+}
+
+/**
+ * Run the full scan: probe HLS manifests, scrape video elements, dedup, store.
+ * @param {Array} tabsToScan - tabs returned by chrome.tabs.query
+ * @returns {Promise<{ items: Array, scanned: number, skipped: number }>}
+ */
+async function scanVideos(tabsToScan) {
+  // Step 1: Probe for HLS manifests in all frames
+  const manifestPromises = tabsToScan.map(t => probeHlsManifests(t.id));
+  const allManifestResults = await Promise.all(manifestPromises);
+
+  // Build per-tab manifest map (deduped)
+  const tabManifestMap = new Map();
+  for (let i = 0; i < tabsToScan.length; i++) {
+    const unique = dedupManifests(allManifestResults[i]);
+    if (unique.length > 0) {
+      tabManifestMap.set(tabsToScan[i].id, unique);
+    }
+  }
+
+  // Step 2: Scrape video elements (main frame only)
+  const scrapePromises = tabsToScan.map(t =>
+    scrapeTab(t.id, tabManifestMap.get(t.id) || [])
+  );
+  const scrapeResults = await Promise.all(scrapePromises);
+
+  // Step 3: Collect results from tabs that found videos
+  const tabResults = tabsToScan.map((tab, i) => ({
+    tabTitle: tab.title || 'Unknown',
+    result: scrapeResults[i],
+  })).filter(g => g.result && g.result.videos?.length > 0);
+
+  // Step 4: Dedup across tabs
+  const seen = new Map();
+  for (const group of tabResults) {
+    for (const video of group.result.videos) {
+      const primarySrc = video.hlsManifest || video.src || '(empty)';
+      const key = primarySrc + '||' + (video.poster || '(none)');
+      if (!seen.has(key)) {
+        seen.set(key, makeVideoEntry(video, group.tabTitle));
+      }
+    }
+  }
+
+  const items = [...seen.values()];
+  const skipped = scrapeResults.filter(r => r === null).length;
+
+  return { items, scanned: tabResults.length, skipped };
+}
+
+/** Store video entries in chrome.storage.local. */
+async function storeVideos(items) {
+  const stored = items.map(v => ({
+    src: v.src,
+    poster: v.poster,
+    tab: v.tab,
+    mediaType: v.mediaType || 'video',
+    hlsManifest: v.hlsManifest || undefined,
+  }));
+  await chrome.storage.local.set({
+    [STORAGE_KEY]: stored,
+    [TAGGED_KEY]: items.map(v => v.tab),
+  });
+}
+
+/* ======================================================================== */
+/* Event handlers                                                           */
+/* ======================================================================== */
 
-/* === "Find Videos" — scan all tabs in the window === */
 findBtn.addEventListener('click', async () => {
   setStatus('Scanning tabs...');
 
-  // Get all tabs in the current window
   const allTabs = await chrome.tabs.query({ currentWindow: true });
-
+  const validTabs = filterValidTabs(allTabs);
-  // Filter out chrome/system pages
-  const validTabs = allTabs.filter(t =>
-    t.url &&
-    !t.url.startsWith('chrome://') &&
-    !t.url.startsWith('chrome-extension://') &&
-    !t.url.startsWith('edge://') &&
-    !t.url.startsWith('about:') &&
-    !t.url.startsWith('view-source:')
-  );
 
   if (validTabs.length === 0) {
     setStatus('No browsable tabs found.');
     return;
   }
 
-  const tabsToScan = validTabs;
+  setStatus(`Scanning ${validTabs.length} tab(s)...`);
-  setStatus(`Scanning ${tabsToScan.length} tab(s)...`);
 
-  // DOM scrape function (runs in main world)
-  const scrapeFn = () => {
-    const dataKeys = ['src', 'video', 'mp4', 'webm', 'poster'];
-
-    // Collect all visible video elements, measure by rendered pixel area
-    const allVideos = Array.from(document.querySelectorAll('video')).filter(v => {
-      const style = window.getComputedStyle(v);
-      return style.display !== 'none' && v.clientWidth > 0 && v.clientHeight > 0;
-    }).map(v => {
-      const area = v.clientWidth * v.clientHeight;
-      const src = dataKeys.map(k => v.getAttribute('data-' + k)).find(Boolean)
-        || (v.currentSrc || v.src || '')
-        || null;
-      const poster = (v.poster || '')
-        || dataKeys.filter(k => k !== 'poster').map(k => v.getAttribute('data-' + k)).find(Boolean)
-        || v.getAttribute('data-poster') || null;
-      return { src, poster, area, width: v.clientWidth, height: v.clientHeight };
-    });
-    allVideos.sort((a, b) => b.area - a.area);
-    const largest = allVideos.length > 0 ? allVideos[0] : null;
-    const sources = Array.from(document.querySelectorAll('video source[src]')).map(s => s.src);
-    const audios = Array.from(document.querySelectorAll('audio')).length;
-
-    return { videos: largest ? [largest] : [], videoCount: largest ? 1 : 0, sources, audios };
-  };
-
-  // Query content script for intercepted data + poster
-  async function queryContentScript(tabId) {
   try {
-      return await chrome.tabs.sendMessage(tabId, { type: 'GOON_GET_VIDEO_DATA' });
+    const { items, scanned, skipped } = await scanVideos(validTabs);
-    } catch {
-      return null;
-    }
-  }
 
-  const results = await Promise.all(
+    await storeVideos(items);
-    tabsToScan.map(async t => {
-      try {
-        const [hlsQueryResults, scriptResult, contentData] = await Promise.all([
-          // STRATEGY 1: Deep query main-world HLS data structures
-          chrome.scripting.executeScript({
-            target: { tabId: t.id, allFrames: true },
-            func: hlsQueryFn,
-          }),
-          // STRATEGY 2: DOM scrape (existing behavior)
-          chrome.scripting.executeScript({
-            target: { tabId: t.id, allFrames: true },
-            func: scrapeFn,
-          }),
-          // STRATEGY 3: Content script intercepted manifests + poster
-          queryContentScript(t.id),
-        ]);
-        return { hlsQueryResults: hlsQueryResults.filter(Boolean), scriptResult: scriptResult.filter(Boolean), contentData };
-      } catch {
-        console.warn('[goon] skipping tab', t.id, ':', t.url);
-        return null;
-      }
-    })
-  );
 
-  // Merge all results into unique video entries
+    const msg = `Found ${items.length} video(s) across ${scanned} tab(s).`;
-  const seen = new Map();
+    setStatus(skipped > 0 ? `${msg} ${skipped} tab(s) skipped (idle).` : msg);
-  let totalFound = 0;
-
-  for (let ti = 0; ti < tabsToScan.length; ti++) {
-    const tab = tabsToScan[ti];
-    const res = results[ti];
-    if (!res) continue;
-
-    const tabTitle = tab.title || 'Unknown';
-    const contentPoster = (res.contentData && res.contentData.posterUrl) || null;
-
-    // --- PROCESS HLS MANIFESTS FROM MAIN-WORLD QUERY ---
-    const hlsManifests = [];
-    for (const frameResult of (res.hlsQueryResults || [])) {
-      const q = frameResult.result;
-      if (q && Array.isArray(q.manifests)) {
-        for (const m of q.manifests) {
-          if (m && m.startsWith('http')) {
-            hlsManifests.push(m);
-          }
-        }
-      }
-    }
-
-    // --- PROCESS INTERCEPTED MANIFESTS FROM CONTENT SCRIPT ---
-    const interceptedManifests = [];
-    if (res.contentData && Array.isArray(res.contentData.interceptedManifests)) {
-      for (const im of res.contentData.interceptedManifests) {
-        if (im.url && im.url.startsWith('http')) {
-          interceptedManifests.push(im.url);
-        }
-      }
-    }
-
-    // Merge all manifest sources
-    const allManifests = [...new Set([...hlsManifests, ...interceptedManifests])];
-
-    // --- PROCESS DOM VIDEO ELEMENTS ---
-    const domVideos = [];
-    for (const frameResult of (res.scriptResult || [])) {
-      const r = frameResult.result;
-      if (r && r.videos) {
-        for (const v of r.videos) {
-          if (v) domVideos.push(v);
-        }
-      }
-    }
-
-    // --- PROCESS CONTENT SCRIPT VIDEO ELEMENTS ---
-    const csVideos = [];
-    if (res.contentData && Array.isArray(res.contentData.videoElements)) {
-      for (const v of res.contentData.videoElements) {
-        csVideos.push(v);
-      }
-    }
-
-    // --- BUILD ENTRIES ---
-    // Priority 1: HLS manifests (per tab, only if present)
-    for (const manifestUrl of allManifests) {
-      totalFound++;
-      const key = 'hls||' + manifestUrl;
-      if (!seen.has(key)) {
-        const item = {
-          url: manifestUrl,
-          src: manifestUrl,
-          poster: contentPoster || null,
-          tab: tabTitle,
-          hlsManifest: manifestUrl,
-          mediaType: 'hls',
-        };
-        seen.set(key, item);
-      }
-    }
-
-    // Priority 2: DOM video elements (non-blob direct URLs)
-    for (const v of domVideos) {
-      // Skip blob: URLs — they're HLS-internal and can't be played directly
-      if (!v.src || v.src.startsWith('blob:')) continue;
-      totalFound++;
-      const key = (v.src || '(empty)') + '||' + (v.poster || '(none)');
-      if (!seen.has(key)) {
-        const item = {
-          url: v.src,
-          src: v.src,
-          poster: v.poster || contentPoster || null,
-          tab: tabTitle,
-        };
-        // If HLS is available for this tab, attach it
-        if (allManifests.length > 0) {
-          item.hlsManifest = allManifests[0];
-          item.mediaType = 'hls';
-        }
-        seen.set(key, item);
-      }
-    }
-
-    // Priority 3: Content script video elements
-    for (const v of csVideos) {
-      if (!v.src || v.src.startsWith('blob:')) continue;
-      totalFound++;
-      const key = (v.src || '(empty)') + '||' + (v.poster || '(none)');
-      if (!seen.has(key)) {
-        const item = {
-          url: v.src,
-          src: v.src,
-          poster: v.poster || contentPoster || null,
-          tab: tabTitle,
-        };
-        if (allManifests.length > 0) {
-          item.hlsManifest = allManifests[0];
-          item.mediaType = 'hls';
-        }
-        seen.set(key, item);
-      }
-    }
-  }
-
-  // Filter: keep only http/https URLs
-  const items = [...seen.values()].filter(v => {
-    const url = v.src || v.url || '';
-    return url.startsWith('http://') || url.startsWith('https://');
-  });
-
-  console.log('[goon] ===== Found', totalFound, 'video elements, unique:', items.length, 'across', tabsToScan.length, 'tabs');
-
-  // Store results
-  const storedItems = items.map(v => ({
-    url: v.url,
-    src: v.src || v.url,
-    poster: v.poster,
-    tab: v.tab,
-    hlsManifest: v.hlsManifest || null,
-    mediaType: v.mediaType || 'direct',
-  }));
-  await chrome.storage.local.set({
-    [STORAGE_KEY]: storedItems,
-    [TAGGED_KEY]: items.map(v => v.tab),
-  });
-
-  const skippedTabs = results.filter(r => r === null).length;
-  const statusMsg = `Found ${items.length} video(s) across ${tabsToScan.length} tab(s).`;
-  setStatus(skippedTabs > 0 ? `${statusMsg} ${skippedTabs} tab(s) skipped.` : statusMsg);
     btnRow.style.display = 'flex';
+  } catch (e) {
+    setStatus(`Scan failed: ${e.message}`);
+    warn('executeScript failed:', e);
+  }
 });
 
-/* === "Open Viewer" — launch the NxN grid === */
+/* === "Open Viewer" - launch the NxN grid === */
 openBtn.addEventListener('click', async () => {
-  const { urls, tags } = await loadVideos();
+  const { videos, tags } = await loadVideos();
-  console.log('[goon] Open Viewer clicked, loaded from storage:', urls, 'tags:', tags);
 
-  if (!urls || urls.length === 0) {
+  if (!videos || videos.length === 0) {
     setStatus('No videos found. Click "Find Videos" first.');
     return;
   }
 
-  const videoUrls = urls;
+  const N = Math.ceil(Math.sqrt(videos.length));
-  const videoTags = tags || [];
-
-  const N = Math.ceil(Math.sqrt(videoUrls.length));
   const PANEL_MIN_W = 420;
   const PANEL_MIN_H = 340;
   const GAP = 2;
@@ -551,20 +443,14 @@ openBtn.addEventListener('click', async () => {
   const winH = Math.max(PANEL_MIN_H * N + GAP * (N - 1) + 40, 300);
 
   const id = 'goonViewer_' + Date.now();
-  await chrome.storage.local.set({ [id]: videoUrls });
+  await chrome.storage.local.set({ [id]: videos });
 
-  const verify = await chrome.storage.local.get([id]);
+  const tagsParam = tags.length > 0 ? '&tags=' + encodeURIComponent(JSON.stringify(tags)) : '';
-  console.log('[goon] viewer storage verified:', verify[id]?.length, 'entries');
+  const viewerUrl = chrome.runtime.getURL('viewer/viewer.html') + '?id=' + id + '&grid=' + N + tagsParam;
-
-  await new Promise(r => setTimeout(r, 100));
-
-  const tagsParam = videoTags.length > 0 ? '&tags=' + encodeURIComponent(JSON.stringify(videoTags)) : '';
-  const gridParam = '&grid=' + N;
-  const viewerUrl = chrome.runtime.getURL('viewer/viewer.html') + '?id=' + id + gridParam + tagsParam;
   chrome.windows.create({ url: viewerUrl, width: winW, height: winH });
 });
 
-/* === "Clear" — reset the stored list === */
+/* === "Clear" - reset the stored list === */
 clearBtn.addEventListener('click', async () => {
   await chrome.storage.local.remove([STORAGE_KEY, TAGGED_KEY]);
   listEl.style.display = 'none';
@@ -572,5 +458,5 @@ clearBtn.addEventListener('click', async () => {
   setStatus('');
 });
 
-/* === Init — restore saved list === */
+/* === Init - restore saved list === */
 showActions();

src/viewer/viewer.js

@@ -1,200 +1,220 @@
 /**
- * viewer.js — Goon Viewer page logic.
+ * viewer.js - Goon Viewer page logic.
  * Reads video URLs from chrome.storage and renders them in a dynamic NxN grid.
- * Supports HLS playback via hls.js when mediaType is 'hls'.
+ * Supports HLS playback via hls.js (dynamic CDN load) and direct MP4/WebM.
  */
 
+const HLS_CDN = 'https://cdn.jsdelivr.net/npm/hls.js@1.5.17';
+const HLS_CONFIG = {
+  enableWorker: true,
+  lowLatencyMode: false,
+  maxBufferLength: 30,
+  maxMaxBufferLength: 60,
+};
+
 const params = new URLSearchParams(location.search);
 const id = params.get('id');
 const gridN = parseInt(params.get('grid'), 10) || 2;
 const tags = params.get('tags') ? JSON.parse(params.get('tags')) : [];
 const panelsEl = document.getElementById('panels');
 
-const HLS_CDNS = [
+/** Track all Hls instances so we can destroy them on unload. */
-  'https://cdn.jsdelivr.net/npm/hls.js@1/dist/hls.min.js',
+const hlsInstances = new Map();
-  'https://unpkg.com/hls.js@1/dist/hls.min.js',
-];
 
-/** Load hls.js from CDN. Caches the promise so it's only fetched once. */
+/* ======================================================================== */
-let hlsLoadPromise = null;
+/* HLS helpers                                                              */
-async function loadHlsJs() {
+/* ======================================================================== */
-  if (hlsLoadPromise) return hlsLoadPromise;
+
-  return (hlsLoadPromise = (async () => {
+/** Destroy the Hls instance attached to a video element (if any). */
-    if (typeof HLS !== 'undefined') return window.HLS;
+function destroyHls(video) {
-    for (const url of HLS_CDNS) {
+  const inst = hlsInstances.get(video);
-      try {
+  if (inst) {
-        await new Promise((res, rej) => {
+    inst.destroy();
-          const s = document.createElement('script');
+    hlsInstances.delete(video);
-          s.src = url;
-          s.onload = res;
-          s.onerror = rej;
-          document.head.appendChild(s);
-        });
-        if (typeof HLS !== 'undefined') return window.HLS;
-      } catch {
-        /* try next CDN */
   }
-    }
-    throw new Error('Failed to load hls.js from any CDN');
-  })());
 }
 
-/** Play an HLS manifest on a <video> element. Loads hls.js if needed. */
+/**
-async function playHls(video, manifestUrl) {
+ * Play an HLS manifest on a <video> element using hls.js or native Safari.
-  try {
+ */
-    const HLS = await loadHlsJs();
+function playHls(video, manifestUrl, panel) {
-    if (!HLS || !HLS.isSupported()) {
+  if (!window.Hls || !window.Hls.isSupported()) {
-      // native HLS (Safari) or undefined — fall back to plain src
     video.src = manifestUrl;
+    const p = video.play();
+    if (p) p.catch(() => {});
     return;
   }
-    // Clean up any existing HLS instance before creating a new one
+
   destroyHls(video);
-    const hls = new HLS({ debug: false, enableWorker: true, lowLatencyMode: false });
-    hls.loadSource(manifestUrl);
-    hls.attachMedia(video);
-    video._hls = hls;
 
-    hls.on(HLS.Events.MANIFEST_PARSED, () => video.play().catch(() => {}));
+  const hls = new window.Hls(HLS_CONFIG);
+  hlsInstances.set(video, hls);
 
-    hls.on(HLS.Events.ERROR, (_ev, data) => {
+  hls.on(window.Hls.Events.MANIFEST_PARSED, () => {
+    const p = video.play();
+    if (p) p.catch(() => {});
+  });
+
+  hls.on(window.Hls.Events.ERROR, (_event, data) => {
     if (!data.fatal) return;
-      switch (data.type) {
+
-        case HLS.ErrorTypes.NETWORK_ERROR: hls.startLoad(); break;
+    if (data.type === window.Hls.ErrorTypes.NETWORK_ERROR) {
-        case HLS.ErrorTypes.MEDIA_ERROR: hls.recoverMediaError(); break;
+      showError(panel, 'Stream expired - re-scan to get fresh URLs.');
-        default: destroyHls(video);
+      hls.destroy();
+      hlsInstances.delete(video);
+    } else if (data.type === window.Hls.ErrorTypes.MEDIA_ERROR) {
+      hls.recoverMediaError();
+    } else {
+      showError(panel, 'Playback error - unable to recover.');
+      hls.destroy();
+      hlsInstances.delete(video);
     }
   });
-  } catch (err) {
+
-    console.error('[goon-viewer] HLS init failed:', err.message);
+  hls.loadSource(manifestUrl);
+  hls.attachMedia(video);
+}
+
+/**
+ * Load hls.js from CDN. Returns a Promise that resolves when ready.
+ */
+function loadHlsJs() {
+  return new Promise((resolve, reject) => {
+    if (window.Hls && window.Hls.isSupported) {
+      resolve();
+      return;
     }
+    const script = document.createElement('script');
+    script.src = HLS_CDN;
+    script.onload = () => resolve();
+    script.onerror = () => reject(new Error('Hls.js CDN unavailable'));
+    document.head.appendChild(script);
+  });
 }
 
-/** Destroy the HLS instance on a video element, if any. */
+/* ======================================================================== */
-function destroyHls(video) {
+/* UI helpers                                                               */
-  if (video._hls) { video._hls.destroy(); delete video._hls; }
+/* ======================================================================== */
+
+/** Show an error message inside a panel's video placeholder. */
+function showError(panel, message) {
+  const err = document.createElement('div');
+  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);
 }
 
-/** Resolve the src URL from a video entry (string or object). */
+/** Create a video element with standard autoplay attributes. */
-function resolveSrc(entry) {
+function createVideoElement() {
-  if (typeof entry === 'string') return entry;
-  return entry.src || entry.url || '';
-}
-
-/** Check if entry is HLS media. */
-function isHls(entry) {
-  return entry !== null && typeof entry === 'object' && entry.mediaType === 'hls';
-}
-
-/** Create a <video> for a single entry — HLS or standard. */
-async function createVideoElement(entry) {
   const video = document.createElement('video');
   video.autoplay = true;
   video.muted = true;
   video.loop = true;
   video.playsInline = true;
-
-  if (isHls(entry) && entry.hlsManifest) {
-    console.log('[goon-viewer] HLS detected, manifest:', entry.hlsManifest);
-    await playHls(video, entry.hlsManifest);
-  } else {
-    video.src = resolveSrc(entry);
-  }
-
-  // Set poster image so a thumbnail shows before playback begins
-  if (entry && typeof entry === 'object' && entry.poster) {
-    video.poster = entry.poster;
-  }
-
   return video;
 }
 
-/** Show an error overlay on a panel. */
+/**
-function showPanelError(panel, msg) {
+ * Create a single panel (video or empty).
-  const el = document.createElement('div');
+ * Returns { panel, hlsEntry } — hlsEntry is set for deferred HLS playback.
-  el.className = 'panel-error';
+ */
-  el.style.cssText =
+function createPanel(entry, tag) {
-    'display:flex;align-items:center;justify-content:center;height:100%;color:#94a3b8;' +
+  const panel = document.createElement('div');
-    'font-family:sans-serif;font-size:12px;text-align:center;padding:8px;';
+  panel.classList.add('panel');
-  el.textContent = msg || 'Failed to load video';
+
-  panel.innerHTML = '';
+  if (!entry) {
-  panel.appendChild(el);
+    panel.classList.add('empty');
+    return { panel, hlsEntry: null };
+  }
+
+  const video = createVideoElement();
+
+  const src = entry.src || entry.url || '';
+  const mediaType = entry.mediaType || 'video';
+  const poster = entry.poster || null;
+  const hlsManifest = entry.hlsManifest || null;
+
+  if (poster) video.poster = poster;
+
+  if (mediaType === 'hls' && hlsManifest) {
+    video.dataset.hlsManifest = hlsManifest;
+    video.dataset.mediaType = 'hls';
+    panel.appendChild(video);
+    if (tag) {
+      const label = document.createElement('div');
+      label.className = 'panel-label';
+      label.textContent = tag;
+      panel.appendChild(label);
+    }
+    return { panel, hlsEntry: { video, manifest: hlsManifest, panel } };
+  }
+
+  video.src = src;
+  panel.appendChild(video);
+  if (tag) {
+    const label = document.createElement('div');
+    label.className = 'panel-label';
+    label.textContent = tag;
+    panel.appendChild(label);
+  }
+  return { panel, hlsEntry: null };
 }
 
-// Fetch stored video URLs and render panels
+/* ======================================================================== */
-async function init() {
+/* Init                                                                     */
-  console.log('[goon-viewer] init called, id:', id, 'url:', location.href);
+/* ======================================================================== */
 
+async function init() {
   if (!id) {
     panelsEl.innerHTML = '<div style="padding:20px;color:#64748b">No viewer ID provided</div>';
     return;
   }
 
   const data = await chrome.storage.local.get([id]);
-  console.log('[goon-viewer] raw storage:', data);
   const videoUrls = data[id] || [];
-  console.log('[goon-viewer] video URLs to render:', videoUrls, '(count:', videoUrls.length, ')');
 
+  // Status overlay
   const overlay = document.createElement('div');
   overlay.id = 'viewer-status';
-  overlay.style.cssText =
+  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;';
-    '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);
-
   overlay.textContent = `Found ${videoUrls.length} video URL(s) in ${gridN}x${gridN} grid`;
-  console.log('[goon-viewer]', overlay.textContent);
 
   const totalPanels = gridN * gridN;
+  const hlsEntries = [];
 
-  // Create NxN panels
   for (let i = 0; i < totalPanels; i++) {
-    const panel = document.createElement('div');
+    const entry = (typeof videoUrls[i] === 'object') ? videoUrls[i] : null;
-    panel.classList.add('panel');
+    const { panel, hlsEntry } = createPanel(entry, tags[i]);
-
-    if (i < videoUrls.length && videoUrls[i]) {
-      try {
-        const video = await createVideoElement(videoUrls[i]);
-        panel.appendChild(video);
-
-        // Listen for load errors on standard videos
-        video.addEventListener('error', () => {
-          console.error('[goon-viewer] Video load error on panel', i + 1);
-          showPanelError(panel, 'Failed to load video');
-        });
-
-        // Add tab label if available
-        if (tags[i]) {
-          const label = document.createElement('div');
-          label.className = 'panel-label';
-          label.textContent = tags[i];
-          panel.appendChild(label);
-        }
-      } catch (err) {
-        console.error('[goon-viewer] Error creating video panel', i + 1, ':', err);
-        showPanelError(panel, 'Error: ' + err.message);
-      }
-    } else {
-      panel.classList.add('empty');
-    }
-
     panelsEl.appendChild(panel);
+    if (hlsEntry) hlsEntries.push(hlsEntry);
   }
 
-  // Apply dynamic grid
   panelsEl.style.gridTemplateColumns = `repeat(${gridN}, 1fr)`;
   panelsEl.style.gridTemplateRows = `repeat(${gridN}, 1fr)`;
+
+  // Load hls.js and start HLS playback
+  if (hlsEntries.length > 0) {
+    try {
+      await loadHlsJs();
+    } catch (e) {
+      for (const { panel } of hlsEntries) {
+        showError(panel, 'HLS player unavailable - check network.');
+      }
+      return;
+    }
+    for (const { video, manifest, panel } of hlsEntries) {
+      playHls(video, manifest, panel);
+    }
+  }
 }
 
-// Clean up HLS instances and storage entry when the viewer is closed
+// Clean up storage entry and HLS instances when the viewer is closed
 window.addEventListener('unload', async () => {
-  // Destroy all HLS instances
+  for (const video of [...hlsInstances.keys()]) {
-  const allVideos = panelsEl.querySelectorAll('video');
-  for (const video of allVideos) {
     destroyHls(video);
   }
-
   if (id) {
     await chrome.storage.local.remove([id]);
   }

vite.config.ts

@@ -57,6 +57,7 @@ export default defineConfig({
         content: resolve(__dirname, 'src/content/content.js'),
         viewer: resolve(__dirname, 'src/viewer/viewer.html'),
         viewerIndex: resolve(__dirname, 'src/viewer/index.html'),
+        interceptors: resolve(__dirname, 'src/inject/interceptors.js'),
       },
       output: {
         entryFileNames: '[name].js',