新手如何快速开发自己的谷歌插件？快来学习下吧～

Quick Open - 快捷打开指定Tab的插件

介绍

简介：Quick Open是一款方便快捷的谷歌浏览器插件，它可以帮助你通过简单的快捷键操作，快速打开指定的Tab页。同时，它还提供了配置页，让你可以自定义缩写与URL的映射，并支持Excel批量下载与上传。

功能

1. 快捷键操作：通过按下Ctrl + E（Windows）或Command + E（Mac），你可以快速打开插件弹窗。在弹窗中，只需输入预先设置好的缩写，即可立即打开对应的Tab页，省去了繁琐的鼠标点击操作。
2. 自定义映射：在配置页中，你可以轻松地设置缩写与URL的映射关系。这意味着你可以根据自己的需求，将常用的网页与简短的缩写关联起来。比如，你可以将git映射到https://github.com，这样只需输入git，就能快速打开GitHub。
3. Excel 批量下载与上传：除了方便的快捷键操作和自定义映射，Quick Open还提供了Excel批量下载与上传的功能。你可以在配置页中导入一个Excel文件，其中包含了多个URL，插件会自动将这些URL添加到映射关系中。同时，你也可以将当前的映射关系导出为Excel文件，方便备份和分享。

仓库：https://github.com/zouquchen/chrome-extension-quickopen (opens new window)

功能设计

功能概述

1. 快捷打开标签页：通过输入的简写打开新标签页。比如，输入 git，打开 Github 官网。
2. 配置文件增删改查：可以配置简写和 url 的映射关系，数据存储在 Chrome 的本地和个人账户。

功能演示

快速打开标签页

步骤1：输入快捷键Command + E或者Ctrl + E打开插件

步骤2：输入简写按下回车快速打开指定标签页。

配置

方式一：点击【配置】按钮，跳转到配置页面，可以对映射表进行增删改查。

方式二：通过excel进行批量下载和上传。

插件框架

基于React的谷歌插件框架：chrome-extension-boilerplate-react (opens new window)

结构简单说明 chrome-extension-boilerplate-react/src/pages

文件	说明
Backgrounds
Content
Devtools
Newtab	谷歌插件打开新标签页的内容
Options	配置页面
Panel
Popup	谷歌插件的弹窗，点击插件图标弹出的内容

Antd

Antd: https://ant-design.antgroup.com/index-cn (opens new window)

npm install antd --save

安装后，可以使用Antd的组件进行开发，减少工作量。

官方API

谷歌插件开发文档 (opens new window)，可以根据自己的需求进行搜索。比如，想要搜索文件存储相关的就输入file，然后筛选找到自己需要的文档。

chrome.storage

官方参考 (opens new window) ｜ 其他参考 (opens new window)

必须在manifest.json声明 storage 权限才能使用存储 API：

{
  "name": "我的扩展程序",
  ...
  "permissions": [
    "storage"
  ],
  ...
}

使用 chrome.storage API 存储、获取用户数据，追踪用户数据的更改。

使用local、sync 和 session 存储区域进行存储，以sync为例：

chrome.storage.sync.set({ key: value }).then(() => {
  console.log("Value is set");
});

chrome.storage.sync.get(["key"]).then((result) => {
  console.log("Value is " + result.key);
});

如果同步功能已启用，数据会同步到用户登录的任何 Chrome 浏览器。如果停用，其行为类似于 storage.local。当浏览器离线时，Chrome 会将数据存储在本地，并在浏览器恢复在线状态后恢复同步。配额限制大约为 100 KB，每项内容 8 KB。我们建议您使用 storage.sync 来保留已同步的浏览器的用户设置。如果您处理的是敏感用户数据，请改用 storage.session。

chrome.tabs

官方文档 (opens new window)

必须在manifest.json声明tabs权限才能使用存储 API：

{
  "name": "My extension",
  ...
  "permissions": [
    "tabs"
  ],
  ...
}

使用 chrome.tabs API 存储打开新的标签页

chrome.tabs.create({
  url: url
})