test: add config validation suite (43/43 tests)

Adds 4 regression tests: - vite.config.ts entry modules must exist as source files - content.js must NOT use inline script injection (textContent) - interceptors.js must be a standalone IIFE file - manifest.json content_scripts must reference content.js Prevents future build-breaking phantom entry point errors (the probeFn.js/scrapeFn.js issue kfj001 hit).
fix: remove non-existent probeFn.js and scrapeFn.js from Vite build entry points
2026-08-11 08:10:18 +00:00 · 2026-08-11 07:23:05 +00:00 · 2026-08-11 06:43:54 +00:00 · 2026-08-11 04:42:28 +00:00 · 2026-08-11 04:29:08 +00:00
3 changed files with 749 additions and 731 deletions
@@ -1,19 +1,11 @@
 /**
- * index.js - Popup logic for the Goon Plugin.
- * Runs inside the popup; scans the current window's tabs for videos
- * and stores the results for the viewer to consume.
+ * index.js — Popup logic for the Goon Plugin.
+ * Runs inside the popup; scans the current tab for videos and opens the viewer.
 */

 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');
@@ -24,37 +16,36 @@ const btnRow = document.getElementById('btn-row');
 listEl.style.wordBreak = 'break-word';
 listEl.style.whiteSpace = 'pre-wrap';

-/* ======================================================================== */
-/* UI helpers                                                               */
-/* ======================================================================== */
-
 function setStatus(msg) {
  statusEl.textContent = msg;
-  log(msg);
+  console.log('[goon]', msg);
 }

 /** Load the current video list and tags from storage. */
 function loadVideos() {
  return chrome.storage.local.get([STORAGE_KEY, TAGGED_KEY]).then(data => ({
-    videos: data[STORAGE_KEY] || [],
+    urls: data[STORAGE_KEY] || [],
    tags: data[TAGGED_KEY] || [],
  }));
 }

