Chrome扩展未改动却触发CSP脚本加载错误求助

疑问1：未改动扩展为何突然出现CSP错误？ #

• 最可能的原因是CRXJS（Vite的Chrome扩展开发插件）自动更新到了新版本，新版在构建content script时新增了content-script-preamble.js.js这个前置脚本，你的旧配置没适配这个新增资源的加载规则。
• 其次是Chrome浏览器的CSP规则更新，对扩展内脚本的加载逻辑做了更严格的限制，原本允许的加载行为现在被拦截。
• 也可能是Vite开发缓存异常，生成了新的脚本路径，触发了未覆盖的CSP校验逻辑。

疑问2：如何调整CSP以正常加载脚本？ #

可以通过以下两步解决：

1. 更新web_accessible_resources配置 #

将CRXJS生成的assets目录下的资源加入扩展可访问资源列表，确保content script能加载扩展内的前置脚本：

"web_accessible_resources": [
  {
    "resources": ["images/cursor-custom.png", "images/icon32.png", "assets/*"],
    "matches": ["<all_urls>"]
  }
]

2. 调整CSP规则 #

• 开发环境：需要在extension_pages的CSP中添加本地开发服务器地址，同时保留必要的脚本权限：

"content_security_policy": {
  "extension_pages": "script-src 'self' 'wasm-unsafe-eval' http://localhost:* http://127.0.0.1:*; object-src 'self'"
}

• 生产环境：只需保留'self'和'wasm-unsafe-eval'即可，因为生产打包后的资源都属于扩展自身，原配置无需额外修改。

另外，若使用CRXJS最新版本，可检查vite.config.js中的CRX配置，确保没有覆盖manifest的CSP设置。

内容的提问来源于stack exchange，提问作者Guillermo Bascuñana