时间戳

首页 > 解决方案 > 如何创建可以从弹出窗口打开新选项卡的 ReactJS chrome 扩展？

javascript - 如何创建可以从弹出窗口打开新选项卡的 ReactJS chrome 扩展？

问题描述

我正在使用 ReactJS 创建一个 chrome 扩展。我基本上想要有两个页面 - 一个用于弹出窗口，第二个页面通过单击弹出窗口上的按钮在新选项卡中打开。

标签： javascriptreactjsgoogle-chrome-extensionreact-router

解决方案

首先，我建议遵循本教程的基础知识。

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

这将对基础知识有很大帮助。一般的总结是，您希望将public 文件夹中的 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 run build 构建它并在“Load Unpackaged”中选择 chrome 扩展时，您选择的是构建文件夹而不是公用文件夹。

推荐阅读