invidious-links.user.js

// ==UserScript==
// @name        Invidious Links
// @namespace   Violentmonkey Scripts
// @match       https://www.youtube.com/*
// @grant       none
// @version     1.0
// @author      anon
// @description Append Invidious Links next to a#video-title links on YouTube
// ==/UserScript==

function getv(url) {
  const u = new URL(url)
  if (u.pathname.match(/^\/shorts/)) {
    const parts = u.pathname.split('/')
    return parts[2]
  } else {
    return u.searchParams.get('v')
  }
}

function invidiousUrl(url, site="yewtu.be") {
  const v = getv(url)
  return `https://${site}/watch?v=${v}`
}

function createLink(url) {
  const a = document.createElement('a')
  a.href = url
  a.classList = ['invidious']
  a.innerHTML = ' ♂ '
  return a
}

function appendLink(vid) {
  cl = [...vid.classList]
  if (!cl.includes('appended')) {
    const url = invidiousUrl(vid.href)
    const link = createLink(url)
    vid.after(link)
    vid.classList.add('appended')
  }
}

const validNodeTypes = [1, 9, 10, 11]
function processNode(node) {
  if (!validNodeTypes.includes(node.nodeType)) return
  try {
    vids = node.querySelectorAll('a#video-title-link, a#video-title')
    vids.forEach((vid) => {
      appendLink(vid)
    })
  }
  catch (e) {
    console.warn(e, node)
    // window.__node = node
  }
}

const DELAY = 1000

const delayedProcessNode = (node) => {
  setTimeout(() => {
    processNode(node)
  }, DELAY)
}

delayedProcessNode(document.body)

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    mutation.addedNodes.forEach(delayedProcessNode)
  })
})

observer.observe(document.body, {
  childList: true,
  subtree: true,
})