How I Built a YouTube Transcript Exporter Chrome Extension

Namurema — Fri, 03 Apr 2026 00:45:01 +0000

Here's how I built it in less than a week.

What it does

Opens on any YouTube video, scrapes the transcript from the DOM,
and lets you download it as a .txt or .csv file. No API key.
No backend. Pure JavaScript.

The hardest part

YouTube loads transcripts lazily — the DOM elements only exist
after the user opens the transcript panel. That means you can't
just scrape on page load. You have to wait for the user to open
it first, then read from the DOM.

The selector that unlocked everything:

document.querySelector("ytd-transcript-search-panel-renderer")

What I learned

Manifest V3 structure and permissions
Content scripts vs popup scripts
Chrome message passing with chrome.runtime.onMessage
Building files in memory with Blob and URL.createObjectURL
chrome.storage.local for persisting preferences

The message passing pattern

The trickiest concept was getting popup.js and content.js to
talk to each other. Here's the pattern:

content.js — listens for messages:

chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
  if (message.action === "GET_TRANSCRIPT") {
    sendResponse(scrapeTranscript());
  }
  return true;
});

popup.js — sends a message and waits:

chrome.tabs.sendMessage(tabId, { action: "GET_TRANSCRIPT" }, function(response) {
  console.log(response.transcript);
});

Try it

https://github.com/Namurema/Youtube-Transcript-Exporter

DEV Community: Namurema

How I Built a YouTube Transcript Exporter Chrome Extension

Try it