Tampermonkey脚本在页面刷新后失效的问题分析与解决方案

问题现象描述

在使用Tampermonkey开发浏览器用户脚本时，开发者经常会遇到一个典型问题：脚本只在页面首次加载或刷新时执行，而在网站内通过JavaScript进行的页面导航（即"软导航"）时脚本不会自动触发。这种情况在单页应用(SPA)或大量使用AJAX加载内容的网站中尤为常见。

问题本质分析

这个问题的根源在于现代Web应用的两种不同导航方式：

1. 硬导航：传统完整的页面加载，浏览器会重新请求HTML文档
2. 软导航：通过JavaScript动态更新页面内容，通常配合History API修改URL

Tampermonkey等用户脚本管理器的@match规则仅对硬导航有效。当网站使用软导航时，虽然URL发生了变化，但实际上浏览器并未真正加载新页面，因此脚本不会重新注入执行。

技术解决方案

方案一：监听URL变化事件

现代浏览器提供了window.onurlchange事件，可以用来检测URL的变化：

window.addEventListener('urlchange', (info) => {
  if (location.href.includes('lyrics')) {
    // 执行你的脚本逻辑
  }
});

方案二：MutationObserver监听DOM变化

对于内容动态加载的页面，可以使用MutationObserver API监视DOM变化：

const observer = new MutationObserver((mutations) => {
  if (document.querySelector('.lyrics-container')) {
    // 歌词容器出现时执行操作
  }
});

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

方案三：定时检查URL

作为备选方案，可以设置定时器定期检查URL变化：

let lastUrl = location.href;

setInterval(() => {
  if (location.href !== lastUrl) {
    lastUrl = location.href;
    if (location.href.includes('lyrics')) {
      // URL包含lyrics时执行脚本
    }
  }
}, 500);

最佳实践建议

1. 优先使用事件监听：相比轮询，事件驱动的方案性能更好
2. 精确匹配条件：确保你的触发条件足够精确，避免不必要的执行
3. 考虑性能影响：复杂的DOM观察可能影响页面性能，需合理配置
4. 错误处理：动态内容加载可能失败，应添加适当的错误处理

兼容性考虑

需要注意的是，window.onurlchange是相对较新的API，可能不是所有浏览器都支持。在实际开发中，可以采用特性检测的方式提供回退方案：

if ('onurlchange' in window) {
  // 使用现代API
} else {
  // 使用回退方案
}

通过理解这些技术原理和解决方案，开发者可以更好地编写适应现代Web应用场景的Tampermonkey脚本，确保在各种导航方式下都能可靠执行。