如何在 Tampermonkey 中实时监听动态加载的页面元素并自动注入链接_技术教程

本文介绍一种基于 mutationobserver 的可靠方案，解决 tampermonkey 脚本在单页应用（spa）中无法及时捕获动态渲染链接的问题，确保 `preview order` 按钮在页面初始加载及后续分页/数据刷新后均能自动注入。

现代业务 Web 应用（尤其是基于 Angular、React 或 Vue 的 SPA）常采用异步渲染机制：HTML 骨架快速加载，而实际数据（如分页列表中的 /Field/POPendingCreate/123 链接）通过 AJAX 获取并在 DOM 中动态插入。这导致传统 document.onload 或直接绑定 onclick 事件失效——因为目标元素尚未存在，或分页切换时 DOM 变更未被监听。

你遇到的问题正是典型场景：点击分页

✅ 推荐解法：使用 MutationObserver 实时监听 DOM 变更
它专为监听动态内容设计，可高效捕获任意子节点的新增（childList: true）与深层嵌套变更（subtree: true），完美适配分页、搜索、Tab 切换等交互场景。

以下是完整、健壮的 Tampermonkey 脚本实现：

// ==UserScript==
// @name         Auto-Inject Preview Order Links
// @namespace    http://tampermonkey.net/
// @version      1.1
// @description  Inject "Preview Order" links next to /Field/POPendingCreate/ URLs, even on dynamic pages
// @author       You
// @match        *://*your-business-app.com/*  // 替换为实际域名
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    /**
     * 主逻辑：为匹配的链接旁注入 Preview Order 按钮
     * @param {Node} node - 触发变更的 DOM 节点（如新增的  或 ）
     */
    const createLinks = function(node) {
        // 确保查询范围覆盖当前节点及其父容器（兼容不同插入结构）
        const queryElem = node.parentElement || node;
        const links = queryElem.querySelectorAll("a[href*='/Field/POPendingCreate/']");

        for (const link of links || []) {
            // ✅ 防重复注入：用自定义属性标记已处理链接
            if (link.createLinkReady) continue;

            // ? 提取 URL 中的数字 ID（更安全：使用可选链 + 默认值）
            const match = link.href.match(/\d+/);
            if (!match) continue;
            const ppon = match[0];

            // ? 构建新链接
            const a = document.createElement('a');
            a.textContent = 'Preview Order';
            a.title = 'Preview Order';
            a.href = `https://website.com/Field/DownloadPendingPO?POPPKeyID=${ppon}&co=1&po=${ppon}`;
            a.target = '_blank';
            a.rel = 'noopener noreferrer nofollow'; // 安全增强：防止 opener 泄露

            // ➕ 插入到原链接的父节点末尾（视觉上紧邻）
            link.parentElement.appendChild(a);

            // ✅ 标记为已处理
            link.createLinkReady = true;
        }
    };

    // ? 初始化 MutationObserver
    const observer = new MutationObserver(function(mutationsList) {
        for (const mutation of mutationsList) {
            // 仅关注新增节点（忽略文本变更、属性修改等）
            for (const node of mutation.addedNodes) {
                // 过滤掉非元素节点（如文本、注释）
                if (node.nodeType === Node.ELEMENT_NODE) {
                    createLinks(node);
                }
            }
        }
    });

    // ? 开始监听：从 document.body 起，监控所有子节点增删及深层嵌套变化
    observer.observe(document.body, {
        childList: true,
        subtree: true
    });

    // ? 首次运行：处理页面已存在的链接（初始加载内容）
    createLinks(document.body);

})();

✅ 关键优化说明：

防重复注入：通过 link.createLinkReady = true 属性避免同一链接被多次添加按钮；
容错增强：match?.[0] 和 if (!match) continue 避免正则无匹配时崩溃；
安全合规：添加 rel="noopener noreferrer nofollow" 防止安全风险与 SEO 干扰；
精准定位：createLinks() 自动向上查找父容器，适应不同 DOM 结构（如链接可能在
、或内）；
零依赖：纯原生 JS，无需 jQuery 或额外库。

⚠️ 注意事项：

将 @match 行中的 *://*your-business-app.com/* 替换为你的实际业务域名（支持通配符，如 https://app.example.org/*）；
若目标链接路径含特殊字符（如中文、空格），建议对 ppon 进行 encodeURIComponent(ppon) 编码（当前示例假设为纯数字）；
如需控制按钮样式（如添加 CSS 类、调整位置），可在 a 元素创建后调用 a.classList.add('preview-btn') 并注入 CSS。

此方案彻底规避了“猜测加载时机”的陷阱，以声明式监听替代脆弱的定时轮询或事件绑定，是 Tampermonkey 处理动态 Web 应用的工业级实践。