Violentmonkey脚本匹配规则在单页应用中的特殊处理

问题背景

在使用Violentmonkey等用户脚本管理器时，开发者经常会遇到脚本匹配规则(@match/@exclude)在单页应用(SPA)网站中失效的问题。典型表现为脚本在某些页面导航后不再执行，尽管URL路径符合匹配规则。

根本原因分析

单页应用通过前端路由实现页面跳转，实际上并未触发完整的页面重载。Violentmonkey等脚本管理器仅在页面初始加载时检查URL匹配情况，导致后续前端路由跳转后脚本无法自动重新注入。

解决方案

方案一：扩大匹配范围并手动检测

1. 将@match规则扩展至整个域名范围：

   // @match *://*.example.com/*
   

2. 在脚本中使用MutationObserver监听DOM变化：

   const observer = new MutationObserver(() => {
     if (location.pathname.includes('/target-path/')) {
       // 执行目标逻辑
     }
   });
   observer.observe(document.body, { childList: true, subtree: true });
   

方案二：利用现代浏览器API

对于支持Navigation API的现代浏览器：

navigation.addEventListener('navigate', (event) => {
  if (event.destination.url.includes('/target-path/')) {
    // 执行目标逻辑
  }
});

方案三：轮询检查URL

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

let lastUrl = location.href;
setInterval(() => {
  if (location.href !== lastUrl) {
    lastUrl = location.href;
    if (location.pathname.includes('/target-path/')) {
      // 执行目标逻辑
    }
  }
}, 1000);

最佳实践建议

1. 优先使用MutationObserver方案，性能影响较小
2. 对于复杂SPA，建议结合DOM特征和URL双重判断
3. 在脚本开头添加环境检测逻辑，避免重复执行
4. 考虑使用@run-at document-start确保脚本尽早执行

注意事项

1. 过度使用MutationObserver可能影响页面性能
2. 不同SPA框架的路由实现方式不同，需要针对性调整
3. 在Firefox等浏览器中，某些API的兼容性需要特别处理

通过以上方法，开发者可以确保用户脚本在单页应用中稳定运行，不受前端路由跳转的影响。