☰

YouTube Script Downloader Button

Adds a button that passes the URL to youtubetranscript.com for the transcript

  1. // ==UserScript==
  2. // @name         YouTube Script Downloader Button
  3. // @description  Adds a button that passes the URL to youtubetranscript.com for the transcript
  4. // @author       dhaden
  5. // @match        https://www.youtube.com/watch*
  6. // @grant        none
  7. // @license      MIT
  8. // @run-at       document-end
  9. // @version      1.0
  10. // @namespace https://greasyfork.org/users/186630
  11. // ==/UserScript==
  12.  
  13. const buttons = ["Script"];
  14.  
  15. // The YouTube styled button in CSS
  16. // There is no consistent variable for border-radius (button roundness) yet.
  17. // Old border-radius: 2px. New border-radius: 20px or higher.
  18. const cssText = `
  19.     .download-button {
  20.         border-radius: 20px;
  21.         display: flex;
  22.         flex-direction: row;
  23.         cursor: pointer;
  24.         background-color: var(--yt-spec-10-percent-layer);
  25.         color: var(--yt-spec-text-secondary);
  26.         padding: var(--yt-button-padding);
  27.         margin: auto var(--ytd-subscribe-button-margin, 12px);
  28.         white-space: nowrap;
  29.         font-size: var(--ytd-tab-system-font-size, 1.4rem);
  30.         font-weight: var(--ytd-tab-system-font-weight, 500);
  31.         letter-spacing: var(--ytd-tab-system-letter-spacing, .007px);
  32.         text-transform: var(--ytd-tab-system-text-transform, uppercase);
  33.     }
  34.     .download-button-text {
  35.         --yt-formatted-string-deemphasize_-_display: initial;
  36.         --yt-formatted-string-deemphasize-color: var(--yt-spec-text-secondary);
  37.         --yt-formatted-string-deemphasize_-_margin-left: 4px;
  38.     }
  39.     .download-button-container {
  40.         display: flex;
  41.         flex-direction: row;
  42.     }
  43.     .download-playlist-button {
  44.         margin-right: 8px;
  45.         margin-left: 0px;
  46.     }
  47.     .download-playlist-button-text {
  48.         color: #E4E4E4;
  49.     }
  50. `;
  51.  
  52.  
  53. (function() {
  54.     'use strict';
  55.     window.onload = () => {
  56.  
  57.         // playlist pages will try to add the buttons repeatedly
  58.         let playlistButtonsAdded = false;
  59.  
  60.         window.addEventListener("yt-navigate-finish", () => {
  61.             setTimeout(() => {
  62.  
  63.                 // apply CSS
  64.                 const style = document.createElement("style");
  65.                 style.type = "text/css";
  66.                 style.innerHTML = cssText;
  67.                 document.head.appendChild(style);
  68.  
  69.                 // check for playlist and create appropriate query
  70.                 let query = "#analytics-button:not(.download-panel)";
  71.                 let inPlaylist = location.href.includes("/playlist");
  72.                 if (inPlaylist && !playlistButtonsAdded) {
  73.                     query += ", div.metadata-buttons-wrapper:not(.download-panel)";
  74.                     playlistButtonsAdded = true;
  75.                 }
  76.  
  77.                 document.querySelectorAll(query).forEach(panel => {
  78.  
  79.                     // make an outer div container (to flex buttons side-by-side)
  80.                     const container = document.createElement("div");
  81.                     container.classList.add("download-button-container");
  82.  
  83.                     for (let i = 0; i < buttons.length; i++) {
  84.                         const button = document.createElement("div");             // the button
  85.                         button.classList.add("download-button");
  86.                         if (inPlaylist) { button.classList.add("download-playlist-button"); }
  87.  
  88.                         button.addEventListener("click", () => {                  // passthrough function
  89.                             let link = (window.location.search);                  // get the search portion of the current URL
  90.                             let linkbase = "https://www.youtubetranscript.com/";  // get the base domain part of the current URL
  91.                             var string_url = linkbase + link;                     // combine them together without /watch
  92.                             (function (change) {
  93.                                 window.location = string_url;                     // click the button and the Web link becomes the new combo URL
  94.                             })();
  95.                         });
  96.  
  97.                         const buttonText = document.createElement("span");        // button text
  98.                         buttonText.classList.add("download-button-text");
  99.                         if (inPlaylist) { buttonText.classList.add("download-playlist-button-text"); }
  100.                         buttonText.innerHTML = buttons[i];
  101.                         button.appendChild(buttonText);                           // append text to button
  102.                         container.appendChild(button);
  103.                     }
  104.  
  105.                     panel.classList.add("download-panel");
  106.                     panel.insertBefore(container, panel.firstElementChild);
  107.                 });
  108.             }, 200);
  109.         });
  110.     };
  111. })();