如何在 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 节点（如新增的 
 或 
）*/     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);  })();

✅ 关键优化说明：