BS Decoder

How It Works

• 📝 Subtitle extraction: extracts YouTube's subtitle tracks (text + timing)
• 🤖 AI rewriting: subtitles are sent to an LLM (via the Groq API, which is OpenAI-compatible) with instructions to rewrite them humorously
• 🎬 Synchronization: the rewritten text is displayed as an overlay on the video, aligned with the original timing
• 🔊 Text-to-speech (optional): the rewritten text can be read aloud using the browser's Web Speech API

A Deliberate Architecture Choice: BYOK

Rather than routing AI requests through a server, the extension uses a BYOK (Bring Your Own Key) model: each user provides their own Groq API key, which is free to obtain.

A server-side private key architecture (with authentication, quota management, pricing, and payments) would be necessary to support a real user base if the concept were ever turned into a production service. But for a personal-project MVP, that complexity wasn't justified: BYOK eliminates the need to manage infrastructure, billing, and abuse risks, while being more than sufficient at this scale.

Preserving Structure Without Sacrificing Meaning

The challenge wasn't getting a coherent rewrite (the LLM already understood the overall meaning of the speech quite well), but preserving the exact structure of the subtitle segments in the response, including their timing.

A conventional JSON format (a list of segments with their text) proved unreliable: the model tended to deviate slightly from the expected structure, making the output difficult to parse robustly.

The solution was to define a custom markup language, explicitly explained to the LLM in the prompt, and require it to reproduce that format strictly in its output. This formatting constraint, which was simpler and more predictable for the model to follow than a nested JSON structure, produced reliable output split exactly like the input, while still allowing the model to reason about the overall meaning of the text before redistributing it across the original structure.

Using AI: An Accelerator, Under Control

Beyond prompt engineering, AI (particularly through Copilot) was a genuine accelerator for this project—not just for writing code, but also for structuring the thinking and planning beforehand.

This approach relied on a constant trade-off between delegation and verification:

• ✅ Largely delegated: the MVP's UI/UX, an area where AI tends to provide reliable solutions that can be immediately verified visually
• 🔍 Verified or written manually: anything involving runtime behavior that was difficult for AI alone to reproduce or test (state persistence across popup openings and closings, subtitle retrieval in the specific context of a YouTube page, dependency on the actual behavior of a third-party API, or the extension's lifecycle while navigating within YouTube's SPA)

On these latter points, AI would regularly suggest solutions that were plausible but wrong in practice: it has no access to the actual behavior of YouTube's changing DOM, nor to the lifecycle specifics of Chrome extensions. This is where empirical experimentation (testing in real-world conditions and observing unexpected behavior) became essential, far more so than simply reviewing the code.

Technical Challenges

• 💬 Retrieving the original subtitles: YouTube does not provide stable access to subtitles through the DOM. The subtitles are retrieved by intercepting the API response sent by the page, using a wrapper around the window.fetch method.
• 🔄 Popup lifecycle: a Chrome extension popup is completely destroyed as soon as it loses focus, silently interrupting any ongoing process (such as loading a model) → moving the logic to the background script and persisting state in the extension's storage
• 🔒 Content Security Policy (Manifest V3): loading remote scripts in an extension page is strictly blocked, making it impossible to directly integrate the YouTube IFrame API into a dedicated window → this led to an architecture based on a content script injected directly into the existing YouTube page
• 📄 SPA and asynchronous DOM: keeping the extension's state synchronized with the current page within a single-page application

Takeaways

BS Decoder gave me the opportunity to experiment with a pragmatic approach to generative AI: not as an autopilot, but as an accelerator whose effectiveness depends directly on how tasks are broken down and what is chosen to be delegated to it.

The project also gave me hands-on experience with the real-world constraints of Manifest V3 extensions: CSP, popup lifecycle, and the behavior of a third-party SPA. These are problems that AI alone could neither anticipate nor solve without empirical verification.

Ultimately, the real skill I developed here wasn't simply using an LLM, but learning how to make the call between what could safely be entrusted to it and what required rigorous manual oversight.