如何检测Chrome扩展中URL变更未触发webNavigation事件的场景

问题原因 #

你遇到的是单页应用(SPA)的前端路由跳转场景：这类页面通过history.pushState或history.replaceState动态修改URL和页面内容，不会触发完整的页面加载流程，因此Chrome不会自动重新注入配置的content script，也不会触发webNavigation的页面加载完成类事件。

识别URL变更场景 #

通过监听浏览器历史记录变化，可捕获这类动态路由跳转：

1. 监听popstate事件（处理前进/后退操作） #

用户点击浏览器前进/后退按钮时会触发该事件，用于捕获历史记录导航：

let currentUrl = location.href;
window.addEventListener('popstate', () => {
  if (location.href !== currentUrl) {
    currentUrl = location.href;
    handleUrlChange();
  }
});

2. 重写history.pushState和history.replaceState（处理主动路由跳转） #

原生pushState/replaceState不会触发事件，需重写方法来触发自定义事件：

// 保存原生方法
const originalPushState = history.pushState;
const originalReplaceState = history.replaceState;

// 重写pushState
history.pushState = function(...args) {
  const result = originalPushState.apply(this, args);
  window.dispatchEvent(new Event('pushstate'));
  return result;
};

// 重写replaceState
history.replaceState = function(...args) {
  const result = originalReplaceState.apply(this, args);
  window.dispatchEvent(new Event('replacestate'));
  return result;
};

// 绑定自定义事件监听
window.addEventListener('pushstate', handleUrlChange);
window.addEventListener('replacestate', handleUrlChange);

3. 统一处理URL变更的逻辑函数 #

function handleUrlChange() {
  // 对比URL避免重复触发
  if (location.href !== currentUrl) {
    currentUrl = location.href;
    // 这里可执行你的处理逻辑
    // 推荐直接重新运行脚本逻辑，比刷新页面更友好
    runThisScript();
    // 若必须刷新页面：
    // location.href = location.href;
  }
}

优化脚本执行方案 #

不要直接刷新页面（体验较差），建议将this_script.js的逻辑封装为函数，在URL变更时重新调用：
修改this_script.js内容：

// 封装原有脚本逻辑为函数
function runThisScript() {
  // 原脚本的所有逻辑写在这里
  // 示例jQuery操作：
  // $('.target-element').addClass('processed');
}

// 页面初始加载时执行
runThisScript();

// 加入上述URL监听代码（确保在主窗口执行）
if (window.top === window.self) {
  let currentUrl = location.href;
  // 这里放入popstate监听、history方法重写的代码
}

注意事项 #

• 若页面包含多个iframe，需通过window.top === window.self判断仅在主窗口执行监听逻辑，避免重复触发。
• manifest v2环境下，content script运行环境隔离，但监听DOM和history事件是允许的操作。

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