我花了几个小时，但您可能想要做的是改变webpack使用的源Map的风格。默认情况下，它使用val。

https://webpack.js.org/configuration/devtool/

我将此代码添加到我的webpack中：devtool: 'cheap-module-source-map'

解决这个问题的诀窍是找出为什么webpack --mode development有错误，而webpack --mode production没有。

另外，我使用的是Reaction，而不是聚合物，但我非常确定这一点仍然适用。

通过Manifest阅读有趣的内容

https://developer.chrome.com/extensions/contentSecurityPolicy
已评估的Java脚本

通过在您的策略中添加‘unSafe-val’，可以放松针对val()及其相关对象(如setTimeout(字符串)、setInterval(字符串)和new函数(字符串)的策略：

"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"

但是，我们强烈建议不要这样做。这些函数是臭名昭著的XSS攻击载体。

感谢@兰迪的回复。但是，对于Vue CLI生成的VUE项目，没有webpack.config.js，因此解决方案将向vue.config.js中添加以下配置：

configureWebpack: {
    devtool: 'cheap-module-source-map'
  }

Chrome扩展实际上不允许使用unsafe-eval或eval。

https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Content_Security_Policy

在制作Chrome扩展时，要明白它受到内容安全策略的严格限制。请确保您已阅读并理解WebExpanies内容安全策略。如果您希望拥有如下所示的内联脚本：

<script>
    alert('hello')
</script>

您必须将脚本标记内容计算到其SHA256值中，并将其添加到您的清单中，以便允许其执行。

Webpack V5

使用--no-devtool可以快速摆脱麻烦。

没有评估代码，没有.map文件。

npx webpack watch --no-devtool

Webpack CLI https://webpack.js.org/api/cli#negated-flags

仅供参考，我遇到这个问题是因为我在Babel.config.js中添加了istanbul插件。

生成结果包含new Function('return this')

清单3可以使用

"content_security_policy": {
    "extension_page":"script-src 'self' 'wasm-unsafe-eval'; object-src 'self'" 
}

Mv3中不允许使用来自外部域的脚本，所有脚本都必须包含在扩展包中。

请参阅Migrating to Manifest V3.

在我使用MVC5应用程序的情况下，我所要做的就是在Visual Studio中安装Nuget包：‘NWebsec.Mvc’，应用程序运行得很好。