DeepHear

A Chrome extension (MV3) that turns YouTube into an immersive language-learning environment: bilingual subtitles on the player, a scrollable transcript sidebar, and click-to-define word lookups backed by an LLM.

Features

• Bilingual overlay on the YouTube player — source + translated subtitle, side by side.

• Transcript sidebar — full cue list, click a line to seek, auto-follow with manual-scroll cooldown.

• Translation sources — YouTube native tlang by default, AI fallback via Supabase Edge Function → OpenRouter → Claude Haiku 4.5. Progressive batching keeps the first cue fast.

• Click-to-define — click any word to pause the video and pop an AI tooltip with pronunciation, part of speech, contextual meaning, 3 senses, and an example.

  

• AI line analysis — open a per-cue chat drawer for grammar breakdowns, vocabulary notes, and follow-up questions powered by your configured LLM.

  

• Shadowing practice — per-cue Listen / Echo / Speak / Playback drill with auto-flow, recording, and adjustable playback speed.

  

• Personal vocabulary book — saves words to IndexedDB; search, export (JSON/CSV), and deep-link back to the original context.

• BYOK (Bring Your Own Key) — optionally bypass the hosted edge function and call OpenRouter, OpenAI, or Anthropic directly with your own API key. Keys stay in chrome.storage.local (device-only).

Install (from source)

cd extension
npm install
npm run build

Then in Chrome:

1. Open chrome://extensions/.
2. Enable Developer mode (top right).
3. Click Load unpacked and select extension/dist/.
4. Open any YouTube video with subtitles available.

Configuration

Open the extension's Options page to configure:

• Source / target languages
• Preferred translation source (YouTube tlang vs AI)
• AI provider (hosted edge function or BYOK: OpenRouter / OpenAI / Anthropic)
• Model per provider
• Overlay + sidebar visibility

Tech stack

• Extension — Vite + TypeScript + Preact + @crxjs/vite-plugin, Shadow DOM for style isolation.
• Backend — Supabase Edge Functions (Deno) proxying OpenRouter. YAML for batch translation (forgiving under LLMs), JSON for single-word lookup.
• Storage — chrome.storage.sync for settings, chrome.storage.local for BYOK keys, IndexedDB for translation / word caches + vocabulary.

Repo layout

extension/       MV3 extension (Vite build → extension/dist/)
supabase/        Edge Functions (translate, word) + config
DEVELOPMENT.md   full development guide — architecture, gotchas, workflow

See DEVELOPMENT.md for architecture details, the full dev loop, Supabase setup, debugging via chrome-devtools-mcp, and a log of every gotcha we hit.

License

MIT.