MarkTube

A Chrome extension that turns YouTube into a personal knowledge library — mark videos as Watched / Important / Want to Watch, right where you already browse.

Status

🚧 Rebuild in progress. See docs/ROADMAP.md for what's shipped vs planned, and CHANGELOG.md for what changed recently.

Project structure

marktube/
├── src/
│   ├── content/          # Injected into YouTube pages: selectors, borders, buttons
│   ├── sidebar/          # React app rendered inside the sidebar iframe
│   └── background/       # Extension service worker
├── public/                # Static assets (fonts, icons, animations) copied as-is
├── docs/                  # PRD, architecture, roadmap, selector map
├── manifest.json
├── vite.config.content.js # Builds src/content -> dist/assets/content.js
├── vite.config.sidebar.js # Builds src/sidebar -> dist/assets/sidebar.js
└── dist/                  # BUILD OUTPUT ONLY. Never edit by hand. Gitignored.

The one rule that matters

Never manually rename or copy a built file. dist/ is fully regenerated by npm run build every time. If a file needs a different name, change the vite config's entryFileNames — not the file on disk. This is what broke the last version (manifest.json pointed at mainNEWTEST.js, but nothing ever built a file by that name anymore).

Setup

npm install
npm run build       # builds content script + sidebar into dist/

Then in Chrome:

1. Go to chrome://extensions
2. Enable Developer Mode
3. "Load unpacked" → select the dist/ folder (never a manually renamed copy)

Development

npm run dev          # rebuilds on file change

After any content-script change, reload the extension in chrome://extensions and refresh the YouTube tab.

Docs

• PRD — what we're building, for whom, and current scope
• ARCHITECTURE — storage layer, injection strategy, why
• SELECTOR_MAP — the living reference for per-page YouTube DOM selectors
• ROADMAP — phases, shipped vs planned