Copy YT transcripts to a textarea in a dialog, with or without timestamps

getYouTubeTranscriptsBookmarklet.js

const container = document.createElement('dialog');

function createDialog() {
  const close = document.createElement('button');

  container.setAttribute('style', 'width:fit-content;letter-spacing:1px;background-color:#ddd;font-family:helvetica !important;font-weight:100;border-radius:12px;padding-inline:20px;color:#161613;border-color:#fff;position:fixed;inset:0;margin:auto;width:100%;max-width:400px;z-index:2147483647;font-size:18px;text-rendering:optimizeLegibility;text-align:left;line-height:36px;');
  
  close.setAttribute('style', 'position:absolute;right:10px;top:8px !important;background-color:white;border-radius:50%;color:black;z-index:30;padding:0  0 0 1px;font-size:15px;font-weight:100;width:20px;height:20px;cursor:pointer;display:flex;justify-content:center;align-items:flex-start;border:1px solid black;line-height:16px;');
  close.textContent = 'x';
  close.onclick = () => container.remove();
  
  document.body.appendChild(container);
  container.appendChild(close);

  createContent('YouTube Transcript Scraper');
  container.showModal();
} 

function createContent(header) {
  const timestamps = document.createElement('input');
  timestamps.type = 'checkbox';
  timestamps.id = 'include-timestamps';
  timestamps.checked = true;
  timestamps.onclick = () => {if(document.querySelector(whyWeAreWaiting)){
    doTheRestOfTheStuff();
  }};
  
  const timestampsLabel = document.createElement('label');
  timestampsLabel.htmlFor = 'include-timestamps';
  timestampsLabel.innerHTML = "Include timestamps?";
  
  const ta = document.createElement('textarea');
  ta.rows = 40;
  ta.cols = 40;
  
  const dialogTitle = document.createElement('h2');
  dialogTitle.textContent = header;
  dialogTitle.setAttribute('style', 'text-align:center;');
  
  container.appendChild(dialogTitle);
  container.appendChild(timestampsLabel);
  container.appendChild(timestamps);
  container.appendChild(ta);
  
  const whyWeAreWaiting = "div.segment";
  if (!document.querySelector(whyWeAreWaiting)) {
    document.querySelector("#expand").click();
    document.querySelector("div#primary-button yt-button-shape button").click();
    document.querySelector("[aria-label='Show transcript']").click();
  }

  function doTheRestOfTheStuff() {
    transcript = "";
    selector = timestamps.checked ? "div.segment" : "yt-formatted-string.segment-text";
    document.querySelectorAll(selector).forEach(function(x) {
      if(timestamps.checked) {
        transcript += x.textContent.split("\n").join("").split("            ").join("\n");
      } else {
        transcript += x.textContent + "\n";
      }
    });
    ta.textContent = transcript;
  }
  var existCondition = setInterval(function() {
    if (document.querySelector(whyWeAreWaiting)) {
      clearInterval(existCondition);
      doTheRestOfTheStuff();
    }
   }, 100);
}

createDialog();