5

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.

4

3 Answers 3

3

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.

3

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

0

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

1
  • Unfortunately, chrome requires I set script-src and object-src either explicitly or implicitly (via default-src 'self')
    – Ben
    Mar 22, 2018 at 0:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.