I am working on creating a Chrome Extension of an Image Cropping Widget. The code of my popup.html
is as follows:
You have to add content_security_policy
to your manifest.json
file:
"content_security_policy": "script-src 'self' 'sha256-B+Qe/KNUDtGDd/m1g5ycAq1DgpLs9ubKmYTlOHBogC8='; object-src 'self'"
You will find the hash from console.
From the Chrome extension CSP docs:
Inline JavaScript will not be executed. This restriction bans both inline
<script>
blocks and inline event handlers (e.g.<button onclick="...">
).
You cannot have inline scripts in your extension HTML like:
<script>alert("I'm an inline script!");</script>
<button onclick="alert('I am an inline script, too!')">
Rather, you must place your script into a separate file:
<script src="somescript.js"></script>
If you are using React:
create a .env
file in project root
Add variable as follows: INLINE_RUNTIME_CHUNK=false
Build the project again and load the extension again.
Source