Consistent Youtube logo

Replace the YouTube logo with a custom image, set a constant width of 94px, update the logo link to youtube.com, and change the mouse-over text to "YouTube".

您需要先安裝使用者腳本管理器擴展,如 TampermonkeyGreasemonkeyViolentmonkey 之後才能安裝該腳本。

You will need to install an extension such as Tampermonkey to install this script.

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyUserscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展,比如 Tampermonkey,才能安裝此腳本

您需要先安裝使用者腳本管理器擴充功能後才能安裝該腳本。

(我已經安裝了使用者腳本管理器,讓我安裝!)

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

(我已經安裝了使用者樣式管理器,讓我安裝!)

// ==UserScript==
// @name         Consistent Youtube logo
// @namespace    http://tampermonkey.net/
// @version      0.6
// @description  Replace the YouTube logo with a custom image, set a constant width of 94px, update the logo link to youtube.com, and change the mouse-over text to "YouTube".
// @author       jflo
// @match        https://www.youtube.com/*
// @grant        none
// @licensec     MIT
// ==/UserScript==

(function() {
    'use strict';

    // URL of the custom logo you want to use
    const customLogoUrl = 'https://i.imgur.com/maYoqkV.png'; // Replace with your custom logo URL
    const customLogoWidth = '94px'; // Set the desired width for the custom logo

    // Function to replace the logo, update the link, and change the mouse-over text
    function replaceLogo() {
        // Select all possible logo image elements
        const logoImages = document.querySelectorAll('img[src*="youtube/img/promos/growth/"]');
        const logoLinks = document.querySelectorAll('a[href*="/?bp=wgUCEAE%3D"]'); // Selector for the logo link

        logoImages.forEach(logoImage => {
            // Replace the logo's src and srcset with the custom logo URL
            logoImage.src = customLogoUrl;
            logoImage.srcset = customLogoUrl;
            // Set the custom width and height
            logoImage.style.width = customLogoWidth;
            logoImage.style.height = 'auto'; // Maintain aspect ratio
            logoImage.width = '94'; // Set width attribute
            logoImage.height = ''; // Clear any height attribute to maintain aspect ratio
            // Set the mouse-over text
            logoImage.alt = 'YouTube';
            logoImage.title = 'YouTube';
        });

        // Update the link associated with the logo
        logoLinks.forEach(logoLink => {
            logoLink.href = 'https://www.youtube.com/';
            logoLink.title = 'YouTube';
        });
    }

    // Run the function when the page loads
    window.addEventListener('load', replaceLogo);

    // Optionally, run the function when the DOM changes (e.g., when navigating within YouTube)
    const observer = new MutationObserver(replaceLogo);
    observer.observe(document.body, { childList: true, subtree: true });
})();