本文详解为何脚本在 Chrome 控制台中正常运行却在 Tampermonkey 中失效，并提供基于 MutationObserver 的健壮解决方案，避免轮询与硬编码延迟，确保 DOM 元素就绪后精准插入自定义按钮。
本文详解为何脚本在 chrome 控制台中正常运行却在 tampermonkey 中失效，并提供基于 `mutationobserver` 的健壮解决方案，避免轮询与硬编码延迟，确保 dom 元素就绪后精准插入自定义按钮。
在 Tampermonkey 中编写 DOM 操作脚本时，一个常见误区是假设 @run-at document-body 能保证目标元素已存在——但事实并非如此。尤其在使用 React、Vue 或 AJAX 渲染的现代 Web 应用（如 Snipe-IT）中，#create-form 等关键结构往往由 JavaScript 异步生成，远晚于 <body> 解析完成。因此，即使设置了 @run-at document-body，document.querySelector(...) 仍可能返回 null，导致后续 appendChild() 失败，按钮完全不出现。
你最初尝试的 setTimeout 延迟方案（如 5000ms）虽能临时“凑效”，但存在严重缺陷：
- ❌ 不可靠：网络波动或设备性能变化可能导致延迟不足或过度；
- ❌ 低效：强制等待固定时长，浪费资源且影响用户体验；
- ❌ 难维护：需反复调试 myDelay 值，无法适配不同环境。
✅ 推荐采用 MutationObserver ——这是浏览器原生提供的异步 DOM 变更监听机制，可精准捕获目标容器的插入时机，实现“元素一出现，立即操作”。
以下是优化后的完整 Tampermonkey 脚本（已修复原始逻辑错误，如 onclick 中误将 appendChild 写在 alert 后导致按钮未被添加）：
// ==UserScript==
// @name SNIPEIT OFFICE BUTTONS
// @namespace http://tampermonkey.net/
// @version 0.2
// @description 在 Snipe-IT 表单中可靠注入 Office 版本按钮
// @author You
// @match *://your-snipeit-domain.com/* // ← 替换为实际 URL
// @grant none
// @run-at document-idle
// ==/UserScript==
(function() {
'use strict';
// 定义目标选择器（建议简化以提升鲁棒性）
const targetSelector = '#create-form > div > div.box-body > div > div:nth-child(10) > div';
// 创建两个按钮
const btn2013 = document.createElement('button');
btn2013.textContent = 'Office 2013 TM';
btn2013.style.marginRight = '8px'; // 可选：改善视觉间距
btn2013.addEventListener('click', () => alert('Office 2013 selected'));
const btn2019 = document.createElement('button');
btn2019.textContent = 'Office 2019 TM';
btn2019.addEventListener('click', () => alert('Office 2019 selected'));
// 观察器配置：监听子节点添加
const observer = new MutationObserver((mutations) => {
for (const mutation of mutations) {
if (mutation.type === 'childList') {
const notes = document.querySelector(targetSelector);
if (notes && !notes.querySelector('button[title="Office 2013 TM"], button[title="Office 2019 TM"]')) {
// 避免重复插入（重要！）
btn2013.title = 'Office 2013 TM';
btn2019.title = 'Office 2019 TM';
notes.appendChild(btn2013);
notes.appendChild(btn2019);
observer.disconnect(); // 任务完成，停止监听
return;
}
}
}
});
// 启动观察器：监听 <body> 及其后代的 DOM 变化
observer.observe(document.body, {
childList: true,
subtree: true
});
// 补充兜底：若 10 秒内仍未找到，主动尝试一次（防极端情况）
setTimeout(() => {
if (observer.takeRecords().length === 0) {
const notes = document.querySelector(targetSelector);
if (notes && !notes.querySelector('button[title]')) {
notes.appendChild(btn2013);
notes.appendChild(btn2019);
}
}
}, 10000);
})();关键改进说明：
- ✅ 使用 @run-at document-idle（优于 document-body），确保脚本在页面空闲时执行，更利于观察器初始化；
- ✅ MutationObserver 主动监听 DOM 变化，而非被动等待，响应及时且零冗余；
- ✅ 添加 title 属性并检查是否存在，防止按钮被重复插入；
- ✅ 简化 CSS 选择器风险：若 nth-child(10) 易变动，建议改用语义化 class（如 .field-notes）或结合 data-* 属性定位；
- ✅ 提供 10s 兜底逻辑，兼顾极少数观察器未触发的边界场景。
调试建议：
- 在 Tampermonkey 编辑器中启用「显示控制台日志」，在脚本中添加 console.log('Observer active') 验证初始化；
- 使用 DevTools 的 Elements → 右键目标节点 → Break on → subtree modifications，直观验证元素何时被创建；
- 将 targetSelector 复制到控制台执行 document.querySelector(...)，确认其在页面加载完成后的有效性。
通过 MutationObserver，你不再与时间赛跑，而是真正与 DOM 生命周期协同工作——这才是生产环境脚本应有的健壮性。