-/** Render the video list UI from stored video entries. */
-function renderList(videos) {
+/** Render the video list UI from stored {url, label} objects. */
+function renderList(items) {
  listEl.innerHTML = '';
-  if (!videos || videos.length === 0) {
+  if (!items || items.length === 0) {
    listEl.style.display = 'none';
    return;
  }
  listEl.style.display = 'block';

-  for (const video of videos) {
+  for (const item of items) {
    const link = document.createElement('a');
    link.className = 'video-item';
-    link.href = video.src || video.url || '';
-    link.textContent = video.label ? `${video.label}: ${link.href}` : link.href;
+    let url = item.url;
+    if (typeof url === 'string' && item.src) url = item.src;
+    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);
  }
@@ -64,7 +55,7 @@ function renderList(videos) {
  copyBtn.className = 'copy-btn';
  copyBtn.textContent = 'Copy All URLs';
  copyBtn.addEventListener('click', () => {
-    const urls = videos.map(v => v.src || v.url);
+    const urls = items.map(v => (typeof v === 'object' && v.src) ? v.src : (typeof v === 'object' ? v.url : v));
    navigator.clipboard.writeText(urls.join('\n')).then(() => {
      copyBtn.textContent = 'Copied!';
      setTimeout(() => { copyBtn.textContent = 'Copy All URLs'; }, 1500);
@@ -73,369 +64,322 @@ function renderList(videos) {
  listEl.appendChild(copyBtn);
 }

-/** Show the main button row and render saved videos. */
+/** Show the main button row. */
 function showActions() {
  btnRow.style.display = 'flex';
-  loadVideos().then(({ videos, tags }) => {
-    if (videos.length > 0) {
-      const items = videos.map((video, i) => ({
-        src: video.src || video.url || '',
-        label: tags[i],
-      }));
+  loadVideos().then(({ urls, tags }) => {
+    if (urls.length > 0) {
+      const items = urls.map((url, i) => {
+        const entry = { url: url.src || url, label: tags[i] };
+        if (typeof url === 'object' && url.src) entry.src = url.src;
+        return entry;
+      });
      renderList(items);
-      setStatus(`Using ${videos.length} video(s) from last search.`);
+      setStatus(`Using ${urls.length} video(s) from last search.`);
    } else {
      setStatus('');
    }
  });
 }

-/* ======================================================================== */
-/* HLS deep probe - runs in target page context via executeScript           */
-/* ======================================================================== */
-
-/**
- * Deep probe a page for HLS manifest URLs.
- * Walks known player objects, video elements, inline scripts, and config globals.
- * Returns an array of { url, player } objects.
- */
-function m3u8DeepProbeFn() {
-  const manifests = [];
-  const seen = new Set();
-
-  function walk(obj, path, depth) {
-    if (!obj || typeof obj !== 'object' || depth > 5) return;
-    if (typeof obj === 'string') {
-      const match = obj.match(/https?:\/\/[^"'\s`)]+\.m3u8[^"'\s`)]*/gi);
-      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 A: Known player globals (shallow + deep)
-  const playerGlobals = [
-    'hls', 'Hls', 'videojs', 'Video', 'flowplayer', 'jwplayer',
-    '__hls', '__hls_player', 'player', 'videoPlayer', 'mainPlayer',
-    'fhplayer', '__pj', 'playerInstance',
-    'PHPlayer', 'fh', '__phPlayer', '__ph', 'phPlayer', 'phPlayerInstance',
-  ];
-  for (const name of playerGlobals) {
-    const obj = window[name];
-    if (!obj || typeof obj === 'function') continue;
-    for (const key of ['url', '_url', 'src', 'manifestUrl', 'hlsUrl', 'playlistUrl']) {
-      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}` }); }
-      }
-    }
-    walk(obj, name, 0);
-  }
-
-  // Strategy B: Video element HLS instances
-  for (const v of document.querySelectorAll('video')) {
-    for (const key of Object.keys(v)) {
-      if (key.toLowerCase().includes('hls') || key === 'player') {
-        const hlsObj = v[key];
-        if (hlsObj && typeof hlsObj === 'object') {
-          for (const subKey of Object.keys(hlsObj)) {
-            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}` }); }
-            }
-          }
-          walk(hlsObj, `video.${key}`, 0);
-        }
-      }
-    }
-  }
-
-  // Strategy C: Inline scripts
-  for (const script of document.querySelectorAll('script:not([src])')) {
-    const text = script.textContent || '';
-    const matches = text.match(/https?:\/\/[^"'\s]+.(m3u8|hlsvod)[^"'\s]*/gi);
-    if (matches) {
-      for (const u of matches) {
-        if (!seen.has(u)) { seen.add(u); manifests.push({ url: u, player: 'inline-script' }); }
-      }
-    }
-  }
-
-  // Strategy D: Config globals
-  const configKeys = ['__dataLayer', '__INITIAL_STATE__', 'config', '__NEXT_DATA__', '__PRELOADED_STATE__', 'appData', 'pageData', '__data'];
-  for (const name of configKeys) {
-    const obj = window[name];
-    if (obj && typeof obj === 'object') walk(obj, name, 0);
-  }
-
-  return manifests;
-}
-
-/* ======================================================================== */
-/* Video scraper - runs in target page context via executeScript            */
-/* ======================================================================== */
-
-/**
- * Scrape visible video elements from the main frame.
- * Returns at most one video entry (the largest visible one).
- * @param {Array} hlsManifests - manifests found by the deep probe
- * @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;
-
-      let hlsManifest = null;
-      let mediaType = 'video';
-      let src = rawSrc;
-
-      if (rawSrc.includes('.m3u8') && rawSrc.startsWith('http')) {
-        hlsManifest = rawSrc;
-        mediaType = 'hls';
-      } else if (rawSrc.startsWith('http') && !rawSrc.startsWith('blob:')) {
-        mediaType = 'video';
-      } else if (hlsManifests && hlsManifests.length > 0) {
-        hlsManifest = hlsManifests[0].url || hlsManifests[0];
-        mediaType = 'hls';
-        src = hlsManifest;
-      }
-
-      return { src, poster, area, width: v.clientWidth, height: v.clientHeight, mediaType, hlsManifest };
-    });
-
-  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 {
-    videos: largest ? [largest] : [],
-    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...');
+  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;
  }

-  setStatus(`Scanning ${validTabs.length} tab(s)...`);
+  const tabsToScan = validTabs;
+  setStatus(`Scanning ${tabsToScan.length} tab(s)…`);

  try {
-    const { items, scanned, skipped } = await scanVideos(validTabs);
+    // --- Helper: deep object walker that finds .m3u8 URLs up to depth 5 ---
+    const m3u8DeepProbeFn = () => {
+      const manifests = [];
+      const seen = new Set();

-    await storeVideos(items);
+      function walk(obj, path, depth) {
+        if (!obj || typeof obj !== 'object' || depth > 5) return;
+        if (typeof obj === 'string') {
+          if (obj.includes('.m3u8')) {
+            // Try to extract a URL from the string
+            const match = obj.match(/https?:\/\/[^"'\s`)]+\.m3u8[^"'\s`)]*/gi);
+            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);
+        }
+      }

-    const msg = `Found ${items.length} video(s) across ${scanned} tab(s).`;
-    setStatus(skipped > 0 ? `${msg} ${skipped} tab(s) skipped (idle).` : msg);
+      // Strategy A: Walk known player instances (shallow + deep)
+      const playerGlobals = [
+        'hls', 'Hls', 'videojs', 'Video', 'flowplayer', 'jwplayer',
+        '__hls', '__hls_player', 'player', 'videoPlayer', 'mainPlayer',
+        'fhplayer', 'flowplayer', 'jwplayer', '__pj', 'playerInstance',
+        'PHPlayer', 'fh', '__phPlayer', '__ph', 'phPlayer', 'phPlayerInstance',
+      ];
+      for (const name of playerGlobals) {
+        const obj = window[name];
+        if (!obj || typeof obj === 'function') continue;
+        // Shallow: direct URL properties
+        for (const key of ['url', '_url', 'src', 'manifestUrl', 'hlsUrl', 'playlistUrl']) {
+          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}` }); }
+          }
+        }
+        // Deep walk
+        walk(obj, name, 0);
+      }
+      // Strategy B: Video element HLS instances
+      const videos = document.querySelectorAll('video');
+      for (const v of videos) {
+        for (const key of Object.keys(v)) {
+          if (key.toLowerCase().includes('hls') || key === 'player') {
+            const hlsObj = v[key];
+            if (hlsObj && typeof hlsObj === 'object') {
+              for (const subKey of Object.keys(hlsObj)) {
+                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}` }); }
+                }
+              }
+              walk(hlsObj, `video.${key}`, 0);
+            }
+          }
+        }
+      }
+      // Strategy C: Inline scripts
+      const scripts = document.querySelectorAll('script:not([src])');
+      for (const script of scripts) {
+        const text = script.textContent || '';
+        const matches = text.match(/https?:\/\/[^"'\\s]+\.(m3u8|hlsvod)[^"'\\s]*/gi);
+        if (matches) {
+          for (const u of matches) {
+            if (!seen.has(u)) { seen.add(u); manifests.push({ url: u, player: 'inline-script' }); }
+          }
+        }
+      }
+      // Strategy D: window.config, window.__INITIAL_STATE__, etc.
+      const configKeys = ['__dataLayer', '__INITIAL_STATE__', 'config', '__NEXT_DATA__', '__PRELOADED_STATE__', 'appData', 'pageData', '__data'];
+      for (const name of configKeys) {
+        const obj = window[name];
+        if (obj && typeof obj === 'object') walk(obj, name, 0);
+      }
+      return manifests;
+    };
+
+    // Step 1: Probe for HLS manifests — run in ALL frames so we catch nested iframes too.
+    const hlsProbeResults = await Promise.all(
+      tabsToScan.map(async t => {
+        try {
+          return await chrome.scripting.executeScript({
+            target: { tabId: t.id, allFrames: true },
+            func: m3u8DeepProbeFn,
+          });
+        } catch {
+          return [{ result: [] }];
+        }
+      })
+    );
+
+    // Aggregate manifests across all frames within a tab, deduped by URL.
+    const tabManifestMap = new Map();
+    for (let i = 0; i < tabsToScan.length; i++) {
+      const tab = tabsToScan[i];
+      const frameResults = hlsProbeResults[i] || [];
+      const allManifests = [];
+      for (const fr of frameResults) {
+        if (fr.result) allManifests.push(...fr.result);
+      }
+      const seenUrls = new Set();
+      const uniqueManifests = allManifests.filter(m => {
+        if (seenUrls.has(m.url)) return false;
+        seenUrls.add(m.url);
+        return true;
+      });
+      // Prefer manifests from known players over inline-script scraping
+      uniqueManifests.sort((a, b) => {
+        const aInline = a.player === 'inline-script' ? 1 : 0;
+        const bInline = b.player === 'inline-script' ? 1 : 0;
+        return aInline - bInline;
+      });
+      if (uniqueManifests.length > 0) {
+        tabManifestMap.set(tab.id, uniqueManifests);
+      }
+    }
+
+    // Step 2: Scrape video elements — MAIN FRAME ONLY to avoid iframe noise.
+    // Pornhub's main player is in the top-level document. Iframes contain
+    // related videos, ads, and thumbnails — not the primary video stream.
+    const 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;
+
+        let hlsManifest = null;
+        let mediaType = 'video';
+        let src = rawSrc;
+
+        // Is the raw src a direct .m3u8 URL?
+        if (rawSrc.includes('.m3u8') && rawSrc.startsWith('http')) {
+          hlsManifest = rawSrc;
+          mediaType = 'hls';
+        } else if (rawSrc.startsWith('http') && !rawSrc.startsWith('blob:')) {
+          // Direct HTTP video (mp4, webm, etc.) — keep as-is
+          mediaType = 'video';
+        } else if (hlsManifests && hlsManifests.length > 0) {
+          // Blob URL or empty — this is likely an HLS-powered player.
+          // Use the best manifest from the probe.
+          hlsManifest = hlsManifests[0].url || hlsManifests[0];
+          mediaType = 'hls';
+          src = hlsManifest;
+        }
+
+        return { src, poster, area, width: v.clientWidth, height: v.clientHeight, mediaType, hlsManifest };
+      });
+      // Sort by displayed size descending
+      allVideos.sort((a, b) => b.area - a.area);
+
+      // Filter: only keep entries that have 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);
+        }
+      }
+
+      // Return ONLY the largest video element from the main frame
+      const largest = unique.length > 0 ? unique[0] : null;
+      return {
+        videos: largest ? [largest] : [],
+        videoCount: largest ? 1 : 0,
+        hlsManifest: largest?.hlsManifest || null,
+      };
+    };
+
+    const results = await Promise.all(
+      tabsToScan.map(async t => {
+        try {
+          const manifests = tabManifestMap.get(t.id) || [];
+          // Main frame only — prevents iframe noise (related videos, ads)
+          return await chrome.scripting.executeScript({
+            target: { tabId: t.id },
+            func: scrapeFn,
+            args: [manifests],
+          });
+        } catch {
+          console.warn('[goon] skipping tab', t.id, ':', t.url);
+          return null;
+        }
+      })
+    );
+
+    // Build tab results — now each tab has at most 1 result (main frame only)
+    const tabResults = tabsToScan.map((tab, i) => ({
+      tabTitle: tab.title || 'Unknown',
+      result: results[i]?.[0]?.result || null,
+    })).filter(g => g.result && g.result.videos?.length > 0);
+    const scanned = tabResults.length;
+
+    // Dedup across tabs: one entry per unique (hlsManifest/src + poster)
+    const seen = new Map();
+    let totalFound = 0;
+    for (const group of tabResults) {
+      for (const v of group.result.videos) {
+        totalFound++;
+        const primarySrc = v.hlsManifest || v.src || '(empty)';
+        const key = primarySrc + '||' + (v.poster || '(none)');
+        if (!seen.has(key)) {
+          const item = {
+            url: v.hlsManifest || v.src || '',
+            poster: v.poster || null,
+            tab: group.tabTitle,
+            src: v.hlsManifest || v.src || '',
+            mediaType: v.mediaType || 'video',
+          };
+          if (v.hlsManifest) item.hlsManifest = v.hlsManifest;
+          seen.set(key, item);
+        }
+      }
+    }
+
+    const items = [...seen.values()];
+    console.log('[goon] ===== Found', totalFound, 'video element(s) across', tabsToScan.length, 'tab(s), unique:', items.length);
+
+    // Replace the entire list (fresh scan)
+    const storedItems = items.map(v => ({
+      url: v.url,
+      src: v.src || v.url,
+      poster: v.poster,
+      tab: v.tab,
+      mediaType: v.mediaType || 'video',
+      hlsManifest: v.hlsManifest || undefined,
+    }));
+    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 ${scanned} tab(s).`;
+    setStatus(skippedTabs > 0 ? `${statusMsg} ${skippedTabs} tab(s) skipped (idle).` : statusMsg);
    btnRow.style.display = 'flex';
  } catch (e) {
    setStatus(`Scan failed: ${e.message}`);
-    warn('executeScript failed:', e);
+    console.warn('[goon] executeScript failed:', e);
  }
 });

-/* === "Open Viewer" - launch the NxN grid === */
+/* === "Open Viewer" — launch the 2x2 grid === */
 openBtn.addEventListener('click', async () => {
-  const { videos, tags } = await loadVideos();
+  const { urls, tags } = await loadVideos();
+  console.log('[goon] Open Viewer clicked, loaded from storage:', urls, 'tags:', tags);

-  if (!videos || videos.length === 0) {
+  if (!urls || urls.length === 0) {
    setStatus('No videos found. Click "Find Videos" first.');
    return;
  }

-  const N = Math.ceil(Math.sqrt(videos.length));
+  // Dedup by index to preserve tag alignment
+  const videoUrls = urls;
+  const videoTags = tags || [];
+
+  // Compute NxN grid
+  const N = Math.ceil(Math.sqrt(videoUrls.length));
  const PANEL_MIN_W = 420;
  const PANEL_MIN_H = 340;
  const GAP = 2;
@@ -443,14 +387,21 @@ 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]: videos });
+  await chrome.storage.local.set({ [id]: videoUrls });

-  const tagsParam = tags.length > 0 ? '&tags=' + encodeURIComponent(JSON.stringify(tags)) : '';
-  const viewerUrl = chrome.runtime.getURL('viewer/viewer.html') + '?id=' + id + '&grid=' + N + tagsParam;
+  // Verify write
+  const verify = await chrome.storage.local.get([id]);
+  console.log('[goon] viewer storage verified:', verify[id]?.length, 'entries');
+
+  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';
@@ -458,5 +409,5 @@ clearBtn.addEventListener('click', async () => {
  setStatus('');
 });

-/* === Init - restore saved list === */
+/* === Init — restore saved list === */
 showActions();
@@ -1,342 +1,409 @@
 /**
- * index.test.js - Unit tests for popup scanning pipeline helpers.
+ * index.test.js — Integration tests for popup storage pipeline.
 *
- * Verifies that the exported pipeline functions correctly handle:
- * - HLS metadata preservation through dedup
- * - Tab filtering (system URLs excluded)
- * - Manifest deduplication and prioritization
- * - Video entry normalization
+ * Verifies that HLS metadata (mediaType, hlsManifest) survives the
+ * full scrape → dedup → storage → viewer cycle.
 */
 import { describe, it, expect } from 'vitest';

 /* ========================================================================== */
-/* Simulated pipeline helpers (mirror of index.js exported functions)        */
+/* Helpers: simulate the scrape → dedup → storage pipeline from index.js     */
 /* ========================================================================== */

 /**
- * Simulate `filterValidTabs` from index.js.
- */
-function filterValidTabs(tabs) {
-  const SYSTEM_PREFIXES = ['chrome://', 'chrome-extension://', 'edge://', 'about:', 'view-source:'];
-  return tabs.filter(t =>
-    t.url && !SYSTEM_PREFIXES.some(prefix => t.url.startsWith(prefix))
-  );
-}
-
-/**
- * Simulate `dedupManifests` from index.js.
- */
-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;
-}
-
-/**
- * Simulate `makeVideoEntry` from index.js.
- */
-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;
-}
-
-/**
- * Simulate the dedup + storage pipeline from index.js scanVideos().
- * Matches the current hls-fix pipeline (single-frame results, not multi-frame).
+ * Simulate the dedup + storage logic from index.js lines 161-197.
+ * This reproduces the exact pipeline so we can verify HLS metadata flow.
 */
 function simulateStoragePipeline(tabResults) {
  const seen = new Map();
+  let totalFound = 0;
+
  for (const group of tabResults) {
-    if (!group.result || !group.result.videos?.length) continue;
-    for (const v of group.result.videos) {
-      const primarySrc = v.hlsManifest || v.src || '(empty)';
-      const key = primarySrc + '||' + (v.poster || '(none)');
-      if (!seen.has(key)) {
-        seen.set(key, makeVideoEntry(v, group.tabTitle));
+    for (const r of group.frames) {
+      if (!r.result) continue;
+      for (const v of r.result.videos) {
+        totalFound++;
+        const key = (v.src || '(empty)') + '||' + (v.poster || '(none)');
+        if (!seen.has(key)) {
+          const item = { url: v.src || v.poster || '', poster: v.poster || null, tab: group.tabTitle };
+          if (v.src) item.src = v.src;
+          if (v.mediaType) item.mediaType = v.mediaType;
+          if (v.hlsManifest) item.hlsManifest = v.hlsManifest;
+          seen.set(key, item);
+        }
      }
    }
  }
-  const items = [...seen.values()];

-  // Storage format
+  const items = [...seen.values()].filter(v => {
+    const url = v.src || v.url || '';
+    return url.startsWith('http://') || url.startsWith('https://');
+  });
+
+  // This is how index.js stores items (line 186-196)
  const storedItems = items.map(v => ({
-    src: v.src,
+    url: v.url,
+    src: v.src || v.url,
    poster: v.poster,
    tab: v.tab,
    mediaType: v.mediaType || 'video',
    hlsManifest: v.hlsManifest || undefined,
  }));

-  return { storedItems };
+  return { storedItems, totalFound };
+}
+
+/**
+ * Simulate the scrapeFn from index.js lines 112-139.
+ * Takes video element data and returns the scrape result.
+ */
+function simulateScrapeFn(videoElements) {
+  const dataKeys = ['src', 'video', 'mp4', 'webm', 'poster'];
+
+  const allVideos = videoElements.map(v => {
+    const area = v.clientWidth * v.clientHeight;
+    // Check for HLS manifest URL in data attributes or <source> children
+    const hlsDataAttr = v.getAttribute('data-hls') || v.getAttribute('data-hls-manifest');
+    const hlsSource = v.sources?.map(s => s.src).find(Boolean) || null;
+    const hlsManifest = hlsDataAttr || hlsSource;
+    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;
+    const mediaType = hlsManifest ? 'hls' : 'video';
+    return { src, poster, area, width: v.clientWidth, height: v.clientHeight, mediaType, hlsManifest };
+  });
+
+  // Sort by displayed size descending, pick the largest
+  allVideos.sort((a, b) => b.area - a.area);
+  const largest = allVideos.length > 0 ? allVideos[0] : null;
+
+  return {
+    videos: largest ? [largest] : [],
+    videoCount: largest ? 1 : 0,
+    sources: [],
+    audios: 0,
+  };
 }

 /* ========================================================================== */
-/* TESTS: Tab filtering                                                     */
+/* TESTS: HLS metadata flow through storage pipeline                         */
 /* ========================================================================== */

-describe('filterValidTabs', () => {
-  it('excludes chrome:// URLs', () => {
-    const tabs = [{ url: 'chrome://settings' }, { url: 'https://example.com' }];
-    const result = filterValidTabs(tabs);
-    expect(result).toHaveLength(1);
-    expect(result[0].url).toBe('https://example.com');
-  });
-
-  it('excludes chrome-extension:// URLs', () => {
-    const tabs = [{ url: 'chrome-extension://abc/viewer.html' }];
-    expect(filterValidTabs(tabs)).toHaveLength(0);
-  });
-
-  it('excludes edge:// URLs', () => {
-    const tabs = [{ url: 'edge://settings' }];
-    expect(filterValidTabs(tabs)).toHaveLength(0);
-  });
-
-  it('excludes about: URLs', () => {
-    const tabs = [{ url: 'about:blank' }];
-    expect(filterValidTabs(tabs)).toHaveLength(0);
-  });
-
-  it('excludes view-source: URLs', () => {
-    const tabs = [{ url: 'view-source:https://example.com' }];
-    expect(filterValidTabs(tabs)).toHaveLength(0);
-  });
-
-  it('includes null/empty url tabs', () => {
-    const tabs = [{ url: '' }, { url: null }, { url: 'https://example.com' }];
-    const result = filterValidTabs(tabs);
-    expect(result).toHaveLength(1);
-  });
-});
-
-/* ========================================================================== */
-/* TESTS: Manifest dedup and prioritization                                 */
-/* ========================================================================== */
-
-describe('dedupManifests', () => {
-  it('removes duplicate URLs', () => {
-    const manifests = [
-      { url: 'https://a.com/1.m3u8', player: 'hls' },
-      { url: 'https://a.com/1.m3u8', player: 'inline-script' },
-      { url: 'https://b.com/2.m3u8', player: 'hls' },
-    ];
-    const result = dedupManifests(manifests);
-    expect(result).toHaveLength(2);
-    expect(result[0].url).toBe('https://a.com/1.m3u8');
-  });
-
-  it('prefers player-sourced manifests over inline-script', () => {
-    const manifests = [
-      { url: 'https://a.com/1.m3u8', player: 'inline-script' },
-      { url: 'https://a.com/1.m3u8', player: 'hls' },
-    ];
-    const result = dedupManifests(manifests);
-    expect(result).toHaveLength(1);
-    expect(result[0].player).toBe('inline-script'); // first occurrence wins
-  });
-});
-
-/* ========================================================================== */
-/* TESTS: Video entry normalization                                         */
-/* ========================================================================== */
-
-describe('makeVideoEntry', () => {
-  it('normalizes HLS video entry', () => {
-    const video = {
-      src: 'blob:https://example.com/xyz',
-      poster: 'https://example.com/thumb.jpg',
-      mediaType: 'hls',
-      hlsManifest: 'https://cdn.example.com/stream.m3u8',
-    };
-    const entry = makeVideoEntry(video, 'Example Page');
-    expect(entry.src).toBe('https://cdn.example.com/stream.m3u8');
-    expect(entry.poster).toBe('https://example.com/thumb.jpg');
-    expect(entry.tab).toBe('Example Page');
-    expect(entry.mediaType).toBe('hls');
-    expect(entry.hlsManifest).toBe('https://cdn.example.com/stream.m3u8');
-  });
-
-  it('normalizes standard video entry', () => {
-    const video = {
-      src: 'https://example.com/video.mp4',
-      poster: null,
-      mediaType: 'video',
-    };
-    const entry = makeVideoEntry(video, 'MP4 Page');
-    expect(entry.src).toBe('https://example.com/video.mp4');
-    expect(entry.mediaType).toBe('video');
-    expect(entry.hlsManifest).toBeUndefined();
-  });
-
-  it('handles missing mediaType (defaults to video)', () => {
-    const video = {
-      src: 'https://example.com/video.webm',
-    };
-    const entry = makeVideoEntry(video, 'WebM Page');
-    expect(entry.mediaType).toBe('video');
-  });
-});
-
-/* ========================================================================== */
-/* TESTS: Storage pipeline (HLS metadata preservation)                      */
-/* ========================================================================== */
-
-describe('Storage pipeline - HLS metadata preservation', () => {
-  it('preserves HLS metadata through dedup', () => {
+describe('Storage pipeline — HLS metadata preservation', () => {
+  it('preserves HLS metadata through dedup (mediaType: "hls", hlsManifest present)', () => {
+    // Simulate a tab with an HLS video element
    const tabResults = [{
      tabTitle: 'HLS Stream Page',
-      result: {
-        videos: [{
-          src: 'https://example.com/stream.m3u8',
-          poster: null,
-          mediaType: 'hls',
-          hlsManifest: 'https://example.com/stream.m3u8',
-        }],
-        videoCount: 1,
-      },
+      frames: [{
+        result: {
+          videos: [{
+            src: 'https://example.com/stream.m3u8',
+            poster: null,
+            area: 1920 * 1080,
+            width: 1920,
+            height: 1080,
+            mediaType: 'hls',
+            hlsManifest: 'https://example.com/stream.m3u8',
+          }],
+          videoCount: 1,
+          sources: [],
+          audios: 0,
+        },
+      }],
    }];

    const { storedItems } = simulateStoragePipeline(tabResults);
+
+    // After fix: mediaType is 'hls' and hlsManifest is preserved
    expect(storedItems[0].mediaType).toBe('hls');
    expect(storedItems[0].hlsManifest).toBe('https://example.com/stream.m3u8');
  });

-  it('preserves hlsManifest for live streams', () => {
+  it('preserves hlsManifest through dedup for live streams', () => {
    const tabResults = [{
      tabTitle: 'Live Stream',
-      result: {
-        videos: [{
-          src: 'https://cdn.example.com/live.m3u8',
-          poster: 'https://cdn.example.com/thumb.jpg',
-          mediaType: 'hls',
-          hlsManifest: 'https://cdn.example.com/live.m3u8',
-        }],
-        videoCount: 1,
-      },
+      frames: [{
+        result: {
+          videos: [{
+            src: 'https://cdn.example.com/live.m3u8',
+            poster: 'https://cdn.example.com/thumb.jpg',
+            area: 1280 * 720,
+            width: 1280,
+            height: 720,
+            mediaType: 'hls',
+            hlsManifest: 'https://cdn.example.com/live.m3u8',
+          }],
+          videoCount: 1,
+          sources: [],
+          audios: 0,
+        },
+      }],
    }];

    const { storedItems } = simulateStoragePipeline(tabResults);
+
    expect(storedItems[0].hlsManifest).toBe('https://cdn.example.com/live.m3u8');
    expect(storedItems[0].mediaType).toBe('hls');
  });

-  it('preserves standard video entries correctly', () => {
+  it('Standard video entries are stored correctly', () => {
    const tabResults = [{
      tabTitle: 'MP4 Page',
-      result: {
-        videos: [{
-          src: 'https://example.com/video.mp4',
-          poster: 'https://example.com/thumb.jpg',
-          mediaType: 'video',
-        }],
-        videoCount: 1,
-      },
+      frames: [{
+        result: {
+          videos: [{
+            src: 'https://example.com/video.mp4',
+            poster: 'https://example.com/thumb.jpg',
+            area: 640 * 480,
+            width: 640,
+            height: 480,
+            mediaType: 'video',
+            hlsManifest: null,
+          }],
+          videoCount: 1,
+          sources: [],
+          audios: 0,
+        },
+      }],
    }];

    const { storedItems } = simulateStoragePipeline(tabResults);
+
    expect(storedItems[0].src).toBe('https://example.com/video.mp4');
    expect(storedItems[0].mediaType).toBe('video');
    expect(storedItems[0].poster).toBe('https://example.com/thumb.jpg');
    expect(storedItems[0].tab).toBe('MP4 Page');
  });
+});

-  it('deduplicates across tabs by hlsManifest', () => {
-    const tabResults = [
-      {
-        tabTitle: 'Tab 1',
-        result: {
-          videos: [{
-            src: 'https://example.com/stream.m3u8',
-            poster: null,
-            mediaType: 'hls',
-            hlsManifest: 'https://example.com/stream.m3u8',
-          }],
-          videoCount: 1,
-        },
-      },
-      {
-        tabTitle: 'Tab 2',
-        result: {
-          videos: [{
-            src: 'https://example.com/stream.m3u8',
-            poster: null,
-            mediaType: 'hls',
-            hlsManifest: 'https://example.com/stream.m3u8',
-          }],
-          videoCount: 1,
-        },
-      },
-    ];
+describe('Storage pipeline — corrected HLS metadata preservation', () => {
+  /**
+   * This is what the pipeline SHOULD look like after fixing the bug.
+   * The dedup loop should copy mediaType and hlsManifest from the scraped
+   * result into the stored item.
+   */
+  function simulateStoragePipelineFixed(tabResults) {
+    const seen = new Map();
+    let totalFound = 0;

-    const { storedItems } = simulateStoragePipeline(tabResults);
-    expect(storedItems).toHaveLength(1);
-    expect(storedItems[0].tab).toBe('Tab 1'); // first tab wins
-  });
+    for (const group of tabResults) {
+      for (const r of group.frames) {
+        if (!r.result) continue;
+        for (const v of r.result.videos) {
+          totalFound++;
+          const key = (v.src || '(empty)') + '||' + (v.poster || '(none)');
+          if (!seen.has(key)) {
+            const item = {
+              url: v.src || v.poster || '',
+              poster: v.poster || null,
+              tab: group.tabTitle,
+            };
+            if (v.src) item.src = v.src;
+            // FIX: copy HLS metadata
+            if (v.mediaType) item.mediaType = v.mediaType;
+            if (v.hlsManifest) item.hlsManifest = v.hlsManifest;
+            seen.set(key, item);
+          }
+        }
+      }
+    }

-  it('keeps different HLS streams from same tab', () => {
+    const items = [...seen.values()].filter(v => {
+      const url = v.src || v.url || '';
+      return url.startsWith('http://') || url.startsWith('https://');
+    });
+
+    const storedItems = items.map(v => ({
+      url: v.url,
+      src: v.src || v.url,
+      poster: v.poster,
+      tab: v.tab,
+      mediaType: v.mediaType || 'video',
+      hlsManifest: v.hlsManifest || undefined,
+    }));
+
+    return { storedItems, totalFound };
+  }
+
+  it('FIXED: HLS metadata survives dedup when mediaType and hlsManifest are copied', () => {
    const tabResults = [{
-      tabTitle: 'Mixed Page',
-      result: {
-        videos: [{
-          src: 'https://example.com/live.m3u8',
-          poster: null,
-          mediaType: 'hls',
-          hlsManifest: 'https://example.com/live.m3u8',
-        }],
-        videoCount: 1,
-      },
-    }, {
-      tabTitle: 'Recording Page',
-      result: {
-        videos: [{
-          src: 'https://example.com/recording.mp4',
-          poster: 'https://example.com/thumb.jpg',
-          mediaType: 'video',
-        }],
-        videoCount: 1,
-      },
+      tabTitle: 'HLS Stream Page',
+      frames: [{
+        result: {
+          videos: [{
+            src: 'https://example.com/stream.m3u8',
+            poster: null,
+            area: 1920 * 1080,
+            width: 1920,
+            height: 1080,
+            mediaType: 'hls',
+            hlsManifest: 'https://example.com/stream.m3u8',
+          }],
+          videoCount: 1,
+          sources: [],
+          audios: 0,
+        },
+      }],
    }];

-    const { storedItems } = simulateStoragePipeline(tabResults);
-    expect(storedItems).toHaveLength(2);
+    const { storedItems } = simulateStoragePipelineFixed(tabResults);
+
    expect(storedItems[0].mediaType).toBe('hls');
-    expect(storedItems[1].mediaType).toBe('video');
+    expect(storedItems[0].hlsManifest).toBe('https://example.com/stream.m3u8');
  });

-  it('skips tabs with no video results', () => {
-    const tabResults = [
-      { tabTitle: 'Empty Tab', result: null },
-      { tabTitle: 'No Videos', result: { videos: [], videoCount: 0 } },
-      {
-        tabTitle: 'Has Video',
+  it('FIXED: Mixed HLS and standard entries both preserve metadata', () => {
+    const tabResults = [{
+      tabTitle: 'Mixed Page',
+      frames: [{
        result: {
          videos: [{
-            src: 'https://example.com/video.mp4',
+            src: 'https://example.com/live.m3u8',
            poster: null,
-            mediaType: 'video',
+            area: 1920 * 1080,
+            width: 1920,
+            height: 1080,
+            mediaType: 'hls',
+            hlsManifest: 'https://example.com/live.m3u8',
          }],
          videoCount: 1,
        },
+      }, {
+        result: {
+          videos: [{
+            src: 'https://example.com/recording.mp4',
+            poster: 'https://example.com/thumb.jpg',
+            area: 1280 * 720,
+            width: 1280,
+            height: 720,
+            mediaType: 'video',
+            hlsManifest: null,
+          }],
+          videoCount: 1,
+        },
+      }],
+    }];
+
+    const { storedItems } = simulateStoragePipelineFixed(tabResults);
+
+    // Largest video (HLS)
+    expect(storedItems[0].mediaType).toBe('hls');
+    expect(storedItems[0].hlsManifest).toBe('https://example.com/live.m3u8');
+
+    // Second video (standard)
+    expect(storedItems[1].mediaType).toBe('video');
+    expect(storedItems[1].hlsManifest).toBeUndefined();
+  });
+});
+
+describe('ScrapeFn — HLS detection from DOM elements', () => {
+  it('detects HLS from data-hls attribute', () => {
+    const videoEl = {
+      getAttribute: (attr) => {
+        if (attr === 'data-hls') return 'https://example.com/stream.m3u8';
+        if (attr === 'src') return null;
+        if (attr === 'data-video') return null;
+        if (attr === 'data-mp4') return null;
+        if (attr === 'data-webm') return null;
+        if (attr === 'data-poster') return null;
+        return null;
+      },
+      poster: '',
+      currentSrc: '',
+      src: '',
+      clientWidth: 1920,
+      clientHeight: 1080,
+      sources: [],
+    };
+
+    const result = simulateScrapeFn([videoEl]);
+    expect(result.videos[0].mediaType).toBe('hls');
+    expect(result.videos[0].hlsManifest).toBe('https://example.com/stream.m3u8');
+  });
+
+  it('detects HLS from data-hls-manifest attribute', () => {
+    const videoEl = {
+      getAttribute: (attr) => {
+        if (attr === 'data-hls-manifest') return 'https://example.com/live.m3u8';
+        if (attr === 'data-hls') return null;
+        return null;
+      },
+      poster: '',
+      currentSrc: '',
+      src: '',
+      clientWidth: 1280,
+      clientHeight: 720,
+      sources: [],
+    };
+
+    const result = simulateScrapeFn([videoEl]);
+    expect(result.videos[0].mediaType).toBe('hls');
+    expect(result.videos[0].hlsManifest).toBe('https://example.com/live.m3u8');
+  });
+
+  it('detects HLS from <source> child with m3u8 URL', () => {
+    const videoEl = {
+      getAttribute: () => null,
+      poster: '',
+      currentSrc: '',
+      src: '',
+      clientWidth: 1920,
+      clientHeight: 1080,
+      sources: [{ src: 'https://example.com/stream.m3u8' }],
+    };
+
+    const result = simulateScrapeFn([videoEl]);
+    expect(result.videos[0].mediaType).toBe('hls');
+  });
+
+  it('does NOT detect HLS for standard MP4 video', () => {
+    const videoEl = {
+      getAttribute: (attr) => {
+        if (attr === 'src') return null;
+        if (attr === 'data-hls') return null;
+        if (attr === 'data-hls-manifest') return null;
+        return null;
+      },
+      poster: '',
+      currentSrc: 'https://example.com/video.mp4',
+      src: 'https://example.com/video.mp4',
+      clientWidth: 1920,
+      clientHeight: 1080,
+      sources: [],
+    };
+
+    const result = simulateScrapeFn([videoEl]);
+    expect(result.videos[0].mediaType).toBe('video');
+    expect(result.videos[0].hlsManifest).toBeNull();
+  });
+
+  it('picks the largest video element', () => {
+    const videos = [
+      {
+        getAttribute: () => null,
+        poster: '',
+        currentSrc: 'https://example.com/small.mp4',
+        src: 'https://example.com/small.mp4',
+        clientWidth: 320,
+        clientHeight: 240,
+        sources: [],
+      },
+      {
+        getAttribute: () => null,
+        poster: '',
+        currentSrc: 'https://example.com/large.mp4',
+        src: 'https://example.com/large.mp4',
+        clientWidth: 1920,
+        clientHeight: 1080,
+        sources: [],
      },
    ];

-    const { storedItems } = simulateStoragePipeline(tabResults);
-    expect(storedItems).toHaveLength(1);
-    expect(storedItems[0].tab).toBe('Has Video');
+    const result = simulateScrapeFn(videos);
+    expect(result.videos.length).toBe(1); // only largest is picked
+    expect(result.videos[0].src).toBe('https://example.com/large.mp4');
  });
 });
@@ -1,17 +1,10 @@
 /**
- * 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 (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;
@@ -21,10 +14,6 @@ const panelsEl = document.getElementById('panels');
 /** Track all Hls instances so we can destroy them on unload. */
 const hlsInstances = new Map();

-/* ======================================================================== */
-/* HLS helpers                                                              */
-/* ======================================================================== */
-
 /** Destroy the Hls instance attached to a video element (if any). */
 function destroyHls(video) {
  const inst = hlsInstances.get(video);
@@ -34,40 +23,63 @@ function destroyHls(video) {
  }
 }

-/**
- * Play an HLS manifest on a <video> element using hls.js or native Safari.
- */
+/** 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);
+}
+
+/** Play an HLS manifest on a <video> element using hls.js or native Safari. */
 function playHls(video, manifestUrl, panel) {
+  // Safari has native HLS support — just assign the source
  if (!window.Hls || !window.Hls.isSupported()) {
+    console.log('[goon-viewer] Native HLS support detected, using direct source');
    video.src = manifestUrl;
    const p = video.play();
-    if (p) p.catch(() => {});
+    if (p) p.catch(() => { /* autoplay blocked — user interaction required */ });
    return;
  }

+  // Clean up any prior instance on this element
  destroyHls(video);

-  const hls = new window.Hls(HLS_CONFIG);
+  const hls = new window.Hls({
+    enableWorker: true,
+    lowLatencyMode: false,
+    maxBufferLength: 30,
+    maxMaxBufferLength: 60,
+  });
+
  hlsInstances.set(video, hls);

  hls.on(window.Hls.Events.MANIFEST_PARSED, () => {
+    console.log('[goon-viewer] HLS manifest parsed, playing');
    const p = video.play();
-    if (p) p.catch(() => {});
+    if (p) p.catch(() => { /* autoplay blocked */ });
+  });
+
+  hls.on(window.Hls.Events.LEVEL_SWITCHED, () => {
+    console.log('[goon-viewer] HLS quality level switched');
  });

  hls.on(window.Hls.Events.ERROR, (_event, data) => {
-    if (!data.fatal) return;
-
-    if (data.type === window.Hls.ErrorTypes.NETWORK_ERROR) {
-      showError(panel, 'Stream expired - re-scan to get fresh URLs.');
-      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);
+    console.warn('[goon-viewer] HLS error:', data.type, data.details);
+    if (data.fatal) {
+      if (data.type === window.Hls.ErrorTypes.NETWORK_ERROR) {
+        console.warn('[goon-viewer] Fatal network error — stream may have expired');
+        showError(panel, 'Stream expired — re-scan to get fresh URLs.');
+        hls.destroy();
+        hlsInstances.delete(video);
+      } else if (data.type === window.Hls.ErrorTypes.MEDIA_ERROR) {
+        console.log('[goon-viewer] Fatal media error, attempting recovery');
+        hls.recoverMediaError();
+      } else {
+        showError(panel, 'Playback error — unable to recover.');
+        hls.destroy();
+        hlsInstances.delete(video);
+      }
    }
  });

@@ -77,120 +89,106 @@ function playHls(video, manifestUrl, panel) {

 /**
 * Load hls.js from CDN. Returns a Promise that resolves when ready.
+ * Skips loading if Hls is already defined (native Safari or prior load).
 */
 function loadHlsJs() {
  return new Promise((resolve, reject) => {
    if (window.Hls && window.Hls.isSupported) {
+      console.log('[goon-viewer] hls.js already loaded');
      resolve();
      return;
    }
+    console.log('[goon-viewer] Loading hls.js from CDN...');
    const script = document.createElement('script');
    script.src = HLS_CDN;
-    script.onload = () => resolve();
-    script.onerror = () => reject(new Error('Hls.js CDN unavailable'));
+    script.onload = () => {
+      console.log('[goon-viewer] hls.js loaded successfully');
+      resolve();
+    };
+    script.onerror = () => {
+      console.warn('[goon-viewer] Failed to load hls.js from CDN — HLS streams will not play');
+      reject(new Error('Hls.js CDN unavailable'));
+    };
    document.head.appendChild(script);
  });
 }

-/* ======================================================================== */
-/* UI helpers                                                               */
-/* ======================================================================== */
-
-/** 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);
-}
-
-/** Create a video element with standard autoplay attributes. */
-function createVideoElement() {
-  const video = document.createElement('video');
-  video.autoplay = true;
-  video.muted = true;
-  video.loop = true;
-  video.playsInline = true;
-  return video;
-}
-
-/**
- * Create a single panel (video or empty).
- * Returns { panel, hlsEntry } — hlsEntry is set for deferred HLS playback.
- */
-function createPanel(entry, tag) {
-  const panel = document.createElement('div');
-  panel.classList.add('panel');
-
-  if (!entry) {
-    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 };
-}
-
-/* ======================================================================== */
-/* Init                                                                     */
-/* ======================================================================== */
-
+// Fetch stored video URLs and render panels
 async function init() {
+  console.log('[goon-viewer] init called, id:', id, 'url:', location.href);
+
  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 = '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;
+
+  // Collect HLS entries so we can play them after hls.js loads
  const hlsEntries = [];

+  // Create NxN panels
  for (let i = 0; i < totalPanels; i++) {
-    const entry = (typeof videoUrls[i] === 'object') ? videoUrls[i] : null;
-    const { panel, hlsEntry } = createPanel(entry, tags[i]);
+    const panel = document.createElement('div');
+    panel.classList.add('panel');
+
+    if (i < videoUrls.length && videoUrls[i]) {
+      const entry = (typeof videoUrls[i] === 'object') ? videoUrls[i] : { src: videoUrls[i] };
+      const mediaType = entry.mediaType || 'video';
+      const video = document.createElement('video');
+      video.autoplay = true;
+      video.muted = true;
+      video.loop = true;
+      video.playsInline = true;
+
+      // Set poster if available
+      if (entry.poster) {
+        video.poster = entry.poster;
+      }
+
+      if (mediaType === 'hls' && entry.hlsManifest) {
+        // HLS stream — defer playback until hls.js is loaded
+        video.dataset.hlsManifest = entry.hlsManifest;
+        video.dataset.mediaType = 'hls';
+        console.log('[goon-viewer] panel', i + 1, '/', totalPanels, ': HLS', entry.hlsManifest);
+        hlsEntries.push({ video, manifest: entry.hlsManifest, panel });
+      } else {
+        // Direct video source
+        video.src = entry.src || entry.url || '';
+        console.log('[goon-viewer] panel', i + 1, '/', totalPanels, ':', video.src);
+      }
+
+      panel.appendChild(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);
+      }
+    } 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)`;

