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

✅ 推荐解法：使用 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 节点（如新增的 <li> 或 <div>）
     */
    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);

})();

✅ 关键优化说明：