{"id":975,"date":"2018-02-07T12:28:47","date_gmt":"2018-02-07T12:28:47","guid":{"rendered":"https:\/\/greladesign.co\/blog\/?p=975"},"modified":"2018-02-07T12:49:06","modified_gmt":"2018-02-07T12:49:06","slug":"chrome-extension-with-react-gotcha","status":"publish","type":"post","link":"https:\/\/greladesign.co\/blog\/2018\/02\/07\/chrome-extension-with-react-gotcha\/","title":{"rendered":"Chrome Extension with React &#8211; gotcha"},"content":{"rendered":"<p>I&#8217;m rebuilding my Chrome Extension <a href=\"https:\/\/greladesign.co\/blog\/tablist-chrome-extension\/\" rel=\"noopener\" target=\"_blank\">Tab List<\/a> to use ReactJS (as part of my learning trip) and encountered following error:<\/p>\n<blockquote><p>Uncaught EvalError: Refused to evaluate a string as JavaScript because &#8216;unsafe-eval&#8217; is not an allowed source of script in the following Content Security Policy directive: &#8220;script-src &#8216;self&#8217; blob: filesystem: chrome-extension-resource:&#8221;.<\/p><\/blockquote>\n<p><!--more--><\/p>\n<p>Kind of a showstopper here, but of course, <em>seek and ye shall find<\/em>, I wasn&#8217;t the first with this problem and solution was up there. <\/p>\n<p>Obviously Chrome applies security restrictions which prevents call to <code>eval<\/code>, fair enough. As per <a href=\"https:\/\/bugs.chromium.org\/p\/chromedriver\/issues\/detail?id=1357\" rel=\"noopener\" target=\"_blank\">this bug report<\/a>, you have to add <code>content_security_policy<\/code> option in the extensions manifest file, that will allow for &#8220;evil eval&#8221;.<\/p>\n<p>Following is the entry to add into manifest.json file.<br \/>\n<code><br \/>\n \"content_security_policy\": \"script-src 'self' 'unsafe-eval'; object-src 'self'\",<br \/>\n<\/code><\/p>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;m rebuilding my Chrome Extension Tab List to use ReactJS (as part of my learning trip) and encountered following error: Uncaught EvalError: Refused to evaluate a string as JavaScript because &#8216;unsafe-eval&#8217; is not an allowed source of script in the &hellip; <a href=\"https:\/\/greladesign.co\/blog\/2018\/02\/07\/chrome-extension-with-react-gotcha\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":""},"categories":[72,141,325],"tags":[304,331,332,333,334,335,322],"_links":{"self":[{"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/posts\/975"}],"collection":[{"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/comments?post=975"}],"version-history":[{"count":4,"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/posts\/975\/revisions"}],"predecessor-version":[{"id":1033,"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/posts\/975\/revisions\/1033"}],"wp:attachment":[{"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/media?parent=975"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/categories?post=975"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/tags?post=975"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}