CODEWITHSUNDEEP
javascriptgoogle-chromegoogle-chrome-extensionreactjsbabeljs
Ahsan Rocky
Ahsan Rocky

Reputation: 141

using react js in Chrome extension

I am following this tutorial to build a new tab chrome extension .. https://facebook.github.io/react/docs/tutorial.html

but when I attach 

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

for rendering JSX using babel as suggested by the tutorial I get this error from the browser console.

"browser.min.js:4 Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:"." screenshot of the error

I know this is violating CSP directive but then again how can I use the latest reactJS using babel?

Upvotes: 14

Views: 9500

Answers (3)

Scaraux
Scaraux

Reputation: 4152

Adding INLINE_RUNTIME_CHUNK=false in my .env file totally fixed it for me.

Upvotes: 3

Tobin
Tobin

Reputation: 2018

For anyone coming here, Bruno's answer is more correct. Use the "production" mode. E.g. in Angular

ng build --prod

Upvotes: 2

Villager
Villager

Reputation: 604

In your manifest.json file, you can try setting

"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"

I got the answer from here. This got rid of the error for me, but I'm not knowledgeable enough about it to know about other implications, sorry.

Upvotes: 39

Related Questions