**我正在使用React.js开发一个Chrome扩展。**我使用create-react-app创建了这个项目。在开发阶段，我使用npm start在浏览器选项卡中查看应用程序。还配置了manifest.json文件。然后，我使用npm run build创建了构建，以加载未打包的扩展并查看它在Chrome中的工作方式，然而弹出窗口是空的。在检查扩展Dev Tools中的元素时，我只看到div id="root"，里面什么都没有。
我在某个地方看到了关于添加一个包含INLINE_RUNTIME_CHUNK=false的.env文件，但是添加后的构建也不起作用。
有趣的是，当我构建空项目（在运行create-react-app后立即使用旋转的React徽标）时，当我将其作为解压缩的扩展加载时，它100%正常工作。
我正在使用react-router-dom的网页。
为什么React.js构建文件夹中的index.html没有作为Chrome扩展加载？我该怎么解决呢？
2条答案
按热度按时间4sup72z81#
使用React.js开发Chrome扩展时，需要记住一些注意事项，以确保您的构建在扩展中正确运行。
公共URL路径：默认情况下，Create React App假设您的应用将托管在服务器根目录下。但是，在构建Chrome扩展程序时，应用程序并不托管在传统服务器上。因此，您需要在package.json文件中设置homepage字段来指定公共URL路径。在你的例子中，由于你正在构建一个扩展，你应该将它设置为“homepage”：“./".
相对路径：Chrome扩展对文件路径有特定的规则。确保代码中的任何文件引用（如CSS、JavaScript或图像文件）使用相对路径而不是绝对路径。例如，使用“./assets/logo.png”而不是“/assets/logo.png”。
弹出页面设置：如果您的扩展包含弹出页面，请确保在manifest.json文件中正确指定它。default_popup字段应该指向构建文件夹中弹出HTML文件的相对路径。
路由器配置：如果您使用react-router-dom来处理扩展程序中的路由，则需要考虑Chrome扩展程序的URL结构。Chrome扩展程序使用chrome-extension：//协议，该协议与默认浏览器路由行为不兼容。要解决这个问题，您可以使用基于哈希的路由器，如react-router-dom中的HashRouter，而不是常规的BrowserRouter。这可确保分机的路由正常工作。
要解决空弹出窗口的特定问题，请确保已正确配置manifest.json文件中的default_popup字段，以指向构建文件夹中弹出HTML文件的正确路径。此外，检查代码中的任何文件引用是否使用相对路径。
关于.env文件和INLINE_RUNTIME_CHUNK，该配置通常用于优化捆绑的JavaScript文件（runtime~main.js）的大小。它与您描述的问题没有直接关系，因此不太可能是空弹出窗口问题的原因。
希望对你有帮助
dgenwo3n2#
你看那个github repo是有意义的。它应该涵盖这个问题。