using react js in Chrome extension

Question

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?

Include browser.min.js as a file in your extension, and link to that. (I feel like this should be a duplicate of another question, but I can't find it.) You can also use "content_security_policy" in your manifest, but that's more complicated. — Teepeemm
– Teepeemm, Commented Feb 5, 2016 at 18:32

Villager · Accepted Answer · 2016-05-02 16:07:16Z

39

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.

answered May 2, 2016 at 16:07

Villager

6046 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

RajibTheKing Over a year ago

Great.. I was facing similar problem. It's working now with this solution.

Bruno Over a year ago

I solved this problem using the default "production" mode of webpack.

Scaraux · Accepted Answer · 2019-11-17 19:59:55Z

3

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

answered Nov 17, 2019 at 19:59

Scaraux

4,1926 gold badges46 silver badges86 bronze badges

Comments

Tobin · Accepted Answer · 2019-06-14 07:30:31Z

2

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

ng build --prod

answered Jun 14, 2019 at 7:30

Tobin

2,0572 gold badges19 silver badges26 bronze badges

Collectives™ on Stack Overflow

using react js in Chrome extension

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related