Chrome扩展如何检测URL变化？页面回退时content script不触发如何解决

问题根因 #

你遇到的是单页应用(SPA) 的路由特性导致的问题：这类站点使用history.pushState()/history.replaceState()修改URL，不会触发完整的页面重载，所以不会触发window.onload事件，content script也不会重新注入执行。浏览器前进/回退触发的popstate事件同样不会触发页面重载，也会出现相同问题。

方案1：Content Script端直接监听URL变化 #

不需要依赖service worker，适合不需要跨标签页处理逻辑的场景，直接在content script里加监听逻辑即可：

• 首先监听popstate事件处理前进/回退场景
• 重写history.pushState和history.replaceState方法，捕获JS主动修改路由的场景
• 加轮询兜底，覆盖所有漏判的场景

代码示例：

// 存储上一次的URL
let lastUrl = location.href;
// 自定义URL变化事件
const urlChangeEvent = new Event('urlChange');

// 重写pushState
const originalPushState = history.pushState;
history.pushState = function(...args) {
  originalPushState.apply(this, args);
  window.dispatchEvent(urlChangeEvent);
};

// 重写replaceState
const originalReplaceState = history.replaceState;
history.replaceState = function(...args) {
  originalReplaceState.apply(this, args);
  window.dispatchEvent(urlChangeEvent);
};

// 监听前进回退的popstate
window.addEventListener('popstate', () => {
  window.dispatchEvent(urlChangeEvent);
});

// 监听自定义的urlChange事件，处理逻辑
window.addEventListener('urlChange', () => {
  if (location.href !== lastUrl) {
    lastUrl = location.href;
    // 这里写你URL变化后要执行的逻辑，比如你的alert("test")
    alert("test");
  }
});

// 加300ms轮询兜底，避免特殊场景漏触发
setInterval(() => {
  if (location.href !== lastUrl) {
    window.dispatchEvent(urlChangeEvent);
  }
}, 300);

方案2：配合Manifest V3的Service Worker监听 #

如果你的扩展用的是V3版本的清单，需要用到后台逻辑的话，可以用service worker的webNavigationAPI监听所有标签页的URL变化，再通知对应标签页的content script执行逻辑：

步骤1：配置manifest.json #

先在清单里申请权限：

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0",
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"], // 替换为你要匹配的站点规则
      "js": ["content.js"]
    }
  ],
  "permissions": ["webNavigation"]
}

步骤2：编写service worker代码（background.js） #

监听webNavigation.onCommitted事件，过滤掉非主框架的跳转，然后给对应标签页发消息：

chrome.webNavigation.onCommitted.addListener((details) => {
  // 只监听主框架的跳转，过滤iframe等子资源的跳转
  if (details.frameId === 0) {
    // 给对应标签页的content script发消息
    chrome.tabs.sendMessage(details.tabId, {
      type: 'URL_CHANGED',
      url: details.url
    });
  }
});

步骤3：编写content script代码（content.js） #

监听service worker发来的消息，执行对应的逻辑：

chrome.runtime.onMessage.addListener((message) => {
  if (message.type === 'URL_CHANGED') {
    // 这里写你要执行的逻辑
    alert("test");
  }
});

这个方案的优势是逻辑更稳定，不会因为站点修改history原型导致监听失效，适合需要全局管控URL跳转的场景。

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