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

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

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.

using react js in Chrome extension

3 Answers