I was tired of manually copying YouTube transcripts, so I built a 15KB Firefox extension
DEV Community

I was tired of manually copying YouTube transcripts, so I built a 15KB Firefox extension

I was tired of manually copying YouTube transcripts, so I built a 15KB Firefox extension

The Problem

Using YouTube for learning, research, or building AI tools often involves a repetitive and frustrating workflow:

  • Open the transcript panel → scroll → select all → try not to copy the whole page → paste into notes → fix formatting

This process happens roughly 10 times a day. Frustratingly, most existing tools require pasting YouTube links into third-party websites, sending data to external servers, or installing bloated extensions that request broad permissions. The author wanted something that simply works locally without any data leaving their machine.

Project Overview

The solution is yt-transcript-yoinker, a tiny Firefox add-on that adds a single "Copy Transcript" button directly into the YouTube UI. With one click, the entire transcript is placed in the clipboard. Key characteristics:

  • No account required
  • No external API
  • No data leaves your machine

GitHub: https://github.com/pawanhirumina/yt-transcript-yoinker

Install from the Firefox Add-on Store: https://addons.mozilla.org/en-US/firefox/addon/yt-transcript-yoinker/

Features

  • One-click copy: A button appears next to the video title/description
  • Smart detection: Only appears when the video actually has a transcript available
  • Private by design: All processing occurs in the browser-no fetch() calls, no backend services
  • Lightweight: Under 15 KB, consisting of vanilla JavaScript and WebExtension APIs
  • Open source: MIT licensed and easily auditable

How It Works Under the Hood

The implementation is intentionally simple with no complex abstractions:

  1. Content script listens for YouTube navigation events (YouTube is a Single Page Application, so it listens to yt-navigate-finish)
  2. Transcript check: Verifies whether a transcript endpoint exists for the given video ID
  3. Button injection: Inserts a "Copy Transcript" button into the DOM next to the video title/description
  4. On click: Fetches YouTube's own transcript data (the same JSON used by the official transcript panel) and formats it into plain text with timestamps
  5. Clipboard integration: Uses navigator.clipboard.writeText() to place the formatted transcript in the clipboard

The entire application consists of approximately 100 lines of JavaScript using HTML, CSS, and vanilla WebExtension APIs.

Why Firefox First?

The author chose Firefox specifically because:

  • They personally use Firefox
  • Mozilla's add-on review process is strict about privacy, which aligns with the project's goals
  • A future Chrome version is planned, and contributions are welcome via pull requests

Installation

For Users

  1. Visit the store page: https://addons.mozilla.org/en-US/firefox/addon/yt-transcript-yoinker/
  2. Click Add to Firefox and follow the prompts

For Developers

git clone https://github.com/pawanhirumina/yt-transcript-yoinker.git

Then load the temporary add-on in Firefox:

  1. Navigate to about:debugging#/runtime/this-firefox
  2. Select Load Temporary Add-on
  3. Ensure manifest.json is present in the cloned directory

That's it-the add-on will be ready to use immediately.

Read on DEV Community ↗ ← Back to News

Comments

No comments yet. Start the discussion.