YouTube Script Downloader Button

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

Verze ze dne 15. 06. 2023. Zobrazit nejnovější verzi.

K instalaci tototo skriptu si budete muset nainstalovat rozšíření jako Tampermonkey, Greasemonkey nebo Violentmonkey.

You will need to install an extension such as Tampermonkey to install this script.

K instalaci tohoto skriptu si budete muset nainstalovat rozšíření jako Tampermonkey nebo Violentmonkey.

K instalaci tohoto skriptu si budete muset nainstalovat rozšíření jako Tampermonkey nebo Userscripts.

You will need to install an extension such as Tampermonkey to install this script.

K instalaci tohoto skriptu si budete muset nainstalovat manažer uživatelských skriptů.

(Už mám manažer uživatelských skriptů, nechte mě ho nainstalovat!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(Už mám manažer uživatelských stylů, nechte mě ho nainstalovat!)

// ==UserScript==
// @name         YouTube Script Downloader Button
// @description  Adds a button that passes the URL to youtubetranscript.com for the transcript
// @author       dhaden
// @match        https://www.youtube.com/watch*
// @grant        none
// @license      MIT
// @run-at       document-end
// @version      1.0
// @namespace https://greasyfork.org/users/186630
// ==/UserScript==

const buttons = ["Script"];

// The YouTube styled button in CSS
// There is no consistent variable for border-radius (button roundness) yet.
// Old border-radius: 2px. New border-radius: 20px or higher.
const cssText = `
    .download-button {
        border-radius: 20px;
        display: flex;
        flex-direction: row;
        cursor: pointer;
        background-color: var(--yt-spec-10-percent-layer);
        color: var(--yt-spec-text-secondary);
        padding: var(--yt-button-padding);
        margin: auto var(--ytd-subscribe-button-margin, 12px);
        white-space: nowrap;
        font-size: var(--ytd-tab-system-font-size, 1.4rem);
        font-weight: var(--ytd-tab-system-font-weight, 500);
        letter-spacing: var(--ytd-tab-system-letter-spacing, .007px);
        text-transform: var(--ytd-tab-system-text-transform, uppercase);
    }
    .download-button-text {
        --yt-formatted-string-deemphasize_-_display: initial;
        --yt-formatted-string-deemphasize-color: var(--yt-spec-text-secondary);
        --yt-formatted-string-deemphasize_-_margin-left: 4px;
    }
    .download-button-container {
        display: flex;
        flex-direction: row;
    }
    .download-playlist-button {
        margin-right: 8px;
        margin-left: 0px;
    }
    .download-playlist-button-text {
        color: #E4E4E4;
    }
`;


(function() {
    'use strict';
    window.onload = () => {

        // playlist pages will try to add the buttons repeatedly
        let playlistButtonsAdded = false;

        window.addEventListener("yt-navigate-finish", () => {
            setTimeout(() => {

                // apply CSS
                const style = document.createElement("style");
                style.type = "text/css";
                style.innerHTML = cssText;
                document.head.appendChild(style);

                // check for playlist and create appropriate query
                let query = "#analytics-button:not(.download-panel)";
                let inPlaylist = location.href.includes("/playlist");
                if (inPlaylist && !playlistButtonsAdded) {
                    query += ", div.metadata-buttons-wrapper:not(.download-panel)";
                    playlistButtonsAdded = true;
                }

                document.querySelectorAll(query).forEach(panel => {

                    // make an outer div container (to flex buttons side-by-side)
                    const container = document.createElement("div");
                    container.classList.add("download-button-container");

                    for (let i = 0; i < buttons.length; i++) {
                        const button = document.createElement("div");             // the button
                        button.classList.add("download-button");
                        if (inPlaylist) { button.classList.add("download-playlist-button"); }

                        button.addEventListener("click", () => {                  // passthrough function
                            let link = (window.location.search);                  // get the search portion of the current URL
                            let linkbase = "https://www.youtubetranscript.com/";  // get the base domain part of the current URL
                            var string_url = linkbase + link;                     // combine them together without /watch
                            (function (change) {
                                window.location = string_url;                     // click the button and the Web link becomes the new combo URL
                            })();
                        });

                        const buttonText = document.createElement("span");        // button text
                        buttonText.classList.add("download-button-text");
                        if (inPlaylist) { buttonText.classList.add("download-playlist-button-text"); }
                        buttonText.innerHTML = buttons[i];
                        button.appendChild(buttonText);                           // append text to button
                        container.appendChild(button);
                    }

                    panel.classList.add("download-panel");
                    panel.insertBefore(container, panel.firstElementChild);
                });
            }, 200);
        });
    };
})();