用於 Chrome 擴展的 React 組件未呈現

Question

我正在使用 React 構建 Chrome 擴展。 現在我正試圖將我的反應組件放入擴展的彈出窗口中。 它在普通網頁 (localhost:3000) 上呈現良好，但是當我將 index.html 添加為 manifest.json 中的 default_popup 時，只會彈出一個非常小的白色框。 我看到另一篇文章說這是一個內容安全策略，在錯誤中定位 SHA256 可以解決它。 但是，我在控制台中沒有發現任何錯誤。 請幫忙。 我還沒有真正更改基本 react-app 的代碼，這里是我的 manifest.json 和 App.js 文件

 <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

您必須首先構建代碼，然后將其插入到擴展中。

• npm 運行構建
• 交叉檢查 manifest.json 文件和圖標
• 轉到 chrome 擴展
• 轉到加載解壓選項
• 加載構建文件夾它有效