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).

src/viewer/index.js

@@ -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,45 +64,67 @@ 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           */
-/* ======================================================================== */
+/* === "Find Videos" — scan all tabs in the window === */
+findBtn.addEventListener('click', async () => {
+  setStatus('Scanning tabs…');
 
-/**
- * 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() {
+  // Get all tabs in the current window
+  const allTabs = await chrome.tabs.query({ currentWindow: true });
+
+  // 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 ${tabsToScan.length} tab(s)…`);
+
+  try {
+    // --- Helper: deep object walker that finds .m3u8 URLs up to depth 5 ---
+    const m3u8DeepProbeFn = () => {
       const manifests = [];
       const seen = new Set();
 
       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)) {
@@ -119,26 +132,28 @@ function m3u8DeepProbeFn() {
         }
       }
 
-  // Strategy A: Known player globals (shallow + deep)
+      // Strategy A: Walk known player instances (shallow + deep)
       const playerGlobals = [
         'hls', 'Hls', 'videojs', 'Video', 'flowplayer', 'jwplayer',
         '__hls', '__hls_player', 'player', 'videoPlayer', 'mainPlayer',
-    'fhplayer', '__pj', 'playerInstance',
+        '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
-  for (const v of document.querySelectorAll('video')) {
+      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];
@@ -153,45 +168,74 @@ function m3u8DeepProbeFn() {
           }
         }
       }
-
       // Strategy C: Inline scripts
-  for (const script of document.querySelectorAll('script:not([src])')) {
+      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);
+        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
+      // 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);
+      }
     }
 
-/* ======================================================================== */
-/* 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 => {
+    // 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 => {
+      }).map(v => {
         const area = v.clientWidth * v.clientHeight;
         const rawSrc = v.currentSrc || v.src || '';
         const poster = v.poster || v.getAttribute('data-poster') || null;
@@ -200,12 +244,16 @@ function scrapeFn(hlsManifests) {
         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;
@@ -213,10 +261,10 @@ function scrapeFn(hlsManifests) {
 
         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 with a real playable source
+      // 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://'));
@@ -234,208 +282,104 @@ function scrapeFn(hlsManifests) {
         }
       }
 
+      // 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,
       };
-}
+    };
 
-/* ======================================================================== */
-/* 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) {
+    const results = await Promise.all(
+      tabsToScan.map(async t => {
         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 },
+          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],
           });
-    return results[0]?.result || null;
         } catch {
-    warn('skipping tab', tabId);
+          console.warn('[goon] skipping tab', t.id, ':', t.url);
           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
+    // 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: scrapeResults[i],
+      result: results[i]?.[0]?.result || null,
     })).filter(g => g.result && g.result.videos?.length > 0);
+    const scanned = tabResults.length;
 
-  // Step 4: Dedup across tabs
+    // Dedup across tabs: one entry per unique (hlsManifest/src + poster)
     const seen = new Map();
+    let totalFound = 0;
     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)');
+      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)) {
-        seen.set(key, makeVideoEntry(video, group.tabTitle));
+          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()];
-  const skipped = scrapeResults.filter(r => r === null).length;
+    console.log('[goon] ===== Found', totalFound, 'video element(s) across', tabsToScan.length, 'tab(s), unique:', items.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,
+    // 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]: stored,
+      [STORAGE_KEY]: storedItems,
       [TAGGED_KEY]: items.map(v => v.tab),
     });
-}
 
-/* ======================================================================== */
-/* Event handlers                                                           */
-/* ======================================================================== */
-
-findBtn.addEventListener('click', async () => {
-  setStatus('Scanning tabs...');
-
-  const allTabs = await chrome.tabs.query({ currentWindow: true });
-  const validTabs = filterValidTabs(allTabs);
-
-  if (validTabs.length === 0) {
-    setStatus('No browsable tabs found.');
-    return;
-  }
-
-  setStatus(`Scanning ${validTabs.length} tab(s)...`);
-
-  try {
-    const { items, scanned, skipped } = await scanVideos(validTabs);
-
-    await storeVideos(items);
-
-    const msg = `Found ${items.length} video(s) across ${scanned} tab(s).`;
-    setStatus(skipped > 0 ? `${msg} ${skipped} tab(s) skipped (idle).` : msg);
+    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();

src/viewer/index.test.js

@@ -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();
-  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));
-      }
-    }
-  }
-  const items = [...seen.values()];
+  let totalFound = 0;
 
-  // Storage format
+  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;
+          if (v.mediaType) item.mediaType = v.mediaType;
+          if (v.hlsManifest) item.hlsManifest = v.hlsManifest;
+          seen.set(key, item);
+        }
+      }
+    }
+  }
+
+  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',
+      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',
+      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',
+      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,
-        },
-      },
-    ];
-
-    const { storedItems } = simulateStoragePipeline(tabResults);
-    expect(storedItems).toHaveLength(1);
-    expect(storedItems[0].tab).toBe('Tab 1'); // first tab wins
 });
 
-  it('keeps different HLS streams from same tab', () => {
+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;
+
+    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);
+          }
+        }
+      }
+    }
+
+    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: '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 } = simulateStoragePipelineFixed(tabResults);
+
+    expect(storedItems[0].mediaType).toBe('hls');
+    expect(storedItems[0].hlsManifest).toBe('https://example.com/stream.m3u8');
+  });
+
+  it('FIXED: Mixed HLS and standard entries both preserve metadata', () => {
     const tabResults = [{
       tabTitle: 'Mixed Page',
+      frames: [{
         result: {
           videos: [{
             src: 'https://example.com/live.m3u8',
             poster: null,
+            area: 1920 * 1080,
+            width: 1920,
+            height: 1080,
             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',
+            area: 1280 * 720,
+            width: 1280,
+            height: 720,
             mediaType: 'video',
+            hlsManifest: null,
           }],
           videoCount: 1,
         },
+      }],
     }];
 
-    const { storedItems } = simulateStoragePipeline(tabResults);
-    expect(storedItems).toHaveLength(2);
+    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();
+  });
 });
 
-  it('skips tabs with no video results', () => {
-    const tabResults = [
-      { tabTitle: 'Empty Tab', result: null },
-      { tabTitle: 'No Videos', result: { videos: [], videoCount: 0 } },
-      {
-        tabTitle: 'Has Video',
-        result: {
-          videos: [{
-            src: 'https://example.com/video.mp4',
-            poster: null,
-            mediaType: 'video',
-          }],
-          videoCount: 1,
+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');
   });
 });

src/viewer/viewer.js

@@ -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,41 +23,64 @@ 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;
-
+    console.warn('[goon-viewer] HLS error:', data.type, data.details);
+    if (data.fatal) {
       if (data.type === window.Hls.ErrorTypes.NETWORK_ERROR) {
-      showError(panel, 'Stream expired - re-scan to get fresh URLs.');
+        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.');
+        showError(panel, 'Playback error — unable to recover.');
         hls.destroy();
         hlsInstances.delete(video);
       }
+    }
   });
 
   hls.loadSource(manifestUrl);
@@ -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]);
-    panelsEl.appendChild(panel);
-    if (hlsEntry) hlsEntries.push(hlsEntry);
+    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);
+  }
+
+  // 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);
   }