Chrome/Edge扩展Popup中JS违反CSP的问题排查求助

核心问题定位 #

你的popup.html中script标签写法错误，直接触发了内联脚本的CSP错误：
错误写法：

<script>src="./popup.js"</script>

这种写法会被浏览器识别为内联脚本内容（把src="./popup.js"当成了要执行的内联代码），而非通过src属性引入外部JS文件，违反了Manifest V3的CSP安全规则。

正确写法：

<script src="./popup.js"></script>

你的疑问逐一解答 #

1. CSP策略来源？ #

Manifest V3对extension_pages（包括弹窗、选项页等扩展内部页面）有强制默认的严格CSP，即使你在manifest中未完全配置，浏览器也会自动补充默认规则（比如你看到的'wasm-unsafe-eval'等）。同时，HTML中的<meta http-equiv="Content-Security-Policy">在Manifest V3的extension pages中完全无效，所有CSP必须在manifest.json的content_security_policy字段中配置。

2. 为什么添加'unsafe-inline'会报错？ #

Manifest V3为提升安全性，明确禁止在extension_pages的CSP中使用'unsafe-inline'，这是硬性安全规则，因此浏览器会直接拒绝该配置。

3. nonce是什么？ #

nonce是一个随机生成的一次性字符串，用于允许特定内联脚本执行：

• 页面加载时生成唯一nonce值，同时在CSP中声明script-src 'nonce-你的随机值'
• 目标内联script标签添加nonce="你的随机值"属性
  但Manifest V3的extension pages不推荐使用内联脚本，优先采用外部JS文件的方式更合规。

4. 浏览器是否有内置安全限制？ #

是的，Manifest V3本身就是Chrome/Edge推行的扩展安全规范，大幅收紧了CSP规则，目的是防止扩展被注入恶意脚本，你觉得"本地运行JS困难"其实是这种安全规范的必然要求。

修复步骤 #

1. 将popup.html中的script标签修正为正确的外部引入写法
2. 保持manifest.json中的现有CSP配置即可（无需添加'unsafe-inline'），当前配置完全支持外部JS文件的加载执行：

"content_security_policy": {
  "extension_pages": "script-src 'self' ; object-src 'self';"
}

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