How I Built a YouTube Transcript Exporter Chrome Extension

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