☰

Youtube 隐藏视频

使视频较为透明。

目前为 2020-05-29 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name                Youtube: Hide Video
  3. // @name:zh-TW          Youtube 隱藏影片
  4. // @name:zh-CN          Youtube 隐藏视频
  5. // @name:ja             Youtube ビデオを隠す
  6. // @name:ko             Youtube 비디오 숨기기
  7. // @name:ru             Youtube Скрыть видео
  8. // @version             1.0.6
  9. // @description         Make the video and images opacity lower.
  10. // @description:zh-TW   使影片較為透明。
  11. // @description:zh-CN   使视频较为透明。
  12. // @description:ja      ビデオと画像の不透明度を低くします。
  13. // @description:ko      비디오 및 이미지의 불투명도를 낮추십시오.
  14. // @description:ru      Уменьшите непрозрачность видео и изображений.
  15. // @author              Hayao-Gai
  16. // @namespace           https://github.com/HayaoGai
  17. // @icon                https://upload.wikimedia.org/wikipedia/commons/4/4c/YouTube_icon.png
  18. // @match               https://www.youtube.com/*
  19. // @grant               GM_getValue
  20. // @grant               GM_setValue
  21. // ==/UserScript==
  22.  
  23. /* jshint esversion: 6 */
  24.  
  25. (function() {
  26.     'use strict';
  27.  
  28.     // icons made by https://www.flaticon.com/authors/pixel-perfect
  29.     const on1 = `<svg width="35" height="35" viewBox="0 -107 512 512"><path d="m0 149.332031c0 82.347657 67.007812 149.335938 149.332031 149.335938h213.335938c82.324219 0 149.332031-66.988281 149.332031-149.335938 0-82.34375-67.007812-149.332031-149.332031-149.332031h-213.335938c-82.324219 0-149.332031 66.988281-149.332031 149.332031zm277.332031 0c0-47.058593 38.273438-85.332031 85.335938-85.332031 47.058593 0 85.332031 38.273438 85.332031 85.332031 0 47.0625-38.273438 85.335938-85.332031 85.335938-47.0625 0-85.335938-38.273438-85.335938-85.335938zm0 0"/></svg>`;
  30.     const on2 = `<svg width="35" height="35" viewBox="0 -107 512 512"><path d="m362.667969 298.667969h-213.335938c-82.34375 0-149.332031-67.007813-149.332031-149.335938 0-82.324219 66.988281-149.332031 149.332031-149.332031h213.335938c82.34375 0 149.332031 67.007812 149.332031 149.332031 0 82.328125-66.988281 149.335938-149.332031 149.335938zm-213.335938-266.667969c-64.703125 0-117.332031 52.652344-117.332031 117.332031 0 64.683594 52.628906 117.335938 117.332031 117.335938h213.335938c64.703125 0 117.332031-52.652344 117.332031-117.335938 0-64.679687-52.628906-117.332031-117.332031-117.332031zm0 0"/><path d="m362.667969 234.667969c-47.0625 0-85.335938-38.273438-85.335938-85.335938 0-47.058593 38.273438-85.332031 85.335938-85.332031 47.058593 0 85.332031 38.273438 85.332031 85.332031 0 47.0625-38.273438 85.335938-85.332031 85.335938zm0-138.667969c-29.398438 0-53.335938 23.914062-53.335938 53.332031 0 29.421875 23.9375 53.335938 53.335938 53.335938 29.394531 0 53.332031-23.914063 53.332031-53.335938 0-29.417969-23.9375-53.332031-53.332031-53.332031zm0 0"/></svg>`;
  31.     const off1 = `<svg width="35" height="35" viewBox="0 -107 512 512"><path d="m362.667969 298.667969h-213.335938c-82.34375 0-149.332031-67.007813-149.332031-149.335938 0-82.324219 66.988281-149.332031 149.332031-149.332031h213.335938c82.34375 0 149.332031 67.007812 149.332031 149.332031 0 82.328125-66.988281 149.335938-149.332031 149.335938zm-213.335938-266.667969c-64.703125 0-117.332031 52.652344-117.332031 117.332031 0 64.683594 52.628906 117.335938 117.332031 117.335938h213.335938c64.703125 0 117.332031-52.652344 117.332031-117.335938 0-64.679687-52.628906-117.332031-117.332031-117.332031zm0 0"/><path d="m149.332031 234.667969c-47.058593 0-85.332031-38.273438-85.332031-85.335938 0-47.058593 38.273438-85.332031 85.332031-85.332031 47.0625 0 85.335938 38.273438 85.335938 85.332031 0 47.0625-38.273438 85.335938-85.335938 85.335938zm0-138.667969c-29.394531 0-53.332031 23.914062-53.332031 53.332031 0 29.421875 23.9375 53.335938 53.332031 53.335938 29.398438 0 53.335938-23.914063 53.335938-53.335938 0-29.417969-23.9375-53.332031-53.335938-53.332031zm0 0"/></svg>`;
  32.     const off2 = `<svg width="35" height="35" viewBox="0 -107 512 512"><path d="m362.667969 0h-213.335938c-82.324219 0-149.332031 66.988281-149.332031 149.332031 0 82.347657 67.007812 149.335938 149.332031 149.335938h213.335938c82.324219 0 149.332031-66.988281 149.332031-149.335938 0-82.34375-67.007812-149.332031-149.332031-149.332031zm-213.335938 234.667969c-47.058593 0-85.332031-38.273438-85.332031-85.335938 0-47.058593 38.273438-85.332031 85.332031-85.332031 47.0625 0 85.335938 38.273438 85.335938 85.332031 0 47.0625-38.273438 85.335938-85.335938 85.335938zm0 0"/></svg>`;
  33.  
  34.     const textStyle = `
  35. .switch {
  36.     cursor: pointer;
  37.     position: absolute;
  38.     left: 190px;
  39.     top: 8px;
  40. }
  41. .switch[dark="true"] {
  42.     position: absolute;
  43.     left: 190px;
  44.     top: 8px;
  45.     fill: white;
  46. }
  47. .hide-set {
  48.     transition: opacity 0.3s;
  49.     opacity: 0.1;
  50. }`;
  51.  
  52.     const targets = [
  53.         "img",
  54.         "video",
  55.         "#background",
  56.         ".ytp-videowall-still-image"
  57.     ];
  58.  
  59.     let updating = false;
  60.     let href = document.location.href;
  61.  
  62.     css();
  63.  
  64.     observation();
  65.  
  66.     keyListener();
  67.  
  68.     init(10);
  69.  
  70.     window.addEventListener("scroll", update, true);
  71.  
  72.     function init(times) {
  73.         for (let i = 0; i < times; i++) {
  74.             // switch.
  75.             setTimeout(addButton, 500 * i);
  76.             // hide targets.
  77.             for (const target of targets) {
  78.                 setTimeout(() => hideTarget(`${target}:not(.hide-set)`), 500 * i);
  79.             }
  80.         }
  81.         // show targets.
  82.         showTarget();
  83.     }
  84.  
  85.     function addButton() {
  86.         // check exist
  87.         if (!!document.querySelector(".switch")) return;
  88.         // get parent.
  89.         const logoPanel = document.querySelector("ytd-topbar-logo-renderer#logo");
  90.         if (!logoPanel) return;
  91.         // add button.
  92.         const button = document.createElement("span");
  93.         button.classList.add("switch");
  94.         button.innerHTML = switchSVG();
  95.         button.addEventListener("click", onClick);
  96.         logoPanel.parentNode.insertBefore(button, logoPanel.nextSibling);
  97.         // add "dark" attribute.
  98.         const attDark = document.createAttribute("dark");
  99.         attDark.value = isDark();
  100.         button.setAttributeNode(attDark);
  101.     }
  102.  
  103.     function isDark() {
  104.         return !!document.querySelector("html").getAttribute("dark");
  105.     }
  106.  
  107.     function switchSVG() {
  108.         const on = (!isDark() && !window.location.href.includes("watch?v=")) ? on1 : on2;
  109.         const off = (!isDark() && !window.location.href.includes("watch?v=")) ? off1 : off2;
  110.         return getToggle() ? on : off;
  111.     }
  112.  
  113.     function onClick() {
  114.         GM_setValue("switch", !getToggle());
  115.         this.innerHTML = switchSVG();
  116.         init(3);
  117.     }
  118.  
  119.     function hideTarget(target) {
  120.         // check toggle.
  121.         if (!getToggle()) return;
  122.         // hide target.
  123.         document.querySelectorAll(target).forEach(t => {
  124.             t.classList.add("hide-set");
  125.         });
  126.     }
  127.  
  128.     function getToggle() {
  129.         return GM_getValue("switch", true);
  130.     }
  131.  
  132.     function keyListener() {
  133.         document.addEventListener("keydown", pressKey);
  134.     }
  135.  
  136.     function pressKey(event) {
  137.         if (event.keyCode === 72) {
  138.             const button = document.querySelector(".switch");
  139.             if (!button) return;
  140.             GM_setValue("switch", !getToggle());
  141.             button.innerHTML = switchSVG();
  142.             init(3);
  143.         }
  144.     }
  145.  
  146.     function showTarget() {
  147.         // check toggle.
  148.         if (getToggle()) return;
  149.         // show targets.
  150.         document.querySelectorAll(".hide-set").forEach(target => {
  151.             target.classList.remove("hide-set");
  152.         });
  153.     }
  154.  
  155.     function update() {
  156.         if (updating) return;
  157.         updating = true;
  158.         init(3);
  159.         setTimeout(() => { updating = false; }, 1000);
  160.     }
  161.  
  162.     function css() {
  163.         const style = document.createElement("style");
  164.         style.type = "text/css";
  165.         style.innerHTML = textStyle;
  166.         document.head.appendChild(style);
  167.     }
  168.  
  169.     function observation() {
  170.         const observer = new MutationObserver(mutations => {
  171.             mutations.forEach(() => {
  172.                 if (href != document.location.href) {
  173.                     href = document.location.href;
  174.                     init(10);
  175.                 }
  176.             });
  177.         });
  178.         const target = document.querySelector("body");
  179.         const config = { childList: true, subtree: true };
  180.         observer.observe(target, config);
  181.     }
  182.  
  183. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址