用于 Chrome 扩展的 React 组件未呈现

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" }

Answer 1

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