While building a React Chrome extension using the create-react-app utility (v2.x), I came across the following error on loading my unpacked extension:
Refused to execute inline script because it violates the following Content Security Policy directive: “script-src ‘self’
blob: filesystem: chrome-extension-resource:”. Either the ‘unsafe-inline’ keyword, a hash (‘sha256-
GgRxrVOKNdB4LrRsVPDSbzvfdV4UqglmviH9GoBJ5jk=’), or a nonce (‘nonce-…’) is required to enable inline execution.
Basically, this error arises as Chrome (or almost any modern browser) will not allow inline scripts to get executed. This CSP restriction resulted in the above error as the build script in create-react-app bundles the .js files in <script> tags in the <body> of index.html.
To work around this, an update to create-react-app was pushed in v2.0.5. This version includes a configuration option to disable inline scripts in the form of an environment variable, whose value you can set prior to making the production build of your application.
The steps are given below:
- Create a .env.production file for storing environment variables that will be used in the production environment.
- Add
INLINE_RUNTIME_CHUNK=falseto your.env.productionfile. - Now, build your extension. Load the unpacked extension from the 'build' directory that will be created.
Note: This is only applicable to react-scripts version 2.0.5 and greater. To check the version of your application's react-scripts, see your package.json file.
Wow, this helps me a lot.
Thank you!