Small YouTube Thumbnails

Reduce the size of YouTube thumbnails

目前為 2024-09-15 提交的版本,檢視 最新版本

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

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

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

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

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

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

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

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

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

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

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

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

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

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

// ==UserScript==
// @name         Small YouTube Thumbnails
// @namespace    http://tampermonkey.net/
// @version      2024-09-14
// @description  Reduce the size of YouTube thumbnails
// @author       Niji Bemani
// @match        https://www.youtube.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=youtube.com
// @grant        none
// @require      https://code.jquery.com/jquery-3.7.1.slim.min.js
// ==/UserScript==

(function() {
    'use strict';

    // Clean elements
    const clean = function() {
        $('ytd-thumbnail').css('max-width', 0);
        $('ytd-playlist-renderer').css('max-width', '50%');
        $('ytd-radio-renderer').css('max-width', '50%');
        //$('ytd-playlist-renderer').hide();
        //$('ytd-radio-renderer').hide();
    };

    // Add a MutationObserver on #contents element
    const initObserver = function() {
        // Select the node that will be observed for mutations
        const targetNode = document.getElementById("contents");

        // Callback function to execute when mutations are observed
        const callback = (mutationList, observer) => {
            // Execute a clean if any of below elements are found in added nodes
            const targetElements = ["YTD-THUMBNAIL", "YTD-PLAYLIST", "YTD-RADIO"];

            // Loop through added nodes
            let shouldClean = false;
            for (const mutation of mutationList) {
                if (mutation.type === "childList" && mutation.addedNodes.length) {
                    [].every.call(mutation.addedNodes, function(elm){
                        if (targetElements.some(name => elm.nodeName.includes(name))) {
                            shouldClean = true;
                            return false;
                        }
                    });
                }
                if (shouldClean) {
                    clean();
                    break;
                }
            }
        };

        // Create an observer instance linked to the callback function
        const observer = new MutationObserver(callback);

        // Start observing
        observer.observe(targetNode,{
            attributes: true, childList: true, subtree: true
        });
    };

    // Clean at the begining, then for future elements
    $(document).ready(function() {
        setTimeout(function(){
            clean();
            initObserver();
        }, 100);
    });
})();