☰

YouTube to Social Blade Linker

Adds a plain-text link to YouTube profile pages that links to the corresponding Social Blade page for that channel, with a hover effect to match the YouTube font and color design.

目前为 2025-03-04 提交的版本。查看 最新版本。

// ==UserScript==
// @name         YouTube to Social Blade Linker
// @version      1.3
// @description  Adds a plain-text link to YouTube profile pages that links to the corresponding Social Blade page for that channel, with a hover effect to match the YouTube font and color design.
// @author       Webmaster
// @match        https://www.youtube.com/*
// @grant        none
// @namespace https://your-namespace-here/
// ==/UserScript==

(function() {
    'use strict';

    // Function to add the Social Blade link
    function addSocialBladeLink() {
        // Remove any existing link to avoid duplicates
        const existingLink = document.getElementById('social-blade-link');
        if (existingLink) {
            existingLink.remove();
        }

        // Get the username or channel ID from the YouTube profile page URL
        const match = window.location.href.match(/youtube\.com\/@(.+)/i) || window.location.href.match(/youtube\.com\/channel\/(.+)/i);
        if (!match) return; // Exit if no match found

        const identifier = match[1]; // This can be either username or channel ID

        // Create a link element and append it to the body of the page
        const link = document.createElement('a');
        link.id = 'social-blade-link'; // Set an id for easy reference
        link.innerText = 'Social Blade';
        link.href = `https://socialblade.com/youtube/channel/${identifier}`;
        link.target = '_blank'; // Open link in a new tab
        link.style.position = 'fixed';
        link.style.top = '10px';
        link.style.border = '1px solid #3F3F3F'; // Set border width, style, and color
        link.style.borderRadius = '25px';
        link.style.left = '195px';
        link.style.backgroundColor = 'transparent';
        link.style.color = '#3EA6FF';
        link.style.fontFamily = 'Roboto, Arial, sans-serif';
        link.style.fontSize = '16px';
        link.style.fontWeight = 'bold';
        link.style.textDecoration = 'none';
        link.style.zIndex = '9999';
        link.style.padding = '8px 16px';
        link.addEventListener('mouseover', () => {
            link.style.backgroundColor = '#263850';
            link.style.color = '#ffffff';
        });
        link.addEventListener('mouseout', () => {
            link.style.backgroundColor = 'transparent';
            link.style.color = '#3EA6FF';
        });
        document.body.appendChild(link);
    }

    // Retry function with exponential backoff
    function tryAddLinkWithRetry(retries = 5, delay = 1000) {
        setTimeout(() => {
            try {
                addSocialBladeLink();
            } catch (err) {
                if (retries > 0) {
                    tryAddLinkWithRetry(retries - 1, delay * 2); // Exponential backoff
                }
            }
        }, delay);
    }

    // Initial call to add the link with a retry mechanism
    tryAddLinkWithRetry();

    // Observe DOM changes (YouTube is a SPA)
    const observer = new MutationObserver(() => {
        tryAddLinkWithRetry();
    });

    // Start observing the document body for changes
    observer.observe(document.body, { childList: true, subtree: true });

    // Handle SPA navigation events (pushState and popstate)
    const originalPushState = history.pushState;
    history.pushState = function(state, title, url) {
        originalPushState.apply(history, arguments);
        tryAddLinkWithRetry(); // Trigger the function after navigation
    };

    window.addEventListener('popstate', () => {
        tryAddLinkWithRetry(); // Trigger the function when navigating back
    });

    // Listen for ALT+1 keyboard shortcut
    document.addEventListener('keydown', function(event) {
        // Check if ALT + 1 keys are pressed
        if (event.altKey && event.key === '1') {
            event.preventDefault(); // Prevent default browser behavior (optional)
            const socialBladeLink = document.getElementById('social-blade-link');
            if (socialBladeLink) {
                socialBladeLink.click(); // Click the link when ALT+1 is pressed
            }
        }
    });

})();