📚 YT Notes — Screenshot to Word Chrome Extension

YT Notes is a lightweight, high-efficiency Chrome Extension (Manifest V3) designed for students, online learners, and professionals. It allows users to capture custom visual snippets directly from YouTube lecture videos and automatically compile them into a beautifully formatted, ready-to-study Microsoft Word (.docx) file.

---

🚀 The Problem & Solution

The Problem Learners Face

When watching educational videos or lecture streams on YouTube, taking notes is often frustrating:

• Distraction & Loss of Focus: Manually taking screenshots using OS tools (e.g., Snipping Tool), cropping them, opening Word, and pasting images one by one breaks study flow.
• Cluttered Word Documents: Pasting screenshots directly into Word or exporting raw HTML files (.doc) often causes broken images (due to base64 security stripping in Word) or weird formatting.
• Browser Service Worker Crashes: Standard Chrome extensions often lose captured screenshots during long study sessions when Manifest V3 background service workers go idle or terminate.
• Storage Quota Limits: Storing dozens of uncompressed PNG screenshots rapidly hits browser storage limits, causing image loss mid-lecture.

How YT Notes Fixes It

• Custom Area Snipping: Drag and select any specific region of the video player (diagrams, code blocks, math equations, slides) without capturing unnecessary browser UI or video controls.
• True .docx Binary Embedding: Bundles the client-side docx JS engine to generate genuine Microsoft Word documents with binary-embedded images. No broken missing-image icons in Word.
• Persistent Disk-Backed Storage: Uses chrome.storage.local combined with unlimitedStorage permissions so captured screenshots survive service worker terminations, browser restarts, and tab crashes.
• Optimized Image Compression: Utilizes 92% JPEG compression to reduce screenshot size by 5–10x with zero noticeable loss in readability, enabling seamless capture of 50+ slides per session.
• Clean, Minimalist Export: Strips unnecessary metadata (timestamps, dates) to produce a clean, continuous visual summary of lecture material ready for printing or editing.

---

✨ Key Features

• 🎯 Adjustable Screen Snipping: Interactive bounding box over the active YouTube video player.
• ⚡ Zero-Latency Workflow: Capture snippets rapidly using a single click or keyboard shortcut.
• 📁 Automated Word Document Creation: One-click export into a .docx document with auto-scaled image widths maintaining aspect ratios.
• 🛡️ Manifest V3 Compliant & Robust: Designed with inject-then-close popup architecture and double-initialization guards (window.__ytNotesLoaded).
• 💾 Offline-First & Private: All processing happens locally inside your browser; no external server or backend processing is required.

---

🚀 How to Install (Chrome)

1. Download & unzip this folder somewhere on your PC
2. Open Chrome → go to chrome://extensions/
3. Enable Developer Mode (toggle in top-right)
4. Click "Load unpacked"
5. Select the yt-notes-extension folder
6. The extension icon will appear in your toolbar ✅

---

🎯 How to Use

1. Open any YouTube video
2. Click the YT Notes extension icon
3. Click "Select & Capture Region" — the screen dims
4. Draw a box over the area you want (drag to select)
5. Resize or move the box using corner handles or dragging
6. Click "Capture" button (or press Enter)
7. Repeat for as many screenshots as you need
8. Click the extension icon again → "Export to Word"
9. A .doc file downloads — open in Word / LibreOffice ✅

---

💡 Tips

• Press ESC to cancel selection at any time
• All screenshots are stored in order as you capture them
• Each screenshot shows a timestamp in the Word doc
• There's a notes placeholder under each image — fill it in Word
• Use Clear All to start fresh for a new lecture

---

📁 Files

File	Purpose
manifest.json	Extension config
content.js	Selection box, capture logic
content.css	Overlay & UI styling
background.js	Tab screenshot & storage
popup.html/js	Extension popup UI
icon.png	Extension icon

---

📂 Project Structure

yt-notes/
├── manifest.json       # Manifest V3 configuration with storage & scripting permissions
├── popup/
│   ├── popup.html      # Simple control interface
│   ├── popup.js        # Direct injection controller
│   └── popup.css       # Extension styling
├── content/
│   ├── content.js      # Overlay UI, crop selection box, image capture
│   └── content.css     # Crop box overlay styles
├── background/
│   └── background.js   # Service worker handling storage sync and state
├── lib/
│   └── docx.bundle.js  # Bundled JS library for client-side .docx generation
└── icons/              # Extension icons (16x16, 48x48, 128x128)