如何创建一个ReactJS Chrome扩展程序，能够从弹出窗口打开新的标签页？

Question

如何创建一个ReactJS Chrome扩展程序，能够从弹出窗口打开新的标签页？

javascriptreactjsgoogle-chrome-extensionreact-router

5

我正在使用ReactJS创建Chrome扩展程序。我希望有两个页面，一个用于弹出窗口，另一个页面是通过单击弹出窗口上的按钮在新标签页中打开的。

- Bud Linville

1

请查看chrome.tabs.create的文档和示例。 - wOxxOm

有几种方法可以做到这一点。首先从ReactJS和Chrome API示例开始。按照woxxom所说的chrome.tabs.create。还有很多来自chrome-extensions-examples的示例。 - ReyAnthonyRenacia

我也卡在同样的问题上。我尝试使用React Router，但在新页面中打开时，它告诉我该页面已被删除。链接在同一页中运行良好。 - anushka

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Louis Nguyen · Accepted Answer

首先建议按照这个教程学习基础知识。

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

这对于基础知识会有很大的帮助。总体概括来说，您需要在public文件夹中更改manifest.json以使其看起来像Chrome扩展程序的manifest.json。在该manifest.json文件中，您需要添加index.html（也在public文件夹中），以便在任何您想要调用它的地方进行调用。

以下是示例：

{
     "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 run build构建后，在“Load Unpackaged”中选择Chrome扩展时，选择的是build文件夹而非public文件夹。