# 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

```bash
# 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.