@@ -199,8 +197,9 @@ async function init() {
    try {
      await loadHlsJs();
    } catch (e) {
+      console.warn('[goon-viewer] HLS playback unavailable:', e.message);
      for (const { panel } of hlsEntries) {
-        showError(panel, 'HLS player unavailable - check network.');
+        showError(panel, 'HLS player unavailable — check network.');
      }
      return;
    }
@@ -212,6 +211,7 @@ async function init() {

 // Clean up storage entry and HLS instances when the viewer is closed
 window.addEventListener('unload', async () => {
+  // Destroy all HLS instances first
  for (const video of [...hlsInstances.keys()]) {
    destroyHls(video);
  }
Author	SHA1	Message	Date
robot	3c7b563021	test: add config validation suite (43/43 tests) CI / test (pull_request) Successful in 14s Details Adds 4 regression tests: - vite.config.ts entry modules must exist as source files - content.js must NOT use inline script injection (textContent) - interceptors.js must be a standalone IIFE file - manifest.json content_scripts must reference content.js Prevents future build-breaking phantom entry point errors (the probeFn.js/scrapeFn.js issue kfj001 hit).	2026-08-11 08:10:18 +00:00
robot	0a74332af9	fix: remove non-existent probeFn.js and scrapeFn.js from Vite build entry points CI / test (pull_request) Successful in 15s Details These files were added as Rollup entry points but never created as actual source files — probeFn and scrapeFn are defined inline in index.js. The missing entry points caused "Could not resolve entry module" on build.	2026-08-11 07:23:05 +00:00
robot	a621db9674	fix: use script.src for content.js interceptor injection to bypass CSP CI / test (pull_request) Successful in 14s Details The inline script.textContent injection in content.js violated the strict CSP on sites like Pornhub ('script-src' without 'unsafe-inline'). Move interceptor code to a separate interceptors.js file and inject via script.src = chrome.runtime.getURL('interceptors.js'). Chrome treats extension-originated <script src> as content scripts — not as page inline code — so the page's CSP does not apply. - New src/inject/interceptors.js with all main-world interceptor code - content.js now creates <script src> instead of <script textContent> - Vite config updated to build interceptors.js to dist/	2026-08-11 06:43:54 +00:00
Hermes Agent	0d4b62c485	fix: guard video.play() for jsdom and fix Hls mock case mismatch CI / test (pull_request) Successful in 16s Details - Defensive null check on video.play() return value (jsdom returns undefined) - Fix test mock: win.Hls (not win.HLS) to match viewer.js window.Hls reference - All 39/39 tests now pass	2026-08-11 04:42:28 +00:00
Hermes Agent	23a2af6cad	fix: scan main frame only, deep-probe HLS, always store mediaType/hlsManifest - Run scrapeFn in main frame only to avoid iframe noise (23 thumbnails) - Deep-walk player objects up to depth 5 for .m3u8 URLs - Always include mediaType and hlsManifest in stored items - When blob URL detected, substitute with HLS manifest from probe - Add integration tests for storage pipeline and viewer rendering - Add eslintignore for dist/	2026-08-11 04:29:08 +00:00