Greasy Fork

Greasy Fork is available in English.

缩小标题字体,缩小图片

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

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

// ==UserScript==
// @name         缩小标题字体,缩小图片
// @namespace    http://tampermonkey.net/
// @version      1.2
// @description  摸鱼的艺术,更新hover时恢复图片大小
// @author       chenjiamian
// @match        http://*/*
// @match        https://*/*
// @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();
    }

}
)();