Updates extensions in workspace. Alters plugin to scrape for NxN tabs for videos to display in the matrix.

src/viewer/viewer.js

@@ -1,10 +1,11 @@
 /**
  * viewer.js — Goon Viewer page logic.
- * Reads video URLs from chrome.storage and renders them in a 2x2 grid.
+ * Reads video URLs from chrome.storage and renders them in a dynamic NxN grid.
  */
 
 const params = new URLSearchParams(location.search);
 const id = params.get('id');
+const gridN = parseInt(params.get('grid'), 10) || 2;
 const tags = params.get('tags') ? JSON.parse(params.get('tags')) : [];
 const panelsEl = document.getElementById('panels');
 
@@ -28,11 +29,13 @@ async function init() {
   document.body.style.position = 'relative';
   document.body.insertBefore(overlay, document.body.firstChild);
 
-  overlay.textContent = `Found ${videoUrls.length} video URL(s)`;
+  overlay.textContent = `Found ${videoUrls.length} video URL(s) in ${gridN}x${gridN} grid`;
   console.log('[goon-viewer]', overlay.textContent);
 
-  // Create exactly 4 panels
-  for (let i = 0; i < 4; i++) {
+  const totalPanels = gridN * gridN;
+
+  // Create NxN panels
+  for (let i = 0; i < totalPanels; i++) {
     const panel = document.createElement('div');
     panel.classList.add('panel');
 
@@ -43,7 +46,7 @@ async function init() {
       video.muted = true;
       video.loop = true;
       video.playsInline = true;
-      console.log('[goon-viewer] panel', i + '/4:', videoUrls[i]);
+      console.log('[goon-viewer] panel', i + 1, '/', totalPanels, ':', videoUrls[i]);
       panel.appendChild(video);
 
       // Add tab label if available
@@ -59,6 +62,10 @@ async function init() {
 
     panelsEl.appendChild(panel);
   }
+
+  // Apply dynamic grid
+  panelsEl.style.gridTemplateColumns = `repeat(${gridN}, 1fr)`;
+  panelsEl.style.gridTemplateRows = `repeat(${gridN}, 1fr)`;
 }
 
 // Clean up storage entry when the viewer is closed