Greasy Fork

Greasy Fork is available in English.

缩小标题字体,缩小图片

摸鱼的艺术,更新hover时恢复图片大小

当前为 2023-04-03 提交的版本,查看 最新版本

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Greasemonkey 油猴子Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Userscripts ,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name         缩小标题字体,缩小图片
// @namespace    http://tampermonkey.net/
// @version      1.1
// @description  摸鱼的艺术,更新hover时恢复图片大小
// @author       chenjiamian
// @match        http://*/*
// @exclude      *.png
// @exclude      *.jpg
// @exclude      *.gif
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant        none
// @license MIT
// ==/UserScript==

(function() {
    'use strict';





    function addCSS(cssText) {
        var style = document.createElement('style')
          , //创建一个style元素
        head = document.head || document.getElementsByTagName('head')[0];
        //获取head元素
        style.type = 'text/css';
        //这里必须显示设置style元素的type属性为text/css,否则在ie中不起作用
        if (style.styleSheet) {
            //IE
            var func = function() {
                try {
                    //防止IE中stylesheet数量超过限制而发生错误
                    style.styleSheet.cssText = cssText;
                } catch (e) {}
            }
            //如果当前styleSheet还不能用,则放到异步中则行
            if (style.styleSheet.disabled) {
                setTimeout(func, 10);
            } else {
                func();
            }
        } else {
            //w3c
            //w3c浏览器中只要创建文本节点插入到style元素中就行了
            var textNode = document.createTextNode(cssText);
            style.appendChild(textNode);
        }
        head.appendChild(style);
        //把创建的style元素插入到head中
    }

    const func = ()=>{
            let cssTxt = '';
            Array.from(document.getElementsByTagName('*')).forEach(ele=>{
                if (!['HTML', 'HEAD', 'BODY'].includes(ele.tagName)) {
                    const fontSizeStr = getComputedStyle(ele).fontSize;
                    const fontSizeRes = fontSizeStr.match(/(\d+)(\w+)/);
                    if (fontSizeRes) {
                        const num = fontSizeRes.at(1);
                        const unit = fontSizeRes.at(2);
                        const isTooBig = unit === 'rem' ? Number(num) > 1 : Number(num) > 20
                        ele.style.fontSize = '16px';
                    }
                }

                if (ele.tagName === 'IMG') {
                    if (['.png', '.jpg', '.gif'].some(i=>location.href.includes(i)))
                        return;
                    //忽略图片预览类网址
                    const imgWidthStr = getComputedStyle(ele).width;
                    const imgWidthRes = imgWidthStr.match(/^([+-]?(?:\d*\.\d+|\d+\.?)(?:[eE][+-]?\d+)?)\s*([a-zA-Z]*)$/);
                    if (imgWidthRes) {
                        const num = imgWidthRes.at(1);
                        const unit = imgWidthRes.at(2);
                        const isTooBig = unit === 'rem' ? Number(num) > 10 : Number(num) > 500
                        if (isTooBig) {
                            //hover时恢复图片尺寸
                            const noAnimation = ['all 0s ease 0s', "none 0s ease 0s"].includes(getComputedStyle(ele).transition);

                            if (noAnimation) {
                                const genCSSSelector = (ele)=>{
                                    if (ele.id)
                                        return `img[id="${ele.id}"]:hover`
                                    else {
                                        if(ele.src.startsWith('data:')) return `img[src="${ele.src}"]`;//base64的src
                                        else{
                                            const the_src = ele.src || ele.getAttribute('_src')
 || '找不到可用选择器';
                                            //http的src
                                            const url = new URL(the_src)//_src是一些网站懒加载的
                                            return `img[src="${url.pathname + url.search}"]:hover,img[src="${the_src}"]:hover`;
                                        }
                                    }
                                }
                                cssTxt += `${genCSSSelector(ele)}{
                                                width:${ele.width}px !important;height:${ele.height}px !important;
                                 }
                               `;
                            }

                            //变小
                            ele.style.width = '150px';
                            ele.style.height = 'auto';
                        }

                        //使用

                    }
                }

            }
            )

            addCSS(cssTxt);
            console.log('缩小字体完成');
    }

    window.addEventListener("load", function() {
        console.log("All resources have been loaded.");
        func();
    });

    window.addEventListener('hashchange', ()=>{
        console.log('hash change');
        func();
    }
    )

    //修改native以拦截popstate事件
    var pushState = history.pushState;
    history.pushState = function() {
        var ret = pushState.apply(history, arguments);
        window.dispatchEvent(new Event("pushstate"));
        window.dispatchEvent(new Event("locationchangefathom"));
        return ret;
    }

    window.addEventListener("popstate", function() {
        window.dispatchEvent(new Event("locationchangefathom"))
    });
    window.addEventListener("locationchangefathom", trackPageview)
    function trackPageview() {
        func();
    }

}
)();