Extract and format YouTube video transcripts (Adds a clipboard icon you can press after clicking "Show Transcript" which sets the clipboard to the transcript)

YouTube Transcript Extractor.user.js

// ==UserScript==
// @name         YouTube Transcript Extractor
// @version      0.1
// @description  Extract and format YouTube video transcripts (Adds a clipboard icon you can press after clicking "Show Transcript" which sets the clipboard to the transcript)
// @author       rf5860
// @match        *://*.youtube.com/*
// @grant        GM_setClipboard
// ==/UserScript==

(function() {
  'use strict';

  // Function to extract and format the transcript
  function extractTranscript() {
    console.log('Extracting transcript...');
    // Find the transcript body
    let transcriptLines = document.querySelectorAll('.segment-text');

    // Check if the transcript body was found
    if (transcriptLines) {

      // Initialize the formatted transcript
      let formattedTranscript = '';

      // Loop through each line
      for (let line of transcriptLines) {
        // Find the text content and add it to the formatted transcript
        let textContent = line.textContent.trim();
        formattedTranscript += textContent + ' ';
      }

      // Format the transcript
      formattedTranscript = formattedTranscript.replace(/\. ([a-z])/g, function(_, firstLetter) {
        return '. ' + firstLetter.toUpperCase();
      });
      formattedTranscript = formattedTranscript.replace(/ i /g, ' I ');

      // Copy the formatted transcript to the clipboard
      console.log(formattedTranscript);
      GM_setClipboard(formattedTranscript, 'text');
      console.log("Transcript copied to clipboard");
    }
  }

  // Set up a MutationObserver to watch for changes to the parent element of the three-dots icon
  var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      // Find the three-dots/breadcrumb icon
      let threeDotsIcon = document.querySelector('#above-the-fold #button-shape');

      // Check if the three-dots/breadcrumb icon was found
      if (threeDotsIcon) {
        console.log('Hamburger menu found');
        // Check if the button has already been added
        if (!document.getElementById('transcriptCopyButton')) {
          // Create a new button
          let clipboardButton = document.createElement('button');
          clipboardButton.id = 'transcriptCopyButton'; // Add an ID to the button
          clipboardButton.innerText = '📋'; // Set the text to a clipboard emoji
          clipboardButton.title = "Copy Transcript to Clipboard"; // Tooltip text
          clipboardButton.style.marginLeft = '10px'; // Add some space between the new button and the three-dots icon

          // Set the button's click event handler
          clipboardButton.onclick = extractTranscript;

          // Add the new button next to the three-dots icon
          threeDotsIcon.parentNode.insertBefore(clipboardButton, threeDotsIcon.nextSibling);
        }
        observer.disconnect(); // Stop observing once the element is found
      }

    });
  });
  observer.observe(document.body, { childList: true, subtree: true });

})();