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
create-react-app (CRA) is probably the most common way to build, develop, and deploy React apps. A couple of weeks ago…
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)
Writing suitable CSP policy may requires some changes to your app build pipeline to fetch and calculate hashes for…
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)!