Chrome扩展注入JS时，如何监听无刷新式页面URL变化？

我明白你现在的痛点：很多现代网站用无刷新方式修改URL（比如滚动加载、SPA导航），常规的监听方法要么不生效，要么覆盖不全。结合你提到的场景和试过的方法，我整理了一套完整的解决方案，覆盖所有常见的URL变化情况：

为什么你之前的方法没生效？ #

先澄清几个误区：

• replaceState 不是浏览器事件，它是history对象的方法，所以用window.addEventListener('replaceState', ...)完全无效。
• 直接重写history.pushState/replaceState时，如果没有保留原始方法的调用，会破坏网站的原有功能，甚至导致页面异常。
• popstate事件只有在用户点击浏览器前进/后退按钮，或者调用history.back()/history.forward()时才会触发，调用pushState/replaceState不会自动触发popstate。

完整解决方案：覆盖所有场景 #

1. 优先确保脚本注入时机 #

在你的Chrome扩展manifest.json中，把注入脚本的时机设置为document_start，这样你的代码会在页面其他脚本执行前运行，避免网站提前重写history方法导致拦截失效：

{
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["your-script.js"],
      "run_at": "document_start"
    }
  ]
}

2. 拦截history方法 + 监听系统事件 #

下面的代码会拦截所有通过pushState/replaceState修改URL的操作，同时监听popstate和hashchange事件，统一触发自定义的urlChanged事件，方便你集中处理：

// 保存history的原始方法，避免破坏网站功能
const originalPushState = history.pushState;
const originalReplaceState = history.replaceState;

// 重写pushState：执行原方法后触发自定义事件
history.pushState = function(...args) {
  const result = originalPushState.apply(this, args);
  window.dispatchEvent(new CustomEvent('urlChanged', { 
    detail: { url: window.location.href, action: 'pushState' } 
  }));
  return result;
};

// 重写replaceState：同理
history.replaceState = function(...args) {
  const result = originalReplaceState.apply(this, args);
  window.dispatchEvent(new CustomEvent('urlChanged', { 
    detail: { url: window.location.href, action: 'replaceState' } 
  }));
  return result;
};

// 监听浏览器前进/后退（popstate）
window.addEventListener('popstate', () => {
  window.dispatchEvent(new CustomEvent('urlChanged', { 
    detail: { url: window.location.href, action: 'popstate' } 
  }));
});

// 监听hash变化（比如网站用location.hash = 'xxx'修改URL）
window.addEventListener('hashchange', () => {
  window.dispatchEvent(new CustomEvent('urlChanged', { 
    detail: { url: window.location.href, action: 'hashchange' } 
  }));
});

// 统一处理所有URL变化
window.addEventListener('urlChanged', (event) => {
  const currentUrl = event.detail.url;
  console.log('URL更新了:', currentUrl, '触发方式:', event.detail.action);
  // 这里写你的业务逻辑，比如保存URL、发送到扩展后台等
});

3. 针对滚动触发URL变化的站点 #

你提到的Reuters和WSBTV这类滚动时修改URL的站点，本质上还是通过pushState/replaceState或者修改location.hash实现的，上面的代码已经完全覆盖这些场景。如果遇到特殊情况（比如网站用了极其小众的URL修改方式），可以额外监听scroll事件并主动检查URL变化：

let lastUrl = window.location.href;
window.addEventListener('scroll', () => {
  const currentUrl = window.location.href;
  if (currentUrl !== lastUrl) {
    lastUrl = currentUrl;
    window.dispatchEvent(new CustomEvent('urlChanged', { 
      detail: { url: currentUrl, action: 'scroll-triggered' } 
    }));
  }
}, { passive: true });

验证方案有效性 #

针对你提到的两个站点：

• Reuters的文章滚动时，会通过replaceState更新URL中的锚点，重写后的replaceState方法会捕获到这个操作。
• WSBTV的滚动加载内容时，同样会调用pushState/replaceState修改URL，你的拦截代码会触发urlChanged事件。

对于你提到的旧网站用history.back()导航的场景，popstate事件会准确捕获到URL变化。

内容的提问来源于stack exchange，提问作者Bernard Gritsmiller