Goon Plugin

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

# 1. Install deps
npm i

# 2. Run in watch mode
npm run dev

# 3. Build for distribution
npm run build

Loading in Chrome

1. Open chrome://extensions/
2. Enable Developer mode (top-right)
3. Click Load unpacked → select the project root folder (where manifest.json is located)

Project structure

manifest.json       — Extension manifest (MV3)
package.json        — Dev tooling (Vite + Vitest + TS)
vite.config.ts      — Build config
src/
  background/       — Service worker (MV3 background)
  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)

Recommended extensions (VS Code)

• Chrome Extension Developer (extension-list-viewer)
• ESLint
• Prettier

VS Code workspace

Open goon_plugin.code-workspace to get the project with recommended extensions pre-installed.