Quick tips on getting over content security policy issue using React to build browser extension

This is the great reference I followed to get start using React to build a browser extension:

use create-react-app to develop Chrome extensions

I consistently got this error when I Inspect the extension

Without bore you with the failure path, the key discovery is a inline script block being injected into all html, and according to the last line, we see “webpack”

The credit goes to this article:

Content Security Policy (CSP) in Create-React-App (CRA)

It mentioned “Create-react-app will embed an inline script into index.html during the production build.”

Once I followed to add the environment “INLINE_RUNTIME_CHUNK=false” and things work OK.

I did tried “csp-html-webpack-plugin” and that does not help the above issue (for my case).

You can reference my build comment:

“build”: “INLINE_RUNTIME_CHUNK=false react-app-rewired build && (cd build && zip -r ./build.zip * && cd ..)”

Resulting HTML after using this config:

Happy ending (for me)!