# VGMdb Collection Manager — Chrome Extension

> **Status:** Active
> **Category:** Browser Extensions
> **Language:** JavaScript (Chrome Extension, Manifest V3)
> **Script files:** `manifest.json`, `content.js`, `background.js`, `style.css`

## Purpose

A Chrome browser extension that overlays a management panel on any VGMdb album page (`vgmdb.net/album/*`). It checks whether the current album URL exists in a linked Google Sheet collection, and allows you to add, update the folder label, or remove it — all without leaving the album page.

## Requirements

### Browser
- Google Chrome (or any Chromium-based browser supporting Manifest V3)

### External Services
- A Google account with access to a specific Google Spreadsheet
- The extension uses OAuth2 via the Chrome Identity API — no manual token management required

### Installation
This extension is loaded as an unpacked extension (not published to the Chrome Web Store):

1. Open Chrome and navigate to `chrome://extensions`
2. Enable **Developer mode** (toggle in top-right)
3. Click **Load unpacked**
4. Select the `vgmdb-chrome-script/` folder
5. On first use, Chrome will prompt you to sign in with Google to grant Sheets access

## How It Works

| Component | Role |
|-----------|------|
| `content.js` | Injected into every `vgmdb.net/album/*` page; creates the floating UI panel |
| `background.js` | Service worker; handles OAuth2 token retrieval and all Google Sheets API calls |
| `style.css` | Styles the injected panel |

### Workflow

1. When you open a VGMdb album page, `content.js` injects a panel and sends a `checkUrl` message to the background worker.
2. The background worker fetches column A:B from the linked Google Sheet and searches for a matching URL.
3. If found: the panel shows the album's current folder name with options to **Update** the folder or **Remove** the entry.
4. If not found: the panel shows an **Add to Collection** form where you enter a folder name.

### Google Sheets API Operations

| Action | API Call |
|--------|----------|
| Check if URL exists | `GET values/Sheet1!A:B` |
| Add new entry | `POST values/Sheet1!A:B:append` |
| Update folder name | `PUT values/Sheet1!B{row}` |
| Remove entry | `POST :batchUpdate` (deleteDimension) |

## Input

| Item | Description | Example |
|------|-------------|---------|
| Current page URL | Automatically captured from the browser tab | `https://vgmdb.net/album/1234` |
| Folder name | User-entered label for organising albums in the sheet | `"Soundtracks"` |

## Output

| Item | Description |
|------|-------------|
| Google Sheet row | URL + folder name written to the configured spreadsheet |
| Panel status | Inline feedback message ("Success! Refreshing page..." or error text) |

## Notes

- **Hardcoded Spreadsheet ID:** `1Gz2A_xn2JSvENJH20aCEUXR1i01rrCvM3P2_NXyU-vs` — this is baked into `background.js`. To use a different sheet, edit this value and reload the extension.
- **Hardcoded Sheet name:** `Sheet1` — change in `background.js` if your tab is named differently.
- **Hardcoded OAuth2 Client ID:** `624876005500-0naq9o2l314ukj3virdt1lh0s9n9k5n0.apps.googleusercontent.com` in `manifest.json`. This client ID is tied to a specific Google Cloud project. To deploy independently, create your own OAuth2 client ID in Google Cloud Console and replace this value.
- The `claud/` subdirectory contains an older or alternate version of the extension including a packaged `.xpi` file — this is unrelated to the top-level Chrome extension and appears to be a development artefact.
- URL parameters (query strings) are stripped before matching (`window.location.href.split('?')[0]`), so `album/1234?ref=search` and `album/1234` are treated as the same entry.

## Related Scripts

- [VGMdb Collection Extension (!vgmdb-collection)](vgmdb-collection-extension.md) — a newer iteration of this same extension with an added close button and a different OAuth2 client ID
- [VGMdb Firefox Script](vgmdb-firefox-script.md) — packaged Firefox equivalent (.xpi)