"Refused to execute inline script" in ReactJS Chrome Extension even though there are no inline scripts

Question

I am familiar with Chrome's policy on inline scripts in Extensions. However, I don't think I have one in my files? All I have is very basic and I'm just attempting to place an input field onto the page.

main.js:

class Container extends React.Component {
    render() {
        return (
            <div className="locationSearchBarContainer">
                <SearchBar />
            </div>
        );
    }
}

class SearchBar extends React.Component {
    render() {
        return (
            <input className="searchBar" id="locationSearchBar" />
        );
    }
}

ReactDOM.render(
    <Container />,
    document.getElementById('container')
);

main.html:

<!doctype html>
<html>
  <head>
    <title>New Tab</title>
    <script src="../scripts/plugins/react.min.js"></script>
    <script src="../scripts/plugins/react-dom.min.js"></script>
    <script src="../scripts/plugins/babel.min.js" charset="utf-8"></script>
    <script src="../scripts/main.js" type="text/babel"></script>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>

manifest.json

{
  "manifest_version": 2,

  "name": "",
  "description": "See what's happening around you and add events to your calendar",
  "version": "0.01",

  "browser_action": {
    "default_icon": "img/icon.png",
    "default_title": "Click here!"
  },
  "chrome_url_overrides" : {
    "newtab": "html/main.html"
  },
  "permissions": [
    "activeTab"
  ]
}

What is the actual full text of the error message?

Makyen
– Makyen ♦

2016-12-03 23:57:00 +00:00
Commented Dec 3, 2016 at 23:57 — Makyen
– Makyen ♦, Commented Dec 3, 2016 at 23:57

jcharch · Accepted Answer · 2016-12-04 02:51:05Z

2

I believe the problem is that in this version of Babel you can't just prototype a site and include the library in a script tag, or it'll execute in-line. I don't have this problem anymore going through the Browserify route.

answered Dec 4, 2016 at 2:51

jcharch

1702 silver badges17 bronze badges

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

1 Comment

Moti Korets Over a year ago

To clarify for others who may find find this question. The way babel-standalone operates is by using unsafe operations that are not permitted in browser extensions. This is why you have to precompile your files before including them to html (e.g. with browserify, webpack, parcel e.t.c)

Collectives™ on Stack Overflow

"Refused to execute inline script" in ReactJS Chrome Extension even though there are no inline scripts

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related