如何让Chrome扩展代码在页面每次变更时正常执行

问题原因及修复方案 #

1. 首要拼写错误 #

你的manifest.json中后台服务 worker 字段拼写错误：
原错误写法：

"sevice_worker":"background.js"

正确拼写应为：

"service_worker":"background.js"

拼写错误会直接导致后台服务 worker 注册失败，自然不会触发任何事件监听。

2. 缺失主机权限配置 #

Manifest V3 中仅声明tabs权限不足以获取全站点的标签页更新事件，需要额外配置主机权限：
在manifest.json中新增如下配置项：

"host_permissions": ["<all_urls>"]

3. 日志查看位置错误 #

后台服务 worker 的日志无法在普通网页的控制台查看，需要走以下路径查看：

• 打开 Chrome 扩展管理页 chrome://extensions/
• 开启右上角「开发者模式」
• 找到你的扩展，点击卡片下方的「服务工作进程」按钮，在弹出的控制台中即可看到后台日志输出。

4. 单页应用场景兼容 #

如果你需要监听无刷新的页面变更（比如 Vue/React 单页应用的路由跳转），仅靠chrome.tabs.onUpdated无法覆盖这类场景，因为这类变更不会触发页面重载，你可以选择两种方案处理：

• 在 content script 中监听popstate、pushState、replaceState事件捕获路由变化
• 新增webNavigation权限，监听chrome.webNavigation.onHistoryStateUpdated事件捕获单页应用路由变更

修复后的完整manifest.json参考 #

{
  "manifest_version": 3,
  "name": "run",
  "version":"0.1",
  "background": {
    "service_worker":"background.js"
  },
  "content_scripts":[{
    "matches":["<all_urls>"],
    "js":["content.js"]
  }],
  "action":{
    "default_popup":"popup.html"
  },
  "permissions":["tabs","activeTab"],
  "host_permissions": ["<all_urls>"]
}

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