Chrome扩展DevTools面板使用Webpack Serve时CSP脚本加载失败问题排查

我正在开发一款扩展Chrome开发者工具的Chrome扩展，想要在DevTools面板的HTML页面中使用Webpack的watch模式实现UI快速迭代。我在扩展清单（manifest）中添加了以下配置：

{
    "content_security_policy": {
        "extension_pages": "default_src: 'self' http://localhost:8081"
    }
}

随后在HTML页面中指定脚本源：

<script src="http://localhost:8081/devtools.js"></script>

Chrome成功加载了扩展，但加载HTML页面时失败，报错信息如下：

Refused to load the script 'http://localhost:8081/devtools.js' because it violates the following Content Security Policy directive: "script-src 'self' 'wasm-unsafe-eval'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

请问哪里配置错误了？

核心错误点 #

1. CSP指令语法错误：default_src后面应该用空格分隔规则，而不是冒号（:），错误的语法会导致你的CSP配置未被Chrome正确解析。
2. 未显式覆盖script-src规则：Chrome扩展的extension_pages有默认CSP规则，其中script-src默认仅允许'self'和'wasm-unsafe-eval'。你仅配置了default_src，但script-src的优先级高于default_src，因此加载外部脚本的请求依然被拦截。

正确配置方案 #

修改manifest中的CSP配置，显式指定script-src允许http://localhost:8081，同时修正语法错误：

{
    "content_security_policy": {
        "extension_pages": "default_src 'self'; script-src 'self' http://localhost:8081;"
    }
}

补充说明 #

如果后续使用Webpack热更新需要加载其他资源（如样式文件），可以根据需求添加对应的CSP指令（比如style-src），确保所有开发环境的资源源都被允许。

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