简体   繁体   中英

react not rendering in chrome extension popup

I am having some trouble with my React App not rendering anything in my chrome extension popup. Also, I am using Parcel as a webpacker to keep my files in the chrome extension format.

I used a template chrome extension for the popup and it worked with the template, but when I edited the files slightly it will no longer display.

My popup is just bank and non of the index.js 'App' is rendered.

index.js

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="NLP-title">NLP extension</h1>
        </header>
        <h2>Information regarding user info here:</h2>
        <body className="NLP-webpageinfo"> TEST </body>
      </div>
    );
  }
}
ReactDOM.render(<App />, document.getElementById('root'));

index.html snippet

<div id='root'></div>

manifest.json snippet

  "browser_action": {
    "default_popup": "src/index.html"
  }

Any kind of help would be great. I think I have some kind of syntax/mismatch somewhere in the index.js , but I am not too experienced with react development.

Check out this package (even if you don't need to use redux, the setup will help you with the setup)

https://www.npmjs.com/package/react-chrome-redux

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM