YouTube → Claude Transcriber

One-click YouTube transcript extraction → Claude summarization.

A Chrome extension (Manifest V3) that extracts YouTube video transcripts and sends them directly to Claude for intelligent summarization — all in a single click.

---

✨ Features

• One-Click Transcription — Click the widget on any YouTube video page to extract the transcript, open Claude, and auto-paste a tailored summarization prompt.
• Thumbnail Quick-Action — Hover over any video thumbnail on YouTube to reveal a transcribe button — no need to open the video first.
• Keyboard Shortcut — Trigger transcription with Alt+T (customizable) while watching a video.
• Copy Options — Copy just the raw transcript or the full prompt + transcript to your clipboard.
• Follow-Up Prompts — After transcription, a floating ⚡ widget appears on Claude with pre-configured follow-up prompts you can send with one click.
• Customizable Prompt — Fully editable main prompt template with ${title}, ${transcript}, and ${url} variables.
• Multi-Language Support — Auto-detects caption language or lets you specify a preferred language (English, Spanish, French, German, Japanese, Korean, Portuguese).
• Optional Timestamps — Include or exclude timestamps in extracted transcripts.
• Widget Positioning — Place the transcribe widget below the video title or as a floating overlay.
• Auto-Send — Optionally auto-send the prompt to Claude after injection (toggle on/off).
• Dark UI — Sleek dark-themed widget and options page that blends with YouTube's dark mode.

---

📦 Installation

From Source (Developer Mode)

1. Clone or download this repository:

   git clone https://github.com/YOUR_USERNAME/yt-claude-transcriber.git

2. Open Chrome and navigate to chrome://extensions/.
3. Enable Developer mode (toggle in the top-right corner).
4. Click "Load unpacked" and select the root directory of this project.
5. The extension icon will appear in your toolbar — you're ready to go.

Icon Generation (Optional)

The repository includes pre-generated icons. To regenerate them:

python3 scripts/gen-icons.py

This creates icon16.png, icon48.png, and icon128.png in the icons/ directory.

---

🚀 Usage

On a Video Page

1. Navigate to any YouTube video.
2. A "Transcribe → Claude" widget appears below the video title (or as a floating button, depending on your settings).
3. Click the button — the extension will:
   • Extract the video's captions/transcript
   • Open a new tab on claude.ai/new
   • Paste the prompt with the full transcript
   • Optionally auto-send the message
4. Use the "Copy Transcript" or "Copy with Prompt" buttons to copy to clipboard instead.

From Thumbnails

• Hover over any video thumbnail on YouTube (home page, search results, sidebar recommendations).
• A small transcribe icon appears in the bottom-right corner of the thumbnail.
• Click it to transcribe that video directly — without opening it first.

Keyboard Shortcut

• Press Alt+T (default) while on a YouTube video page to trigger transcription.
• Customize the shortcut in the extension's settings page.

Follow-Up Prompts

After a transcript is sent to Claude, a floating ⚡ button appears on the Claude tab with quick follow-up prompts:

1. "Reduce this down into its core concepts from first principles."
2. "Using everything you know about me, how can I apply these lessons to my life?"
3. "Summarise this further into 10 concise takeaways as an executive summary."

These are fully customizable — click the ✏️ icon to edit, or manage them from the options page.

---

⚙️ Configuration

Click the extension icon in the toolbar to open the Options Page, which has two tabs:

Custom Prompts

Setting	Description
Main Prompt	The prompt template sent to Claude with the transcript. Supports ${title}, ${transcript}, and ${url} variables.
Follow-Up Prompts	Up to 5 quick prompts shown on Claude after transcribing. Add, remove, reorder, or edit.
Enable Follow-Ups	Toggle the ⚡ follow-up widget on Claude on/off.

Settings

Setting	Default	Description
Show Widget	✅ On	Display the transcribe widget on YouTube video pages.
Widget Position	Below title	Below title or Floating (fixed bottom-right).
Default Language	Auto-detect	Preferred transcript language.
Include Timestamps	❌ Off	Prepend [M:SS] timestamps to each transcript line.
Auto-send to Claude	✅ On	Automatically send the prompt after pasting into Claude.
Keyboard Shortcut	Alt+T	Custom hotkey to trigger transcription.

---

🏗️ Architecture

yt-claude-transcriber-store/
├── manifest.json              # Chrome Extension Manifest V3 config
├── icons/                     # Extension icons (16, 48, 128px)
├── scripts/
│   └── gen-icons.py           # Python script to generate PNG icons
└── src/
    ├── background.js          # Service worker: handles shortcuts, tab routing, message passing
    ├── page-script.js         # MAIN world script: accesses YouTube's player API for captions
    ├── content.js             # ISOLATED world script: UI widget, clipboard, orchestration
    ├── claude-inject.js       # Content script for claude.ai: prompt injection + follow-up widget
    ├── styles.css             # Widget styles (YouTube side)
    └── options/
        ├── index.html         # Options page (settings UI)
        └── options.js         # Options page logic (storage management)

Script Execution Model

The extension uses Chrome's content script worlds to bridge YouTube's internal state:

Script	World	Purpose
page-script.js	MAIN	Runs in the page's JS context to access movie_player.getPlayerResponse() and ytInitialPlayerResponse for caption track URLs.
content.js	ISOLATED	Manages UI (widget, thumbnails, toasts), communicates with the page script via CustomEvent, and coordinates with the background service worker.
claude-inject.js	ISOLATED	Runs on claude.ai — injects the pending prompt into Claude's editor and renders follow-up prompt buttons.
background.js	Service Worker	Handles keyboard shortcut commands, opens Claude tabs, and routes messages between content scripts.

Transcript Extraction

The extension uses a multi-method fallback strategy for reliability:

1. YouTube Player API — document.querySelector('#movie_player').getPlayerResponse()
2. Global Variable — window.ytInitialPlayerResponse
3. Script Parsing — Regex extraction of captionTracks from inline <script> tags

Caption XML is fetched with optional PoToken authentication (extracted by toggling the CC button and inspecting performance.getEntriesByType('resource')). A JSON3 format fallback is also available.

---

🔑 Permissions

Permission	Reason
activeTab	Interact with the current YouTube tab when the shortcut is used.
storage	Persist user settings, custom prompts, and follow-up configurations.
https://www.youtube.com/*	Inject content scripts on YouTube to extract transcripts.
https://claude.ai/*	Inject content scripts on Claude to paste prompts.

---

🛠️ Development

Prerequisites

• Google Chrome (or any Chromium-based browser)
• Python 3 (only for icon generation)

Making Changes

1. Edit files in the src/ directory.
2. Go to chrome://extensions/ and click the reload button (↻) on the extension card.
3. Refresh the YouTube tab to see changes.

Key Design Decisions

• No build step — Plain JavaScript, no bundler or transpiler required. Edit and reload.
• No external dependencies — Zero npm packages; everything is vanilla JS and CSS.
• Manifest V3 — Uses the modern service worker–based architecture for the background script.
• Dual-world content scripts — The MAIN world script accesses YouTube's internal APIs while the ISOLATED world script handles UI and extension messaging, maintaining security boundaries.

---

📄 License

This project is provided as-is for personal use.