如何创建一个ReactJS chrome扩展名，可以从弹出窗口中打开一个新标签页？

Question

我正在使用ReactJS创建chrome扩展。我本质上希望有两页-一页用于弹出窗口，另一页通过单击弹出窗口上的按钮在新选项卡中打开。

Answer 1

首先，我建议按照本教程进行基础操作。

https://medium.com/@gilfink/building-a-chrome-extension-using-react-c5bfe45aaf36

这将有助于大量的基础知识。总的来说，您希望将公共文件夹中的manifest.json更改为chrome扩展manifest.json的外观。在该manifest.json中，您想添加index.html（也在公共文件夹中），以便在您真正要调用的地方进行调用。

以下示例：

{
     "manifest_version": 2,
     "short_name": "XXX",
     "name": "XXX",
     "version": "1.0.2",

     "browser_action": {
         "default_popup": "index.html", //popup page occurs when you click on the favicon
         "default_title": "Open the popup"
     },

     "chrome_url_overrides": {
         "newtab": "index.html" //registers an override page (index.html) to the newtab page.
     }
}

覆盖其他页面： https://developer.chrome.com/extensions/override

注意：确保在使用npm构建后，运行build，并在“ Load Unpackaged”中选择chrome扩展名时，选择的是构建文件夹，而不是公共文件夹。