在 Chrome 扩展中使用 react js答案

【问题标题】：using react js in Chrome extension在 Chrome 扩展中使用 react js
【发布时间】：2016-05-15 17:39:51
【问题描述】：

我正在按照本教程构建一个新的选项卡 chrome 扩展 .. https://facebook.github.io/react/docs/tutorial.html

但是当我附上

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

按照教程的建议使用 babel 渲染 JSX，我从浏览器控制台收到此错误。

"browser.min.js:4 Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not a allowed source of script in the following Content Security Policy directive:"script-src 'self' blob ：文件系统：chrome-extension-resource：“。” screenshot of the error

我知道这违反了 CSP 指令，但我又如何使用 babel 使用最新的 reactJS？

【问题讨论】：

将browser.min.js 作为文件包含在您的扩展中，并链接到该文件。（我觉得这应该是另一个问题的重复，但我找不到它。）您也可以在清单中使用"content_security_policy"，但这更复杂。

标签： javascript google-chrome google-chrome-extension reactjs babeljs

【解决方案1】：

在我的 .env 文件中添加 INLINE_RUNTIME_CHUNK=false 完全为我修复了它。

【讨论】：

【解决方案2】：

对于任何来这里的人来说，布鲁诺的回答更正确。使用“生产”模式。例如。在 Angular 中

ng build --prod

【讨论】：

【解决方案3】：

在你的 manifest.json 文件中，你可以尝试设置

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

我从here 得到了答案。这为我消除了错误，但我对它的了解不足，无法了解其他含义，抱歉。

【讨论】：

太棒了..我遇到了类似的问题。它现在正在使用此解决方案。
我使用 webpack 默认的“生产”模式解决了这个问题。