I'm trying to build a very basic chrome extension with reactjs. 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'". Either the 'unsafe-inline' keyword, a hash ('sha256-irwQGzGiWtpl6jTh4akRDdUUXCrtjkPABk5rinXZ5yw='), or a nonce ('nonce-...') is required to enable inline execution.
I don't understand where this is ing from, considering that I don't seem to have any inline scripts.
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'"
}
I'm using chrome version 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.
I'm trying to build a very basic chrome extension with reactjs. 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'". Either the 'unsafe-inline' keyword, a hash ('sha256-irwQGzGiWtpl6jTh4akRDdUUXCrtjkPABk5rinXZ5yw='), or a nonce ('nonce-...') is required to enable inline execution.
I don't understand where this is ing from, considering that I don't seem to have any inline scripts.
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'"
}
I'm using chrome version 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.
Share Improve this question edited Mar 21, 2018 at 20:00 Ben asked Mar 21, 2018 at 15:08 BenBen 651 silver badge6 bronze badges 4-
Have you tried to change
unsafe-evalbyunsafe-inlinelike suggested by the error message ? – Striped Commented Mar 21, 2018 at 15:16 - @Striped unfortunately I then receive the following notice: Ignored insecure CSP value "'unsafe-inline'" in directive 'script-src'. As far as I am aware, chrome ignores the unsafe-inline flag. – Ben Commented Mar 21, 2018 at 15:27
- Oh... well I hope someone else has been familiar with this and can help you. Sorry. – Striped Commented Mar 21, 2018 at 15:28
- Possible duplicate of "Refused to execute inline script" in ReactJS Chrome Extension even though there are no inline scripts – rsanchez Commented Mar 21, 2018 at 16:21
3 Answers
Reset to default 3The problem es from the way Babel in browser script works. 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.
You can run Babel from the mand line. Please see the relevant guide here. For later development, consider using a tool such as Browserify with the babelify plugin. See usage examples here.
Try putting INLINE_RUNTIME_CHUNK=false to your .env files and rebuild
Worked for me
thanks to https://github./facebook/create-react-app/issues/5897
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. 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.
Hope this helps