59 lines
1.7 KiB
Markdown
59 lines
1.7 KiB
Markdown
# 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.
|