Arc Boost which adds a cobalt.tools button to each YouTube video page

yt-cobalt-button.js

setTimeout(() => {
    console.clear();
    addCobaltButton();
}, 2000);

/**
 * Force TrustedHTML due to Chrome restrictions
 */
escapeHTMLPolicy = trustedTypes.createPolicy("forceInner", {
    createHTML: (to_escape) => to_escape
})

/**
 * Observes the DOM for changes
 * @type {MutationObserver}
 */
var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        if (mutation.addedNodes.length) {
            if (mutation.type === 'childList') {
                addCobaltButton();
            }
        }
    })
})

/**
 * Handles adding a new Cobalt Button/Link to the page
 */
function addCobaltButton () {
    var targetNode = document.querySelector("h1.title.style-scope.ytd-video-primary-info-renderer");

    var config = {
        childList: true,
        subtree:true
    }
    observer.observe(targetNode, config)

    const cobaltLink = 'https://cobalt.tools/#' + document.URL;

    // get existing buttons
    const buttons = document.querySelector("#actions-inner > #menu > ytd-menu-renderer > #top-level-buttons-computed");

    // build the new button
    var dlButton = document.createElement('div', { className: 'cobaltLink'});
    dlButton.innerHTML = escapeHTMLPolicy.createHTML(`
        <a href="${cobaltLink}" class="yt-spec-button-shape-next yt-spec-button-shape-next--tonal yt-spec-button-shape-next--mono yt-spec-button-shape-next--size-m" aria-label="CobaltTools">
        <div class="yt-spec-button-shape-next__icon" aria-hidden="true">
                <?xml version="1.0" encoding="utf-8"?>
                <svg width="25px" height="25px" viewBox="0 0 48 48" version="1" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 48 48">
                    <g fill="#1565C0">
                        <polygon points="24,37.1 13,24 35,24"/>
                        <rect x="20" y="4" width="8" height="4"/>
                        <rect x="20" y="10" width="8" height="4"/>
                        <rect x="20" y="16" width="8" height="11"/>
                        <rect x="6" y="40" width="36" height="4"/>
                    </g>
                </svg>
        </div>
        </a>           
    `);
    
    const cobaltButton = Object.assign(dlButton);
    cobaltButton.style.marginRight = '8px';
    // inject the button right in front of the like button
    buttons.insertAdjacentElement('afterbegin' ,cobaltButton);
}

Preview:

Intro

Arc Boost which adds an additional button to YouTube that forwards the current video url to cobalt.tools for downloading and/or extracting audio.

Prerequisites

• Arc Browser

Installation

• Open YouTube in Arc Browser
• Create a new Boost by clicking the small settings button on the right side of the URL
• Click on the Code {} button and choose the JS tab at the top
• Copy & Paste the content of the js file
• Click the Refresh to run button on the lower right