☰

Discord 이미지 숨기기

이미지의 불투명도를 낮추십시오.

  1. // ==UserScript==
  2. // @name                Discord: Hide Image
  3. // @name:zh-TW          Discord 隱藏圖片
  4. // @name:zh-CN          Discord 隐藏图片
  5. // @name:ja             Discord 画像を非表示
  6. // @name:ko             Discord 이미지 숨기기
  7. // @name:ru             Discord Скрыть изображение
  8. // @version             1.0.9
  9. // @description         Make 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://i.imgur.com/rE9N0R7.png
  18. // @match               https://discord.com/channels/*
  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 iconOn = `<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>`;
  30.     const iconOff = `<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>`;
  31.  
  32.     // css
  33.     const textStyle = `
  34. .hide-set {
  35.     transition: opacity 0.3s;
  36. }
  37. .switch-set {
  38.     fill: white;
  39.     text-align: center;
  40.     bottom: 10px;
  41.     cursor: pointer;
  42.     pointer-events: all;
  43. }`;
  44.  
  45.     // target
  46.     const targets = [
  47.         "img:not(.icon-27yU2q)", // all images.
  48.         "video", // all videos ( gifs ).
  49.         ".animatedContainer-1pJv5C", // the image on top of server channel lists.
  50.         ".avatarContainer-2inGBK", // the avatar images in channels.
  51.         ".icon-27yU2q" // discord server icons.
  52.     ];
  53.  
  54.     // update
  55.     let updating = false;
  56.  
  57.     css();
  58.  
  59.     init(10);
  60.  
  61.     locationChange();
  62.  
  63.     window.addEventListener("scroll", update, true);
  64.  
  65.     function init(times) {
  66.         for (let i = 0; i < times; i++) {
  67.             // switch
  68.             setTimeout(switchButton, 500 * i);
  69.             // hide
  70.             for (const target of targets) {
  71.                 setTimeout(() => hideTarget(target), 500 * i);
  72.             }
  73.         }
  74.         // show
  75.         showTarget();
  76.     }
  77.  
  78.     function switchButton() {
  79.         // check exist
  80.         const isExist = document.querySelector(".switch-set");
  81.         if (!!isExist) return;
  82.         // left panel ( parent )
  83.         const leftPanel = document.querySelector("nav");
  84.         if (!leftPanel) return;
  85.         // add switch button
  86.         const button = document.createElement("div");
  87.         button.className = "unreadMentionsIndicatorBottom-BXS58x switch-set";
  88.         button.innerHTML = getToggle() ? iconOn : iconOff;
  89.         button.addEventListener("click", onClick);
  90.         leftPanel.appendChild(button);
  91.     }
  92.  
  93.     function onClick() {
  94.         const afterClick = !getToggle();
  95.         GM_setValue("switch", afterClick);
  96.         this.innerHTML = afterClick ? iconOn : iconOff;
  97.         init(3);
  98.     }
  99.  
  100.     function hideTarget(target) {
  101.         // check toggle
  102.         if (!getToggle()) return;
  103.         // hide target
  104.         document.querySelectorAll(`${target}:not(.hide-set)`).forEach(t => {
  105.             t.classList.add("hide-set");
  106.             t.style.opacity = 0.1;
  107.             t.addEventListener("mouseenter", addListener);
  108.             t.addEventListener("mouseleave", addListener);
  109.         });
  110.     }
  111.  
  112.     function showTarget() {
  113.         // check toggle
  114.         if (getToggle()) return;
  115.         // show target
  116.         document.querySelectorAll(".hide-set").forEach(t => {
  117.             t.classList.remove("hide-set");
  118.             t.style.opacity = 1;
  119.             t.removeEventListener("mouseenter", addListener);
  120.             t.removeEventListener("mouseleave", addListener);
  121.         });
  122.     }
  123.  
  124.     function getToggle() {
  125.         return GM_getValue("switch", true);
  126.     }
  127.  
  128.     function addListener() {
  129.         this.style.opacity = this.style.opacity > 0.5 ? 0.1 : 1;
  130.     }
  131.  
  132.     function update() {
  133.         if (updating) return;
  134.         updating = true;
  135.         init(3);
  136.         setTimeout(() => { updating = false; }, 1000);
  137.     }
  138.  
  139.     function css() {
  140.         const style = document.createElement("style");
  141.         style.type = "text/css";
  142.         style.innerHTML = textStyle;
  143.         document.head.appendChild(style);
  144.     }
  145.  
  146.     function locationChange() {
  147.         window.addEventListener('locationchange', () => init(10));
  148.         // situation 1
  149.         history.pushState = (f => function pushState(){
  150.             var ret = f.apply(this, arguments);
  151.             window.dispatchEvent(new Event('pushState'));
  152.             window.dispatchEvent(new Event('locationchange'));
  153.             return ret;
  154.         })(history.pushState);
  155.         // situation 2
  156.         history.replaceState = (f => function replaceState(){
  157.             var ret = f.apply(this, arguments);
  158.             window.dispatchEvent(new Event('replaceState'));
  159.             window.dispatchEvent(new Event('locationchange'));
  160.             return ret;
  161.         })(history.replaceState);
  162.         // situation 3
  163.         window.addEventListener('popstate', () => window.dispatchEvent(new Event('locationchange')));
  164.     }
  165.  
  166. })();