From 4a39065d900eba4f2320dd23255962eb0c159742 Mon Sep 17 00:00:00 2001
From: kfj001 <kfj001@gmail.com>
Date: Sun, 31 May 2026 11:29:51 -0700
Subject: [PATCH] core functionality complete

---
 README.md              |  17 +++-
 manifest.json          |   8 +-
 src/popup/popup.css    |  53 ------------
 src/popup/popup.html   |  17 ----
 src/popup/popup.js     |  19 ----
 src/viewer/index.css   | 101 ++++++++++++++++++++++
 src/viewer/index.html  |  22 +++++
 src/viewer/index.js    | 191 +++++++++++++++++++++++++++++++++++++++++
 src/viewer/viewer.css  |  54 ++++++++++++
 src/viewer/viewer.html |  13 +++
 src/viewer/viewer.js   |  61 +++++++++++++
 vite.config.ts         |   3 +-
 12 files changed, 463 insertions(+), 96 deletions(-)
 delete mode 100644 src/popup/popup.css
 delete mode 100644 src/popup/popup.html
 delete mode 100644 src/popup/popup.js
 create mode 100644 src/viewer/index.css
 create mode 100644 src/viewer/index.html
 create mode 100644 src/viewer/index.js
 create mode 100644 src/viewer/viewer.css
 create mode 100644 src/viewer/viewer.html
 create mode 100644 src/viewer/viewer.js

diff --git a/README.md b/README.md
index 1206466..331487b 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,13 @@
 # Goon Plugin
 
-Chrome extension scaffold (Manifest V3).
+A Chrome extension (Manifest V3) that finds videos on the current page and displays them in a 2x2 grid.
+
+## Features
+
+- Click the extension icon → **"Find Videos"** to scan the current tab for all `<video>` elements
+- Videos are listed in the popup for reference (clickable links, "Copy All URLs" button)
+- Click **"Open Viewer"** to open a new window with videos in a 2x2 grid (autoplay muted)
+- Click **"Clear"** to reset the stored video list
 
 ## Getting started
 
@@ -29,8 +36,14 @@ package.json        — Dev tooling (Vite + Vitest + TS)
 vite.config.ts      — Build config
 src/
   background/       — Service worker (MV3 background)
-  popup/            — Popup UI (HTML + CSS + JS)
   content/          — Content script
