☰

HideIMGs

hide all images with a click

  1. // ==UserScript==
  2. // @name         HideIMGs
  3. // @namespace    http://tampermonkey.net/
  4. // @version      2024-09-18
  5. // @description  hide all images with a click
  6. // @author       whp-henry
  7. // @match        *://*/*
  8. // @grant        none
  9. // @license      MIT
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     let customCSSEnabled = false;
  16.  
  17.     function addCustomCSS() {
  18.         const css = `
  19.             img {
  20.                 opacity: 0 !important;
  21.                 transition: opacity 1s !important;
  22.             }
  23.             img:hover {
  24.                 opacity: 0.3 !important;
  25.             }
  26.             imgswitchbtn .btninner {
  27.                 left: 10px;
  28.                 background-color: red;
  29.             }
  30.         `;
  31.         const style = document.createElement('style');
  32.         style.id = 'customCSS';
  33.         style.type = 'text/css';
  34.         style.appendChild(document.createTextNode(css));
  35.         document.head.appendChild(style);
  36.     }
  37.  
  38.     function generalCustomCSS() {
  39.         const css = `
  40.             img {
  41.                 transition: opacity 1s;
  42.             }
  43.             imgswitchbtn {
  44.                 transition: opacity 0.3s;
  45.                 opacity: 0.1;
  46.                 width: 30px;
  47.                 height: 20px;
  48.                 position: fixed;
  49.                 bottom: 10px;
  50.                 right: 10px;
  51.                 background-color: #cacaca;
  52.                 border-radius: 10px;
  53.                 border: gray solid 1px;
  54.                 box-sizing: border-box;
  55.             }
  56.             imgswitchbtn:hover {
  57.                 opacity: 1;
  58.             }
  59.             imgswitchbtn .btninner {
  60.                 width: 14px;
  61.                 height: 14px;
  62.                 position: absolute;
  63.                 margin: 2px;
  64.                 left: 0px;
  65.                 background-color: blue;
  66.                 transition: 0.5s;
  67.                 border-radius: 50%;
  68.             }
  69.         `;
  70.         const Cstyle = document.createElement('style');
  71.         Cstyle.id = 'generalcustomCSS';
  72.         Cstyle.type = 'text/css';
  73.         Cstyle.appendChild(document.createTextNode(css));
  74.         document.head.appendChild(Cstyle);
  75.     }
  76.  
  77.     function removeCustomCSS() {
  78.         const style = document.getElementById('customCSS');
  79.         if (style) {
  80.             console.log("remove");
  81.             style.remove();
  82.         }
  83.     }
  84.  
  85.     function toggleCustomCSS() {
  86.         if (customCSSEnabled) {
  87.             removeCustomCSS();
  88.         } else {
  89.             addCustomCSS();
  90.         }
  91.         customCSSEnabled = !customCSSEnabled;
  92.     }
  93.  
  94.     // Create the toggle button
  95.     function createToggleButton() {
  96.         const toggleButton = document.createElement('imgswitchbtn');
  97.         toggleButton.innerHTML = '<div class="btninner"></div>';
  98.  
  99.         toggleButton.addEventListener('click', toggleCustomCSS);
  100.         document.body.appendChild(toggleButton);
  101.     }
  102.  
  103.     // Initialize
  104.     function init() {
  105.         generalCustomCSS();
  106.         createToggleButton();
  107.     }
  108.  
  109.     init(); // Run the script
  110.  
  111. })();