求助：Chrome中自动运行JS修改第三方网页CSS的可行方案

先排查扩展失效的常见原因 #

• 扩展的页面匹配规则未配置正确：需确保脚本仅在目标订单应用页面触发，而非所有页面
• 脚本运行时机过早：页面DOM未加载完成就执行，导致找不到<td>元素
• 页面采用动态渲染：订单内容异步加载或通过前端框架生成，静态查询无法捕获新元素

正确的Tampermonkey/Violentmonkey脚本写法 #

将下方脚本复制到扩展的新建脚本中，替换原有内容：

// ==UserScript==
// @name         标记订单数量为2的项
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  将订单页面中数量为2的文本设置为大字号红色字体
// @match        https://你的第三方订单应用域名/*  // 替换为实际订单页面的域名
// @run-at       document-idle  // 确保DOM加载完成后执行
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    function markNumberTwo() {
        // 遍历所有td元素，精准匹配文本为"2"的项
        const tds = document.querySelectorAll('td');
        tds.forEach(td => {
            // 避免误匹配包含"2"的其他数字（如12、20）
            if (td.textContent.trim() === '2') {
                td.style.color = 'red';
                td.style.fontSize = '22px';
                td.style.fontWeight = 'bold';
            }
        });
    }

    // 页面首次加载时执行一次标记
    markNumberTwo();

    // 监听DOM变化，处理动态加载的订单内容
    const observer = new MutationObserver((mutations) => {
        mutations.forEach(mutation => {
            if (mutation.addedNodes.length > 0) {
                markNumberTwo();
            }
        });
    });

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

关键配置&优化说明 #

• @match：必须替换为你实际使用的订单应用域名（如https://example.com/orders/*），确保脚本仅在目标页面运行
• @run-at document-idle：等待页面DOM完全加载后再执行脚本，避免出现找不到元素的情况
• MutationObserver：监听页面DOM变化，当新的订单元素动态加载时自动重新执行标记逻辑，解决动态渲染问题
• 文本匹配优化：原脚本用innerHTML.split会误匹配包含"2"的内容，改为匹配textContent.trim() === '2'更精准，且直接修改元素样式不会破坏原有页面的事件绑定

扩展设置步骤 #

1. 打开Tampermonkey/Violentmonkey，点击「新建脚本」
2. 删除默认模板内容，粘贴上述脚本
3. 修改@match中的域名，保存脚本
4. 刷新订单页面，脚本即可自动生效

内容的提问来源于stack exchange，提问作者Zied Drira