Tampermonkey脚本在SPA应用中不生效的解决方案

问题现象分析

在使用Tampermonkey开发用户脚本时，开发者可能会遇到一个特殊现象：脚本在浏览器开发者工具打开时能正常工作，但关闭开发者工具后脚本却失效。这种情况通常出现在处理单页应用(SPA)时，特别是像Walmart这样的大型电商网站。

根本原因解析

这种现象的核心原因在于SPA应用的特殊工作方式：

1. 动态URL变化：SPA应用通过JavaScript动态修改URL而不触发完整页面重载
2. 内容延迟加载：页面内容可能异步加载，初始DOM结构与最终显示结构不同
3. Tampermonkey匹配机制：脚本的@match规则只在初始URL匹配时执行

解决方案详解

1. 扩大URL匹配范围

将@match规则从精确匹配改为更宽泛的匹配：

// @match https://www.walmart.com/*

2. 添加URL变化检测

利用现代浏览器提供的API检测URL变化：

const checkAndDoIt = () => {
  if (!location.pathname.startsWith('/orders')) return;
  
  // 实际业务逻辑代码
};

window.onurlchange = checkAndDoIt;
checkAndDoIt(); // 初始执行

3. 实现内容检测机制

对于动态加载的内容，建议采用以下策略：

const observer = new MutationObserver((mutations) => {
  // 检测DOM变化并执行相应操作
});

observer.observe(document.body, {
  childList: true,
  subtree: true
});

最佳实践建议

1. 防御性编程：所有DOM操作前都应检查元素是否存在
2. 性能优化：避免使用高频setInterval，改用MutationObserver
3. 错误处理：添加try-catch块捕获可能的异常
4. 日志记录：保留调试日志便于问题排查

技术要点总结

理解SPA应用的工作机制是解决这类问题的关键。Tampermonkey脚本需要适应现代Web应用的动态特性，通过结合URL检测和DOM变化观察，可以确保脚本在各种情况下都能可靠执行。开发者应该从静态页面思维转向动态应用思维，才能编写出健壮的用户脚本。

通过上述方法，开发者可以确保Tampermonkey脚本在SPA应用中稳定运行，无论开发者工具是否打开，都能达到预期的效果。