本文介绍一种基于 mutationobserver 的可靠方案，解决 tampermonkey 脚本在单页应用（spa）中无法及时捕获动态渲染链接的问题，确保 `preview order` 按钮在页面初始加载及后续分页/数据刷新后均能自动注入。
现代业务 Web 应用（尤其是基于 Angular、React 或 Vue 的 SPA）常采用异步渲染机制：HTML 骨架快速加载，而实际数据（如分页列表中的 /Field/POPendingCreate/123 链接）通过 AJAX 获取并在 DOM 中动态插入。这导致传统 document.onload 或直接绑定 onclick 事件失效——因为目标元素尚未存在，或分页切换时 DOM 变更未被监听。
你遇到的问题正是典型场景：点击分页 <ul class="pagination-sm"> 后，新一批 <a href="/Field/POPendingCreate/..."> 元素被 JS 动态追加到 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 节点（如新增的 <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);
})();✅ 关键优化说明：
- 防重复注入：通过 link.createLinkReady = true 属性避免同一链接被多次添加按钮；
- 容错增强：match?.[0] 和 if (!match) continue 避免正则无匹配时崩溃；
- 安全合规：添加 rel="noopener noreferrer nofollow" 防止安全风险与 SEO 干扰；
- 精准定位：createLinks() 自动向上查找父容器，适应不同 DOM 结构（如链接可能在 <li>、<div> 或 <span> 内）；
- 零依赖：纯原生 JS，无需 jQuery 或额外库。
⚠️ 注意事项：
- 将 @match 行中的 *://*your-business-app.com/* 替换为你的实际业务域名（支持通配符，如 https://app.example.org/*）；
- 若目标链接路径含特殊字符（如中文、空格），建议对 ppon 进行 encodeURIComponent(ppon) 编码（当前示例假设为纯数字）；
- 如需控制按钮样式（如添加 CSS 类、调整位置），可在 a 元素创建后调用 a.classList.add('preview-btn') 并注入 CSS。
此方案彻底规避了“猜测加载时机”的陷阱，以声明式监听替代脆弱的定时轮询或事件绑定，是 Tampermonkey 处理动态 Web 应用的工业级实践。
