Tampermonkey script which adds a cobalt.tools button to each YouTube video page in Safari (macOS)

youtube-cobalt-tools-safari.js

// ==UserScript==
// @name         youtube-cobalt-tools
// @version      1.00
// @description  A script that adds a button to YouTube which opens the video link in cobalt-tools (for downloading or extracting audio)
// @match        *://*.youtube.com/*
// @exclude      *://accounts.youtube.com/*
// @exclude      *://www.youtube.com/live_chat_replay*
// @exclude      *://www.youtube.com/persist_identity*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=YouTube.com
// @grant        none
// @license MIT
// ==/UserScript==
setTimeout(() => {
  console.clear()
  addCobaltButton()
}, 2000)

/**
 * Adds 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
    }

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

    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 = `
        <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 cobaltToolsButton = Object.assign(dlButton)
    cobaltToolsButton.style.marginRight = '8px'
    // inject the button right in front of the like button
    buttons.insertAdjacentElement('afterbegin', cobaltToolsButton)
}

Preview:

Intro

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

Prerequisites

• macOS Safari (other Browsers not tested)
• Userscripts App

Installation

• Set a script path in the Userscripts App by choosing a folder on your Mac
• Download the script above and save it inside the same directory
• enable Userscripts extension in Safari and allow it access on youtube.com (Safari → Settings → Websites → Extensions → Userscripts)