我正在尝试使用reactjs构建一个非常基本的chrome扩展。但是，我收到以下错误：
拒绝执行内联脚本，因为它违反了以下内容安全策略指令：“script-src'self''unsafe-eval'”。可以使用'unsafe-inline'关键字，散列（'sha256-irwQGzGiWtpl6jTh4akRDdUUXCrtjkPABk5rinXZ5yw ='）或nonce（'nonce -...'）来启用内联执行。
考虑到我似乎没有任何内联脚本，我不明白这是从哪里来的。
newtab.html：
<!DOCTYPE html>
<html>
<head>
<title>New Tab</title>
<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="babel.js"></script>
<script type="text/jsx" src="test.jsx"></script>
</head>
<body>
<div id='root'></div>
</body>
</html>
test.jsx：
import React from "react";
import ReactDOM from "react-dom";
class Hello extends React.PureComponent {
render() {
return (
<div>
<h1>Hello!</h1>
</div>
);
}
}
const element = <Hello />;
ReactDOM.render(
element,
document.getElementById('root')
);
manifest.json的：
{
"manifest_version": 2,
"name": "SuperBasicReact",
"description": "Just trying to make this work",
"version": "0.1",
"chrome_url_overrides": {
"newtab": "newtab.html"
},
"browser_action": {
"default_title": "SuperBasicReact"
},
"permissions": [
"http://*/*",
"https://*/*"
],
"content_scripts": [{
"matches": ["http://*/", "https://*/"],
"js": ["test.jsx", "babel.js"]
}],
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'; default-src 'self'"
}
我正在使用chrome版本65.0.3325.162。
任何和所有帮助将不胜感激。
编辑：
我见过"Refused to execute inline script" in ReactJS Chrome Extension even though there are no inline scripts，但实际上我并没有看到该链接出现的解决方案。
问题来自浏览器脚本中的babel工作方式。 由于CSP对扩展的限制，您必须使用babel localy转换jsx代码，并且只在html中添加已转换的（js）文件。 你可以从命令行运行babel，请参阅相关的guide here。 对于以后的开发，请考虑使用诸如带有babelify插件的browserify之类的工具，请参阅usage examples here。
我首先尝试删除你在manifest.json中添加的至少很多内容安全策略。当你的清单中没有任何哈希代码时，你会在错误中获得哈希代码，这有点奇怪。所以尝试从错误添加哈希然后我会尝试删除清单中的整个内容安全策略行，然后再次测试，如果这不起作用尝试只添加script-src 'self'然后只有default-src 'self'然后object-src 'self'，最近CSP与谷歌扩展已经很奇怪，所以你必须实验，而且default-src 'self'经常搞砸html格式。
希望这可以帮助
尝试将INLINE_RUNTIME_CHUNK=false放入.env文件并重建
为我工作