☰

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