+  viewer/           — Popup UI + video viewer
+    index.html      — Popup (Find Videos, Open Viewer buttons)
+    index.js        — Popup logic (scans current tab for videos)
+    index.css       — Popup styles
+    viewer.html     — Viewer page (2x2 video grid in new window)
+    viewer.js       — Viewer logic (renders video panels)
+    viewer.css      — Viewer grid styles
   icons/            — Extension icons (place .png files here)
 ```
 
diff --git a/manifest.json b/manifest.json
index f4d4e83..e1525be 100644
--- a/manifest.json
+++ b/manifest.json
@@ -6,17 +6,17 @@
   "permissions": [
     "storage",
     "tabs",
-    "activeTab"
+    "scripting"
   ],
   "host_permissions": [
     "<all_urls>"
   ],
   "background": {
-    "service_worker": "src/background/background.js",
+    "service_worker": "background.js",
     "type": "module"
   },
   "action": {
-    "default_popup": "src/popup/popup.html",
+    "default_popup": "viewer/index.html",
     "default_icon": {
       "16": "icons/icon16.png",
       "48": "icons/icon48.png",
@@ -26,7 +26,7 @@
   "content_scripts": [
     {
       "matches": ["<all_urls>"],
-      "js": ["src/content/content.js"],
+      "js": ["content.js"],
       "run_at": "document_idle"
     }
   ],
diff --git a/src/popup/popup.css b/src/popup/popup.css
deleted file mode 100644
index bca3ea4..0000000
--- a/src/popup/popup.css
+++ /dev/null
@@ -1,53 +0,0 @@
-:root {
-  --bg: #ffffff;
-  --text: #1a1a2e;
-  --accent: #4361ee;
-  --accent-hover: #3a56d4;
-  --border: #e2e8f0;
-  --radius: 8px;
-}
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  background: var(--bg);
-  color: var(--text);
-  min-width: 320px;
-  padding: 16px;
-}
-
-#app {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-h1 {
-  font-size: 18px;
-  font-weight: 600;
-}
-
-#status {
-  font-size: 14px;
-  color: #64748b;
-}
-
-button {
-  padding: 8px 16px;
-  background: var(--accent);
-  color: white;
-  border: none;
-  border-radius: var(--radius);
-  font-size: 14px;
-  cursor: pointer;
-  transition: background 150ms;
-}
-
-button:hover {
-  background: var(--accent-hover);
-}
diff --git a/src/popup/popup.html b/src/popup/popup.html
deleted file mode 100644
index dbb9e9c..0000000
--- a/src/popup/popup.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Goon Plugin</title>
-  <link rel="stylesheet" href="popup.css">
-</head>
-<body>
-  <div id="app">
-    <h1>Goon Plugin</h1>
-    <p id="status">Ready</p>
-    <button id="action-btn">Click me</button>
-  </div>
-  <script src="popup.js" type="module"></script>
-</body>
-</html>
diff --git a/src/popup/popup.js b/src/popup/popup.js
deleted file mode 100644
index 8991435..0000000
--- a/src/popup/popup.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * popup.js — UI logic for the extension popup.
- * Runs inside the popup iframe; uses chrome.runtime / chrome.storage APIs.
- */
-
-const actionBtn = document.getElementById('action-btn');
-const statusEl = document.getElementById('status');
-
-actionBtn.addEventListener('click', async () => {
-  // TODO: replace with actual extension logic
-  try {
-    const result = await chrome.storage.local.get(['counter']);
-    const count = (result.counter ?? 0) + 1;
-    await chrome.storage.local.set({ counter: count });
-    statusEl.textContent = `Clicked ${count} time${count === 1 ? '' : 's'}`;
-  } catch (err) {
-    statusEl.textContent = `Error: ${err.message}`;
-  }
-});
diff --git a/src/viewer/index.css b/src/viewer/index.css
new file mode 100644
index 0000000..2266b6e
--- /dev/null
+++ b/src/viewer/index.css
@@ -0,0 +1,101 @@
+:root {
+  --bg: #ffffff;
+  --text: #1a1a2e;
+  --accent: #4361ee;
+  --accent-hover: #3a56d4;
+  --border: #e2e8f0;
+  --radius: 8px;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  background: var(--bg);
+  color: var(--text);
+  min-width: 360px;
+  padding: 16px;
+}
+
+#app {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+h1 {
+  font-size: 18px;
+  font-weight: 600;
+}
+
+button {
+  padding: 8px 16px;
+  background: var(--accent);
+  color: white;
+  border: none;
+  border-radius: var(--radius);
+  font-size: 14px;
+  cursor: pointer;
+  transition: background 150ms;
+}
+
+button:hover {
+  background: var(--accent-hover);
+}
+
+.btn-row {
+  display: flex;
+  gap: 8px;
+  justify-content: space-between;
+}
+
+.btn-secondary {
+  background: #64748b;
+}
+
+.btn-secondary:hover {
+  background: #475569;
+}
+
+.status {
+  color: #64748b;
+  font-size: 12px;
+  min-height: 16px;
+}
+
+.video-list {
+  max-height: 180px;
+  overflow-y: auto;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 8px;
+  font-size: 12px;
+  background: #f8fafc;
+}
+
+.video-item {
+  display: block;
+  padding: 4px 0;
+  color: var(--accent);
+  text-decoration: none;
+  word-break: break-all;
+  font-size: 11px;
+  line-height: 1.4;
+}
+
+.video-item:hover {
+  text-decoration: underline;
+}
+
+.copy-btn {
+  margin-top: 8px;
+  width: 100%;
+  padding: 6px 12px;
+  font-size: 12px;
+  background: var(--accent);
+  border-radius: var(--radius);
+}
diff --git a/src/viewer/index.html b/src/viewer/index.html
new file mode 100644
index 0000000..97fd49a
--- /dev/null
+++ b/src/viewer/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Goon Plugin</title>
+  <link rel="stylesheet" href="../viewerIndex.css">
+</head>
+<body>
+  <div id="app">
+    <h1>Goon Plugin</h1>
+    <button id="find-btn">Find Videos</button>
+    <div id="video-list" class="video-list" style="display:none;"></div>
+    <div id="status" class="status" style="min-height:16px;"></div>
+    <div id="btn-row" class="btn-row" style="display:none;">
+      <button id="clear-btn" class="btn-secondary">Clear</button>
+      <button id="open-btn">Open Viewer</button>
+    </div>
+  </div>
+  <script src="index.js" type="module"></script>
+</body>
+</html>
diff --git a/src/viewer/index.js b/src/viewer/index.js
new file mode 100644
index 0000000..570132f
--- /dev/null
+++ b/src/viewer/index.js
@@ -0,0 +1,191 @@
+/**
+ * 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 findBtn = document.getElementById('find-btn');
+const clearBtn = document.getElementById('clear-btn');
+const openBtn = document.getElementById('open-btn');
+const statusEl = document.getElementById('status');
+const listEl = document.getElementById('video-list');
+const btnRow = document.getElementById('btn-row');
+
+listEl.style.wordBreak = 'break-word';
+listEl.style.whiteSpace = 'pre-wrap';
+
+function setStatus(msg) {
+  statusEl.textContent = msg;
+  console.log('[goon]', msg);
+}
+
+/** Load the current video list from storage. */
+function loadVideos() {
+  return chrome.storage.local.get(STORAGE_KEY).then(data => data[STORAGE_KEY] || []);
+}
+
+/** Render the video list UI from stored URLs. */
+function renderList(urls) {
+  listEl.innerHTML = '';
+  if (!urls || urls.length === 0) {
+    listEl.style.display = 'none';
+    return;
+  }
+  listEl.style.display = 'block';
+
+  for (const url of urls) {
+    const item = document.createElement('a');
+    item.className = 'video-item';
+    item.href = url;
+    item.textContent = url;
+    item.target = '_blank';
+    listEl.appendChild(item);
+  }
+
+  // Copy all URLs button
+  const copyBtn = document.createElement('button');
+  copyBtn.className = 'copy-btn';
+  copyBtn.textContent = 'Copy All URLs';
+  copyBtn.addEventListener('click', () => {
+    navigator.clipboard.writeText(urls.join('\n')).then(() => {
+      copyBtn.textContent = 'Copied!';
+      setTimeout(() => { copyBtn.textContent = 'Copy All URLs'; }, 1500);
+    });
+  });
+  listEl.appendChild(copyBtn);
+}
+
+/** Show the main button row. */
+function showActions() {
+  btnRow.style.display = 'flex';
+  loadVideos().then(urls => {
+    if (urls.length > 0) {
+      renderList(urls);
+      setStatus(`Using ${urls.length} video(s) from last search.`);
+    } else {
+      setStatus('');
+    }
+  });
+}
+
+/* === "Find Videos" — scan the current tab === */
+findBtn.addEventListener('click', async () => {
+  setStatus('Scanning current tab…');
+
+  const tabs = await chrome.tabs.query({ active: true, currentWindow: true });
+  const tab = tabs[0];
+  if (!tab || !tab.url) {
+    setStatus('Cannot access the current tab.');
+    return;
+  }
+
+  // Skip chrome-internal pages
+  if (tab.url.startsWith('chrome://') || tab.url.startsWith('chrome-extension://')
+      || tab.url.startsWith('edge://') || tab.url.startsWith('about:')
+      || tab.url.startsWith('view-source:')) {
+    setStatus('This page cannot be scanned.');
+    return;
+  }
+
+  try {
+    // Check the main frame first, then iframes
+    const results = await chrome.scripting.executeScript({
+      target: { tabId: tab.id, allFrames: true },
+      func: () => {
+        // Count both <video> and elements that might be video-like
+        const videos = Array.from(document.querySelectorAll('video')).map(v => ({
+          src: v.currentSrc || v.src || null,
+          poster: v.poster || null,
+        }));
+        const videoCount = videos.length;
+
+        // Also count <source> tags inside video elements (they point to actual media)
+        const sources = Array.from(document.querySelectorAll('video source[src]')).map(s => s.src);
+
+        // Also check <audio> elements (might have videos inside too)
+        const audios = Array.from(document.querySelectorAll('audio')).length;
+
+        return { videos, videoCount, sources, audios };
+      },
+    });
+
+    // With allFrames: true, results contains one entry per frame (main + iframes)
+    // Dedup by (src, poster) pair to avoid counting same video in multiple frames
+    const seen = new Map();
+    let totalFound = 0;
+    let totalSources = 0;
+    let totalAudios = 0;
+    for (const r of results) {
+      if (!r.result) continue;
+      console.log('[goon] frame:', r.frameId, 'videos:', r.result.videoCount, 'sources:', r.result.sources.length, 'audios:', r.result.audios);
+      for (const v of r.result.videos) {
+        totalFound++;
+        const key = (v.src || '(empty)') + '||' + (v.poster || '(none)');
+        if (!seen.has(key)) {
+          seen.set(key, v);
+        }
+        console.log('[goon] video element:', 'src=', v.src, 'poster=', v.poster);
+      }
+      totalAudios += r.result.audios;
+    }
+    const videoUrls = [...seen.values()].map(v => v.src || v.poster || '').filter(Boolean);
+
+    console.log('[goon] ===== Found', totalFound, 'video elements, unique:', videoUrls.length, 'audio tags:', totalAudios);
+    console.log('[goon] URLs:', videoUrls);
+
+    // Append to existing list (dedup to avoid same video from same page)
+    const existing = await chrome.storage.local.get(STORAGE_KEY);
+    const existingUrls = existing[STORAGE_KEY] || [];
+    const merged = [...existingUrls, ...videoUrls];
+    const deduped = [...new Set(merged)];
+    console.log('[goon] merged', existingUrls.length, '+', videoUrls.length, '→', deduped.length, 'unique total');
+
+    await chrome.storage.local.set({ [STORAGE_KEY]: deduped });
+
+    setStatus(`Found ${videoUrls.length} video(s) in the current tab.`);
+    renderList(videoUrls);
+    btnRow.style.display = 'flex';
+  } catch (e) {
+    setStatus(`Scan failed: ${e.message}`);
+    console.warn('[goon] executeScript failed:', e);
+  }
+});
+
+/* === "Open Viewer" — launch the 2x2 grid === */
+openBtn.addEventListener('click', async () => {
+  const videos = await loadVideos();
+  console.log('[goon] Open Viewer clicked, loaded from storage:', videos, 'count:', videos?.length);
+
+  if (!videos || videos.length === 0) {
+    setStatus('No videos found. Click "Find Videos" first.');
+    return;
+  }
+
+  // Take the first 4 (viewer grid is 2x2)
+  const ids = videos.slice(0, 4);
+  console.log('[goon] opening viewer with', ids.length, 'video URLs:', ids);
+
+  const id = 'goonViewer_' + Date.now();
+  await chrome.storage.local.set({ [id]: ids });
+
+  // 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 viewerUrl = chrome.runtime.getURL('viewer/viewer.html') + '?id=' + id;
+  chrome.windows.create({ url: viewerUrl, width: 1400, height: 900 });
+});
+
+/* === "Clear" — reset the stored list === */
+clearBtn.addEventListener('click', async () => {
+  await chrome.storage.local.remove([STORAGE_KEY]);
+  listEl.style.display = 'none';
+  listEl.innerHTML = '';
+  setStatus('');
+});
+
+/* === Init — restore saved list === */
+showActions();
diff --git a/src/viewer/viewer.css b/src/viewer/viewer.css
new file mode 100644
index 0000000..41f5831
--- /dev/null
+++ b/src/viewer/viewer.css
@@ -0,0 +1,54 @@
+:root {
+  --bg: #1a1a2e;
+  --text: #ffffff;
+  --panel-bg: #16213e;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  background: var(--bg);
+  color: var(--text);
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+}
+
+#panels {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
+  gap: 2px;
+  width: 100%;
+  height: 100%;
+}
+
+.panel {
+  background: var(--panel-bg);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  position: relative;
+}
+
+.panel.empty {
+  opacity: 0.3;
+}
+
+.panel.empty::after {
+  content: 'No video';
+  color: #64748b;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 14px;
+}
+
+.panel video {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
diff --git a/src/viewer/viewer.html b/src/viewer/viewer.html
new file mode 100644
index 0000000..9b84f66
--- /dev/null
+++ b/src/viewer/viewer.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Goon Viewer</title>
+  <link rel="stylesheet" href="viewer.css">
+</head>
+<body>
+  <div id="panels"></div>
+  <script src="viewer.js" type="module"></script>
+</body>
+</html>
diff --git a/src/viewer/viewer.js b/src/viewer/viewer.js
new file mode 100644
index 0000000..ce30ac4
--- /dev/null
+++ b/src/viewer/viewer.js
@@ -0,0 +1,61 @@
+/**
+ * viewer.js — Goon Viewer page logic.
+ * Reads video URLs from chrome.storage and renders them in a 2x2 grid.
+ */
+
+const params = new URLSearchParams(location.search);
+const id = params.get('id');
+const panelsEl = document.getElementById('panels');
+
+// 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, ')');
+
+  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)`;
+  console.log('[goon-viewer]', overlay.textContent);
+
+  // Create exactly 4 panels
+  for (let i = 0; i < 4; i++) {
+    const panel = document.createElement('div');
+    panel.classList.add('panel');
+
+    if (i < videoUrls.length && videoUrls[i]) {
+      const video = document.createElement('video');
+      video.src = videoUrls[i];
+      video.autoplay = true;
+      video.muted = true;
+      video.playsInline = true;
+      console.log('[goon-viewer] panel', i + '/4:', videoUrls[i]);
+      panel.appendChild(video);
+    } else {
+      panel.classList.add('empty');
+    }
+
+    panelsEl.appendChild(panel);
+  }
+}
+
+// Clean up storage entry when the viewer is closed
+window.addEventListener('unload', async () => {
+  if (id) {
+    await chrome.storage.local.remove([id]);
+  }
+});
+
+init();
diff --git a/vite.config.ts b/vite.config.ts
index 2fd66fc..7be67d1 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -55,7 +55,8 @@ export default defineConfig({
       input: {
         background: resolve(__dirname, 'src/background/background.js'),
         content: resolve(__dirname, 'src/content/content.js'),
-        popup: resolve(__dirname, 'src/popup/popup.html'),
+        viewer: resolve(__dirname, 'src/viewer/viewer.html'),
+        viewerIndex: resolve(__dirname, 'src/viewer/index.html'),
       },
       output: {
         entryFileNames: '[name].js',