Menu
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 coming 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.
392
The problem comes 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 command 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.
113
Try putting INLINE_RUNTIME_CHUNK=false to your .env files and rebuild
Worked for me
thanks to https://github.com/facebook/create-react-app/issues/5897
24
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
