篡改猴脚本常见问题：如何正确注入并操作页面DOM元素？

Question

在使用篡改猴（Tampermonkey）开发用户脚本时，一个常见的问题是：如何在页面正确加载之前或过程中注入并操作DOM元素，以确保脚本能稳定地选中目标节点？由于页面加载时机不一，直接使用 `document.getElementById` 或 `querySelector` 常常返回 `null`，导致操作失败。常见的解决方案包括使用 `window.onload`、`DOMContentLoaded` 事件、`MutationObserver` 或定时轮询（如 `setInterval`）等方式监听DOM变化。然而，开发者往往不清楚这些方法的适用场景与性能影响，导致脚本不稳定或效率低下。掌握如何根据页面结构和加载行为选择合适的DOM注入与监听策略，是提升篡改猴脚本健壮性的关键。

Answer 1

一、背景与问题概述

在使用篡改猴（Tampermonkey）开发用户脚本时，一个常见的挑战是：如何在页面正确加载之前或过程中注入并操作DOM元素？由于页面结构和加载顺序的不确定性，直接使用 document.getElementById 或 querySelector 常常返回 null，导致脚本无法稳定执行。

页面加载是一个异步过程，脚本执行时机与DOM构建的先后顺序决定了能否成功获取元素。开发者需要理解不同DOM加载阶段以及对应的监听策略，以确保脚本在合适时机介入并操作目标节点。

二、常见的DOM加载阶段与监听策略

以下是几种常见的DOM加载阶段及对应的监听方式：

1. DOMContentLoaded：当初始的 HTML 文档被完全加载和解析完成，不等待样式表、图片和子框架的加载。
2. window.onload：整个页面（包括所有依赖资源如图片、样式表等）完全加载完毕。
3. MutationObserver：用于监听DOM树的变化，适用于动态内容加载的场景。
4. setInterval / setTimeout：通过轮询的方式周期性检查目标元素是否存在。

三、不同策略的适用场景与性能对比

为了更清晰地比较这些策略，我们将其适用场景与性能影响整理如下：

策略	适用场景	优点	缺点
DOMContentLoaded	静态页面加载完成时执行	执行早，性能好	无法操作动态加载的内容
window.onload	整个页面（含资源）加载完成后执行	确保所有资源已加载	延迟执行，可能影响用户体验
MutationObserver	监听DOM变化，适用于SPA或异步加载内容	实时响应，灵活度高	实现复杂，需谨慎使用以避免性能问题
setInterval	简单轮询检查元素是否存在	实现简单，适合小范围目标	性能开销大，不适合大规模监听

四、进阶技巧与最佳实践

在实际开发中，结合多个策略往往能获得更好的稳定性和性能表现。例如：

• 优先使用 DOMContentLoaded 或 window.onload 确保基础DOM结构加载完成。
• 使用 MutationObserver 监听特定容器节点的变化，适用于Ajax加载或React/Vue等框架生成的内容。
• 对于简单目标节点，可设置一个短时轮询机制（如5次内），避免长时间阻塞。

五、示例代码：结合 MutationObserver 与 DOMContentLoaded

以下是一个结合 MutationObserver 与 DOMContentLoaded 的示例代码：

// ==UserScript==
// @name         DOM监听示例
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  监听指定DOM节点并操作
// @author       You
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    document.addEventListener('DOMContentLoaded', function () {
        const targetNode = document.getElementById('target');

        if (targetNode) {
            // 直接操作
            targetNode.style.backgroundColor = 'yellow';
        } else {
            // 启动观察者
            const observer = new MutationObserver(mutations => {
                mutations.forEach(mutation => {
                    if (mutation.type === 'childList') {
                        const node = document.getElementById('target');
                        if (node) {
                            node.style.backgroundColor = 'yellow';
                            observer.disconnect();
                        }
                    }
                });
            });

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

六、流程图：DOM监听策略选择逻辑

以下是一个 mermaid 流程图，帮助开发者根据页面类型和加载行为选择合适的监听策略：

graph TD
    A[开始] --> B{页面是静态加载吗?}
    B -->|是| C[使用DOMContentLoaded]
    B -->|否| D{目标节点是异步加载吗?}
    D -->|是| E[使用MutationObserver]
    D -->|否| F[使用setInterval轮询]
    C --> G[结束]
    E --> G
    F --> G