Angular开发Chrome扩展：background.js加载失败与manifest加载异常

问题场景 #

作为编程新手，我在开发Chrome扩展时遇到了背景脚本加载失败的问题：安装扩展时提示无法加载manifest.json，核心原因是指定的background.js脚本加载失败。我尝试了多种调试手段都没解决：

• 修改background.js的内容、文件名、存放位置
• 为扩展添加各类权限
• 设置脚本类型为module
• 甚至用空的background.js文件测试

我的manifest.json配置如下：

{
  "manifest_version": 3,
  "name": "firstExt",
  "description": "My first extension",
  "version": "0.1",
  "background": {
    "service_worker": "background.js",
    "type": "module"
  },
  "minimum_chrome_version": "92",
  "permissions": [
    "storage",
    "activeTab",
    "scripting",
    "contextMenus"
  ],
  "action": {
    "default_popup": "index.html"
  },
  "host_permissions": [
    "http://*/*",
    "https://*/*",
    "://*/"
  ]
}

问题根源与解决方案 #

最终排查发现，问题出在Angular的编译哈希机制上：Angular将TS编译为JS时，会自动给生成的文件名添加唯一哈希（例如background.ansbdk71238213ya.js），但manifest.json里指定的是无哈希的background.js，导致Chrome无法匹配到对应文件。

解决方法：在Angular的配置文件angular.json中，找到对应项目的build配置项，添加"outputHashing": "none"来禁用文件名哈希。编译后就能生成不带哈希后缀的background.js，扩展即可正常加载。

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