Watching technical university lectures, deep dives, and tech talks on YouTube is one of the best ways to learn, but turning a 1- or 2-hour video into reliable revision material has always been frustrating. Generic AI summarizers often hallucinate facts, lose crucial context, or miss the architectural diagrams shown on screen.

To solve this, I designed and built NotesGenerator: a client-only, serverless Chrome Extension (Manifest V3) that transforms YouTube lectures into rigorous, grounded study guides, interactive Mermaid system diagrams, slide snapshots, and active-recall quizzes using Google Gemini and OpenRouter.

Core Architecture & Privacy-First Design:

• $0 Server Cost & Full BYOK Privacy: The extension connects straight from your browser to Google AI Studio or OpenRouter using your own API key. There is no intermediate server collecting your data or introducing subscription fees.
• Direct In-Browser Caption Extraction: Captions and transcripts are extracted directly from the active YouTube session DOM inside the tab, avoiding backend IP bans and server-side rate limits.
• Strict Two-Stage Grounded Pipeline:
  • Stage 1 (Per-Window Grounding): Processes transcript chunks in 5-minute intervals strictly grounded in what the speaker actually said, tagged with exact clamped timestamps.
  • Stage 2 (Whole-Lecture Synthesis): Synthesizes executive summaries, concept definitions, architectural flows, and active-recall flashcards.
• Interactive Mermaid.js Vector Diagrams: System architectures, data flows, and state machines are rendered directly in vector format with code/ASCII toggles.
• 1-Click Slide Snapshots: Captures high-resolution frames directly from the YouTube video player via HTML5 Canvas (📸 Snap Slide) and embeds them directly into your notes.
• AI Conceptual Illustrations: On-demand visual analogies generated via Google Imagen 3 (🎨 Illustrate).
• Grounded vs. AI Extension Badges: Clear badges differentiate what was explicitly taught (From Lecture) from helpful supplementary context (AI Extension).
• Interactive Player Seeking: Clicking any timestamp in the generated guide immediately seeks the YouTube video player to that exact second.
• Publication-Grade PDF & HTML Export: Fully formatted with print CSS (@media print), embedded vector diagrams, captured slide snapshots, and clean academic typography.
• Local Offline Caching: All generated notes are stored in chrome.storage.local keyed by video_id, opening instantly without refetching.

Building NotesGenerator allowed me to combine browser extension engineering (Manifest V3 service workers, content scripts, and DOM extraction) with modern LLM orchestration and grounded prompt engineering. It turns passive video watching into an active, structured study workflow.

GitHub Repository: NotesGenerator on GitHub