React Component for Chrome Extension not rendering

Question

I am building a Chrome Extension using React. Right now I am trying to put my react component into the popup for the extension. It renders fine on a plain webpage (localhost:3000), however when I add my index.html as the default_popup in my manifest.json, only a very small white box pops up. I saw another post that said this is a Content Security Policy and that locating the SHA256 in the error would fix it. However, I have not found any errors in my console. Please help. I have not really changed the code from the basic react-app, here are my manifest.json and App.js files

<div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Price on stockX: <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>

{
  "short_name": "React App",
  "name": "q React App Sample",
  "version": "1.0",
  "manifest_version": 2,
  "browser_action": {
    "default_popup": "index.html",
    "default_title": "stockUp"
  },
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

You need to build the code first, see tutorials on using React in chrome extension popup. — woxxom
– woxxom, Commented Jan 1, 2020 at 7:11
Also, the popup has its own devtools console: right-click inside that popup, then click "inspect". — woxxom
– woxxom, Commented Jan 1, 2020 at 7:12
Could you possible elaborate on build the code? And I already checked the popup's devtools and it is also blank with no message in the console. Thank you for the speedy response! — Haeju
– Haeju, Commented Jan 1, 2020 at 7:17
I looked at these tutorials and I am still having issues. It seems as though they are simply downloading the basic react app that react provides and modifying the manifest.json slightly, and I am following exactly. But I still run into the same issues. — Haeju
– Haeju, Commented Jan 1, 2020 at 7:59

Mahesh Acharya · Accepted Answer · 2020-07-25 07:34:13Z

0

You must first build the code and then insert it into an extension.

npm run build
cross-check manifest.json file and icons
goto chrome extension
goto load unpacked option
load build folder It works

answered Jul 25, 2020 at 7:34

Mahesh Acharya

112 bronze badges

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

Collectives™ on Stack Overflow

React Component for Chrome Extension not rendering

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related