☰

HideImages

Add a button to hide or show web images. Hide/show status will be remember by domain.

// ==UserScript==
// @name              HideImages
// @name:zh-CN        隐藏图片
// @namespace         https://greasyfork.org/users/1403857
// @description       Add a button to hide or show web images. Hide/show status will be remember by domain.
// @description:zh-CN 在网页增加一个快捷按钮，一键隐藏/显示图片。隐藏/显示状态会根据域名被记住。
// @author            Eric
// @license           MIT
// @match             *://*/*
// @run-at            document-end
// @grant             GM_getValue
// @grant             GM_setValue
// @version           1.0.3
// ==/UserScript==

(function () {
    'use strict';

    const hiddenDomains = new Set(GM_getValue("hiddenDomains"));

    // 插入到页面中
    let btnDom = document.createElement('div');  // 生成待插入的元素
    btnDom.className = 'hi-btn';
    if (hiddenDomains.has(document.location.hostname)) {
        btnDom.textContent = '显';
        btnDom.style.backgroundColor = '#17b978';
    } else {
        btnDom.textContent = '隐';
        btnDom.style.backgroundColor = '#ff6f3c';
    }
    document.body.appendChild(btnDom);

    // 再添加样式
    let style = `
      .hi-btn {
        position: fixed;
        right: 20px;
        bottom: 100px;
        z-index: 9999;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #ff6f3c;
        border-radius: 10px;
        transition: all 0.5s;
        cursor: pointer;
        font-size: 20px;
        color: #ffffff;
      }
    `

    let styleDom = document.createElement('style');
    styleDom.innerHTML = style;
    document.head.appendChild(styleDom);

    // 处理事件
    btnDom.addEventListener('click', function () {
        // 切换按钮文本内容
        if (hiddenDomains.has(document.location.hostname)) {
            btnDom.textContent = '隐';
            btnDom.style.backgroundColor = '#ff6f3c';
            hiddenDomains.delete(document.location.hostname);
        } else {
            btnDom.textContent = '显';
            btnDom.style.backgroundColor = '#17b978';
            hiddenDomains.add(document.location.hostname);
        }

        GM_setValue("hiddenDomains", [...hiddenDomains]);

        hideMedia();
    })

    function hideMedia() {
        const show = !hiddenDomains.has(document.location.hostname);

        const images = document.querySelectorAll('img, image, photo, thumbnail, picture, gallery, icon, avatar, video, art-player-wrapper, imgbox-border, img-wrapper, goods');
        // 遍历所有的图片元素，并设置它们的 display 样式为 none 或者 block
        images.forEach(function (element) {
            if (show) {
                element.style.display = '';
            } else {
                element.style.display = 'none';
            }
        });

        // 针对小红书处理
        const redImages = document.querySelectorAll('.cover.ld.mask');
        redImages.forEach(function (element) {
            if (show) {
                element.style.display = '';
            } else {
                element.style.display = 'none';
            }
        });
        // 小红书点击后的内容隐藏
        const redImagesIn = document.querySelectorAll('.media-container');
        redImagesIn.forEach(function (element) {
            if (show) {
                element.style.display = '';
            } else {
                element.style.display = 'none';
            }
        });
    }

    function observeDOM() {
        const observer = new MutationObserver(() => {
            hideMedia();
        });

        observer.observe(document.body, {
            childList: true,
            subtree: true,
        });
    }

    observeDOM();
})();