userscript to number youtube videos

numberytvideos.js

// ==UserScript==
// @name         Number YouTube Videos
// @namespace    https://github.com/k98kurz
// @version      0.2
// @description  Number YouTube videos in chronological (reverse sequential) order. Should load all videos by scrolling down first.
// @author       k98kurz
// @match        https://www.youtube.com/@*/videos
// @match        https://www.youtube.com/@*/streams
// @icon         https://www.google.com/s2/favicons?sz=64&domain=youtube.com
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const query = "ytd-rich-grid-row a#video-title-link > yt-formatted-string#video-title";
    const buttonParentSelector = "#chips";

    function pad(i, maxNum) {
        var padded = "" + i;
        const target = "" + maxNum;
        while (padded.length < target.length) {
            padded = "0" + padded;
        }
        return padded;
    }

    window.numberVideos = function() {
        //console.log("***NUMBERING VIDEOS***");
        const nodes = document.querySelectorAll(query);
        var items = [];
        nodes.forEach((e, i, a) => items.push(e));
        const maxNum = items.length;
        items.forEach((e, i, a) => {
            var title = e.innerHTML;
            if (e.hasAttribute("originalTitle")) {
                title = e.getAttribute("originalTitle");
            }
            e.setAttribute("originalTitle", title);
            e.innerHTML = pad(i+1, maxNum) + ". " + title;
        });
    }

    window.numberVideosReverse = function() {
        //console.log("***NUMBERING VIDEOS REVERSE***");
        const nodes = document.querySelectorAll(query);
        var items = [];
        nodes.forEach((e, i, a) => items.push(e));
        items.reverse();
        const maxNum = items.length;
        items.forEach((e, i, a) => {
            var title = e.innerHTML;
            if (e.hasAttribute("originalTitle")) {
                title = e.getAttribute("originalTitle");
            }
            e.setAttribute("originalTitle", title);
            e.innerHTML = pad(i+1, maxNum) + ". " + title;
        });
    }

    function buttonHTML() {
/*         return `
        <yt-chip-cloud-chip-renderer class="style-scope ytd-feed-filter-chip-bar-renderer" aria-selected="false" role="tab" tabindex="0" chip-style="STYLE_DEFAULT">
            <yt-formatted-string id="text" ellipsis-truncate="" id="number-videos-button" class="style-scope yt-chip-cloud-chip-renderer" ellipsis-truncate-styling="" title="Number">Number Videos</yt-formatted-string>
        </yt-chip-cloud-chip-renderer>`; */
        return `<button id="number-videos-button">Number Videos</button>`
    }

    function buttonHTML2() {
        return `<button id="number-videos-button2">Number Videos Reverse</button>`
    }

    function addButtons() {
        const parent = document.querySelector(buttonParentSelector);
        const child1 = document.createElement("span");
        child1.innerHTML = buttonHTML();
        child1.setAttribute("style", "margin-left: 10px;");
        parent.appendChild(child1);

        const child2 = document.createElement("span");
        child2.innerHTML = buttonHTML2();
        child2.setAttribute("style", "margin-left: 10px;");
        parent.appendChild(child2);

        const btn1 = document.querySelector("#number-videos-button");
        btn1.addEventListener('click', () => {
            //console.log("***BUTTON1 CLICKED***");
            window.numberVideos();
        });

        const btn2 = document.querySelector("#number-videos-button2");
        btn2.addEventListener('click', () => {
            //console.log("***BUTTON2 CLICKED***");
            window.numberVideosReverse();
        });
    }

    window.setTimeout(addButtons, 2000);
})();