☰

Custom Image for Youtube Background

Replace the old boring flat background with whatever picture you like

当前为 2024-06-16 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Custom Image for Youtube Background
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1
  5. // @description  Replace the old boring flat background with whatever picture you like
  6. // @author       Hoover
  7. // @match        *://*.youtube.com/*
  8. // @icon         https://www.google.com/s2/favicons?sz=64&domain=youtube.com
  9. // @grant        none
  10. // @license      MIT
  11. // ==/UserScript==
  12.  
  13. (function () {
  14.     'use strict';
  15.     // Fill the array up with URLs to pictures
  16.     const bgSources = [
  17.         "https://i.kym-cdn.com/photos/images/original/000/581/296/c09.jpg",
  18.         "https://i.kym-cdn.com/photos/images/original/000/581/296/c09.jpg"
  19.     ]
  20.  
  21.     function getRandomImageUrl(images) {
  22.         const randomIndex = Math.floor(Math.random() * images.length);
  23.         return images[randomIndex];
  24.     }
  25.  
  26.     // Select only one image from the array
  27.     let bgImage = getRandomImageUrl(bgSources);
  28.  
  29.     function applyBackground() {
  30.         var primaryElement = document.getElementById('content');
  31.         if (primaryElement) {
  32.             primaryElement.style.backgroundImage = `url(${bgImage})`;
  33.             primaryElement.style.backgroundAttachment = 'fixed';
  34.             primaryElement.style.backgroundSize = 'cover';
  35.             primaryElement.style.backgroundRepeat = 'no-repeat';
  36.             primaryElement.style.backgroundPosition = 'center';
  37.         }
  38.     }
  39.     
  40.     // Function to add transparency to some divs
  41.     function applyTransparency(divName) {
  42.         var divElem = document.getElementById(divName);
  43.         if (divElem) {
  44.             divElem.style.opacity = 0.9;
  45.         }
  46.     }
  47.  
  48.     // Repackaged for quick calling
  49.     function applyTransparentElems() {
  50.         applyTransparency('guide');
  51.         applyTransparency('chips-wrapper');
  52.     }
  53.  
  54.     // Function to remove elements by class name
  55.     function removeElementsByID(id) {
  56.         var element = document.getElementById(id);
  57.         if (element) {
  58.             element.parentNode.removeChild(element);
  59.         }
  60.     }
  61.  
  62.  
  63.     // Must remove cinematic container (the glowing effect when video plays)
  64.     removeElementsByID('cinematics-container');
  65.  
  66.     applyTransparentElems();
  67.  
  68.     // Check for the element every 500ms until it is found
  69.     var checkExist = setInterval(function () {
  70.         if (document.getElementById('content')) {
  71.             applyBackground();
  72.             clearInterval(checkExist);
  73.             removeElementsByID('cinematics-container');
  74.         }
  75.     }, 500);
  76.  
  77.     // Additionally, listen for page changes and reapply the background
  78.     var observer = new MutationObserver(function (mutations) {
  79.         mutations.forEach(function (mutation) {
  80.             if (mutation.addedNodes.length) {
  81.                 applyBackground();
  82.                 applyTransparentElems()
  83.                 removeElementsByID('cinematics-container');
  84.             }
  85.         });
  86.     });
  87.  
  88.     observer.observe(document.body, {
  89.         childList: true,
  90.         subtree: true
  91.     });
  92. })();