Chrome扩展迁移Manifest V3内联脚本CSP报错解决方法

配置不生效+报错的核心原因有两个：

• 你写的CSP配置字段名拼写错误：Manifest V3中扩展页面对应的CSP键为extension_pages（复数，末尾带s），你写的单数形式extension_page是无效字段，配置不会被Chrome识别加载。
• 即使修正字段名，Manifest V3有强制安全限制：所有扩展页面禁止执行内联脚本，无论通过哈希、nonce还是unsafe-inline关键字放行都不被允许，你之前尝试加哈希放行内联脚本的方案在V3规则下本身就不可行。

唯一符合V3规范的解决方案是彻底移除所有内联脚本，将JS逻辑抽离到独立的外部.js文件中引入：

1. 将HTML文件中所有写在<script>标签对内的JS代码，全部迁移到独立的JS文件中，例如存为script.js
2. 将原有的内联script标签替换为外部引入标签，同时移除所有HTML元素上的内联事件属性（比如onclick、onload这类写在标签上的JS逻辑，同样属于被拦截的内联脚本范畴）

代码示例 #

会触发报错的错误写法 #

<!-- 直接写在script标签内的内联脚本 -->
<script>
  const btn = document.getElementById('submitBtn')
  btn.addEventListener('click', () => {
    console.log('提交')
  })
</script>

<!-- 写在标签属性上的内联事件，同样会被拦截 -->
<button id="submitBtn" onclick="console.log('提交')">提交</button>

修正后的合规写法 #

HTML文件内容：

<!-- 引入外部独立JS文件，不要在标签内写任何JS代码 -->
<script src="script.js"></script>
<button id="submitBtn">提交</button>

同目录下script.js文件内容：

const btn = document.getElementById('submitBtn')
btn.addEventListener('click', () => {
  console.log('提交')
})

额外排查点 #

如果完成上述修改后仍然报相同错误，检查是否存在以下情况：

• 引入的第三方JS库、前端框架存在动态插入内联<script>标签的逻辑，这类动态生成的内联脚本同样会被CSP拦截，需要修改对应库的配置，关闭内联脚本注入，或把动态执行的逻辑抽离到静态JS文件中。
• 自定义CSP规则时不要添加unsafe-inline、unsafe-eval字段，这类字段在V3的extension_pages规则下是被禁止的，添加后会导致扩展无法通过审核、甚至无法加载。

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