使用parcel和web-ext构建web扩展，什么是正确的内容安全策略

Question

Parcel支持捆绑webextensions：https://v2.parceljs.org/recipes/web-extension/

设置构建服务器并监视更改的命令是：parcel src/manifest.json --host localhost --target webext-dev。这会将webextension捆绑到dist/文件夹中。

我想用web-ext run运行这个扩展。这是Mozilla的一个工具，它可以自动将and扩展加载到Firefox中，并在更改时重新加载。在dist/文件夹中运行此命令，可以与parcel搭配得很好。

但实际上，捆绑的webextension并没有执行我的内容脚本。这是因为parcel从localhost为它们提供服务。它需要标志--host localhost来替换热模块。但是webextension接着抱怨"page's settings blocked loading of a resource at ws://localhost:1234/ (“connect-src”)."

这些包文档还演示了一个构建命令：parcel build src/manifest.json --target webext-prod。如果我在dist/webext-prod中执行web-ext run，它就像一个护身符。新运行的parcel build命令会自动触发webextension的重新加载。但是这对于开发来说并不是很有效率，因为包的构建时间太长了。我想使用它的开发设置。

如何正确配置我的are扩展的内容安全策略，以允许从本地主机加载内容脚本？

到目前为止，我的manifest.json中的条目如下所示：

  "content_security_policy": "connect-src 'self' 'localhost:';",

Answer 1

1. 'localhost:'的语法错误，不应使用单引号和尾随冒号":“。它只是特定的主机名，如域名。

1. localhost源代码涵盖了http://localhost和https://localhost (仅http/https方案)，但仅限于with standard ports。

1. 'self'标记仅在csp3浏览器中覆盖ws://localhost和wss://localhost主机源，并且仅具有标准端口。

由于您使用的是非标准端口号，请尝试：

"content_security_policy": "connect-src 'self' ws://localhost:1234;"