Hover Youtube Video Link - A userscript to "peek" the content of a youtube video link (often in a comment) without clicking on the link. Revealing the title and description without going to the page and increasing it's view.

hover-ytlink.js

// ==UserScript==
// @name         Hover and See What The Youtube Link is All About
// @namespace    http://tampermonkey.net/
// @version      1.1
// @description  I often got curious when people just commenting a youtube link, so I made this little userscript.
// @author       RZFury
// @match        https://www.youtube.com/*
// @icon         https://www.google.com/s2/favicons?domain=youtube.com
// @updateURL    https://gist.githubusercontent.com/rzfury/f976d99bc378484f89cb46a5b6d20071/raw/e10866b172fedc91d95e6069aa3277d668491fac/hover-ytlink.js
// @downloadURL  https://gist.githubusercontent.com/rzfury/f976d99bc378484f89cb46a5b6d20071/raw/e10866b172fedc91d95e6069aa3277d668491fac/hover-ytlink.js
// @grant        none
// ==/UserScript==

const __RZFURY_urlRegex = /\b((?:https?|ftp):\/\/[\w-]+(?:\.[\w-]+)+(?:[\w.,@?^=%&:/~+#-]*[\w@?^=%&/~+#-])?)/gi;
const __RZFury_timeFormatRegex = /^([0-9]{1,5}\:[0-9]{1,2})/;

(function() {
    "use strict";

    const style = document.createElement('style');
    style.textContent =
        '.__rzfury_hoverYtLink_card { padding: 12px; margin: 0.5rem 0; border-radius: 12px; background-color: var(--yt-spec-badge-chip-background); color: var(--yt-spec-text-primary); font-weight: 400 !important; }';
    document.body.append(style);

    window.addEventListener('mouseover', (e) => {
        if(e.target.tagName == "A" && e.target.parentElement.id == "content-text" && e.target.getAttribute('data-rzfury-revealed') == null) {
            if(e.target.href.includes("/watch?v=")) {
                if(__RZFury_timeFormatRegex.test(e.target.textContent)) { return; }
                if(e.target.textContent.startsWith("@")) { return; }
                e.target.setAttribute('data-rzfury-revealed', 'true');

                __RZFURY_fetch(e.target.href, text => {
                    const parser = new DOMParser();
                    const doc = parser.parseFromString(text, 'text/html');
                    const title = doc.querySelector('meta[name="title"]').getAttribute('content');
                    const description = doc.querySelector('meta[name="description"]').getAttribute('content');
                    const content = "Content of the link: " + e.target.textContent + "\n\nTitle: " + __RZFURY_decodeEntity(title) + "\nDescription: " + __RZFURY_decodeEntity(description);
                    const contentHTML = `<p>${"Content of the link: " + e.target.textContent + "<br/><br/>Title: " + __RZFURY_decodeEntity(title) + "<br/>Description: " + __RZFURY_decodeEntity(description)}</p>`;
                    __RZFURY_createHoverableCard(e.target.parentElement.parentElement.parentElement, contentHTML);
                    e.target.setAttribute('title', content);
                })
            }
        }
    });
})();

function __RZFURY_fetch(url, onSuccess) {
    if(window.fetch) {
        fetch(new URL(url))
            .then(async res => {
                if (onSuccess) onSuccess(await res.text());
            })
            .catch(err => {
                console.error(new Error("HOVER YTLINK(fetch): Error when fetching the link"), err);
            });
    }
    else {
        const xhr = new XMLHttpRequest();
        xhr.open("GET", url, true);
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4) {
                if (onSuccess) onSuccess(xhr.responseText);
                else console.error(new Error("HOVER YTLINK(fetch.XHR): Error when fetching the link"), xhr.responseText);
            }
        }
        xhr.send();
    }
}

function __RZFURY_createHoverableCard(targetEl, content) {
    const card = document.createElement('div');
    card.classList.add('__rzfury_hoverYtLink_card');
    card.innerHTML = content;
    targetEl.append(card);
}

function __RZFURY_decodeEntity(inputStr) {
    const textarea = document.createElement("textarea");
    textarea.style.display = "none";
    textarea.innerHTML = inputStr;

    const content = textarea.value;
    textarea.remove();

    return __RZFURY_redactAnyURL(content);
}

function __RZFURY_redactAnyURL(str) {
  return str.replace(__RZFURY_urlRegex, '[URL-REDACTED]');
}