Twitter 隱藏圖片

調整 Twitter 圖片的透明度。

目前為 2020-05-19 提交的版本,檢視 最新版本

您需要先安裝使用者腳本管理器擴展,如 TampermonkeyGreasemonkeyViolentmonkey 之後才能安裝該腳本。

You will need to install an extension such as Tampermonkey to install this script.

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyUserscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展,比如 Tampermonkey,才能安裝此腳本

您需要先安裝使用者腳本管理器擴充功能後才能安裝該腳本。

(我已經安裝了使用者腳本管理器,讓我安裝!)

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

(我已經安裝了使用者樣式管理器,讓我安裝!)

// ==UserScript==
// @name               Twitter: Hide Image
// @name:zh-TW         Twitter 隱藏圖片
// @name:zh-CN         Twitter 隐藏图片
// @name:ja            Twitter 画像を非表示
// @name:ko            Twitter 이미지 숨기기
// @name:ru            Twitter Скрыть изображение
// @version            1.0.4
// @description        Make Twitter Images Opacity Lower.
// @description:zh-TW  調整 Twitter 圖片的透明度。
// @description:zh-CN  调整 Twitter 图片的透明度。
// @description:ja     Twitter画像の不透明度を低くします。
// @description:ko     Twitter 이미지 불투명도를 낮추십시오.
// @description:ru     Уменьшите непрозрачность изображений в Twitter.
// @author             Hayao-Gai
// @namespace	       https://github.com/HayaoGai
// @icon               https://i.imgur.com/M9oO8K9.png
// @match              https://twitter.com/*
// @grant              none
// ==/UserScript==

/* jshint esversion: 6 */

(function() {
    'use strict';

    let updating = false;

    init();
    locationChange();
    window.addEventListener("scroll", update);

    function init() {
        for (let i = 0; i < 10; i++) {
            setTimeout(getTarget, 500 * i);
        }
    }

    function update() {
        if (updating) return;
        updating = true;
        getTarget();
        setTimeout(() => { updating = false; }, 1000);
    }

    function getTarget(retry = 0) {
        // get
        const images = document.querySelectorAll("img:not(.hide-set)");
        // check
        if (!images.length) {
            if (retry < 10) setTimeout(() => getTarget(retry + 1), 500);
            return;
        }
        // adjust
        images.forEach(image => {
            image.classList.add("hide-set");
            // emoji
            if (image.draggable) {
                const div = image.parentElement.querySelector("div");
                if (!!div) {
                    // css
                    div.style.opacity = 0.1;
                    div.style.transition = "opacity 0.3s";
                    // event
                    image.addEventListener("mouseenter", () => showImage(div));
                    image.addEventListener("mouseleave", () => hideImage(div));
                }
            }
        });
    }

    function showImage(div) {
        div.style.opacity = 1;
    }

    function hideImage(div) {
        div.style.opacity = 0.1;
    }

    function locationChange() {
        window.addEventListener('locationchange', init);
        // situation 1
        history.pushState = ( f => function pushState(){
            var ret = f.apply(this, arguments);
            window.dispatchEvent(new Event('pushState'));
            window.dispatchEvent(new Event('locationchange'));
            return ret;
        })(history.pushState);
        // situation 2
        history.replaceState = ( f => function replaceState(){
            var ret = f.apply(this, arguments);
            window.dispatchEvent(new Event('replaceState'));
            window.dispatchEvent(new Event('locationchange'));
            return ret;
        })(history.replaceState);
        // situation 3
        window.addEventListener('popstate', () => window.dispatchEvent(new Event('locationchange')));
    }

})();