Chrome 扩展：拒绝执行内联脚本，但不存在内联脚本？
[英]Chrome Extension: Refused to execute inline script, but no inline scripts present?
问题描述
I'm trying to build a very basic chrome extension with reactjs.
我正在尝试使用 reactjs 构建一个非常基本的 chrome 扩展。 However, I'm getting the following error:但是，我收到以下错误：
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval'".
I don't understand where this is coming from, considering that I don't seem to have any inline scripts.考虑到我似乎没有任何内联脚本，我不明白这是从哪里来的。
newtab.html:新标签.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:测试.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:清单.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'"
}
I'm using chrome version 65.0.3325.162.我使用的是 chrome 版本 65.0.3325.162。
Any and all help will be appreciated.任何和所有帮助将不胜感激。
edit:编辑：
I have seen "Refused to execute inline script" in ReactJS Chrome Extension even though there are no inline scripts , however, I don't actually see a solution present at that link.我在 ReactJS Chrome 扩展中看到“拒绝执行内联脚本”，即使没有内联脚本，但是，我实际上并没有在该链接上看到解决方案。
3 个解决方案
解决方案1
3 已采纳 2018-03-22 06:12:06
The problem comes from the way Babel in browser script works.问题来自浏览器脚本中 Babel 的工作方式。 Because of CSP limitations on extensions, you will have to transpile the jsx code with Babel locally and only add the transpiled (js) file in your html.由于 CSP 对扩展的限制，您必须在本地使用 Babel 转译 jsx 代码，并且仅将转译后的 (js) 文件添加到您的 html 中。
You can run Babel from the command line.您可以从命令行运行 Babel。 Please see the relevant guide here .请在此处查看相关指南。 For later development, consider using a tool such as Browserify with the babelify plugin.对于后期开发，可以考虑使用带有 babelify 插件的 Browserify 等工具。 See usage examples here .请参阅此处的用法示例。
解决方案2
3 2019-03-14 16:57:40
Try putting INLINE_RUNTIME_CHUNK=false to your.env files and rebuild尝试将INLINE_RUNTIME_CHUNK=false放入您的 .env 文件并重建
Worked for me为我工作
thanks to https://github.com/facebook/create-react-app/issues/5897感谢https://github.com/facebook/create-react-app/issues/5897
解决方案3
0 2018-03-21 20:42:13
I would first off trying to remove at least a lot of the content security policy you have added in the manifest.json It is kind of weird that you get a hash code in your error when you dont have any in your manifest.我首先会尝试至少删除您在 manifest.json 中添加的许多内容安全策略。当您的清单中没有任何内容时，您会在错误中得到一个哈希码，这有点奇怪。 So try adding the hash from the error and then I would try removing the whole content security policy line in the manifest and then testing again, and if that does not work try only adding script-src 'self' and then only default-src 'self' and then object-src 'self' , lately the CSP with google extensions have been weird so you have to experiment, also the default-src 'self' often messes up the html format.所以尝试从错误中添加哈希，然后我会尝试删除清单中的整个内容安全策略行，然后再次测试，如果这不起作用尝试只添加script-src 'self'然后只添加default-src 'self'然后object-src 'self' ，最近带有谷歌扩展的 CSP 很奇怪所以你必须试验，而且default-src 'self'经常弄乱 html 格式。
Hope this helps希望这可以帮助
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.