Greasy Fork

来自缓存

Greasy Fork is available in English.

it之家评论区显示图片-优化版

it之家评论区自动显示图片,无需跳转到手机版

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

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

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

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

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

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

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

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

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

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

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

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

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

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

// ==UserScript==
// @name        it之家评论区显示图片-优化版
// @namespace   https://github.com/daimiaopeng
// @version     1.0
// @description it之家评论区自动显示图片,无需跳转到手机版
// @author      daimiaopeng
// @match       https://*.ithome.com/*
// @icon        https://img.ithome.com/img/soft/ithome.svg
// ==/UserScript==

(function() {
    'use strict';

    // 监听DOM节点的变化
    const observer = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
            if (mutation.type === 'childList') {
                // 处理新添加的节点
                handleNewNodes(mutation.addedNodes);
            }
        });
    });

    // 配置观察选项
    const config = { childList: true, subtree: true };

    // 开始观察页面的根节点
    observer.observe(document.body, config);

    function handleNewNodes(nodes) {
        nodes.forEach((node) => {
            if (node.nodeType === Node.ELEMENT_NODE) {
                if (node.matches('.post-img-list.c-1')) {
                    decodeAndDisplayImage(node);
                }
                // 递归处理子节点
                node.querySelectorAll('.post-img-list.c-1').forEach((childNode) => {
                    decodeAndDisplayImage(childNode);
                });
            }
        });
    }

    function decodeAndDisplayImage(node) {
        const span = node.querySelector('span.img-placeholder');
        if (span) {
            const dataS = span.getAttribute('data-s');
            if (dataS) {
                const decodedUrl = atob(dataS);

                // 创建链接和图片元素
                const a = document.createElement('a');
                a.href = decodedUrl; // 设置链接地址
                a.target = '_blank'; // 在新页面打开

                const img = document.createElement('img');
                img.src = decodedUrl;
                img.style.width = '100px'; // 设置图片宽度
                //img.style.height = '100px'; // 设置图片高度

                // 清空span内容并添加链接和图片
                span.innerHTML = '';
                a.appendChild(img);
                span.appendChild(a);
            }
        }
    }

    // 初始化时处理已有的节点
    document.querySelectorAll('.post-img-list.c-1').forEach((node) => {
        decodeAndDisplayImage(node);
    });
})();