如何开发一个Chrome拓展程序

背景

在日常工作中，我想大家应该都有一个烦扰，Chrome浏览器的Tab开得太多了，找到需要使用的Tab太难了，过多的Tab也会导致系统性能下降。为此，我上chrome应用商店寻找可以解决这个问题的拓展程序，尝试了很多拓展程序，没有找到一个满意的拓展程序。

为什么不自己动手做一个自己想要的拓展程序呢，于是我就开始了chrome拓展程序开发之旅。首先，我将介绍我开发的拓展程序SortYourTabs，然后，简单介绍下如何开发一个拓展程序。

SortYourTabs已经发布到chrome应用商店，欢迎安装使用。SortYourTabs项目的代码已经上传到GitHub，欢迎下载或贡献。

SortYourTabs

简介

SortYourTabs拓展程序的作用正如名称所述，它可以帮助您记录访问Tab的时间，并可以按照最近最少使用算法（LRU）对您的Tabs进行排序，您就可以快速找到您最近使用的Tab，您也可以快速找到最近都没有使用的Tab，然后及时把不需要的Tab关闭，避免Tab累积得越来越多，影响系统性能。

在使用该拓展程序时，如果有一些经常使用且不能关闭的Tab，您可以将该Tab固定，固定的Tab将不会被重新排序。

使用介绍

1. 安装后第一次使用时，请使用快捷键Ctrl(Win)/Command(Mac)+Shift+1进行初始化，拓展程序将开始记录您访问Tab的时间。下次如果想重新初始化记住当前Tab排序时，同样可以执行该命令；

2. 使用快捷键Ctrl(Win)/Command(Mac)+Shift+Right将Tab按照LRU从左到右排序，最右边的Tab为最近使用的，最左边的除固定Tab是最近最少使用的；

3. 执行2中快捷键对Tab排序后，如果想恢复最初的排序，则使用快捷键Ctrl(Win)/Command(Mac)+Shift+0。

如何开发一个拓展程序

文件结构

拓展程序的开发需要使用前端技术体系，如JavaScript、CSS、HTML。你可以选择任何一个你喜欢的文本编辑器进行开发，我使用的是vscode。首先，我们需要创建一个文件夹，文件夹名称为你的拓展程序的名称。然后，在该文件夹中创建一个必要的文件manifest.json，可以参考SortYourTabs。manifest.json文件中permissions表示需要申请的权限，commands表示定义的快捷键，scripts表示拓展程序的脚本，这里也是主要的逻辑代码。
scripts中指定了运行的js脚本，主要的业务逻辑就在这个js脚本里面，因此接下来就是在这里开发你的业务逻辑。接下来你将需要了解chrome提供给开发者的API有哪些。

API

chrome开发者社区为我们提供了非常详细的资料，同时也详细介绍了如何开发一个拓展程序，如果有什么疑问，这里无疑是最好的资料。如果你不知道需要使用什么API，你可以通过搜索关键字查询。

Debug

使用chrome浏览器访问 chrome://extensions 打开拓展程序安装页面，打开页面右上角开发者模式，然后从页面左上角选择加载已解压的拓展程序，选择你的开发文件夹，拓展程序就安装好了。找到你安装的拓展程序，点击背景页（如下图所示），这时就出来了一个console，拓展程序的所有输出和debug都在这里。如果需要在代码中加入断点，可以在代码中需要断点的位置加上一行代码“debugger”。

发布

使用chrome浏览器点击打开开发者中心页面，首先你需要注册成为chrome应用开发者，并且需要支付5美元的费用。很多人可能并没有visa信用卡，这该怎么办呢，我找到了一个神奇的网站：全球付，在全球付网站上面注册一张MasterCard，最低充值金额是50美元，可以使用国内银行卡进行快捷支付。


接下来你就可以开始上传你的拓展程序了，你需要将你的文件夹打包成zip格式的压缩文件，并填写拓展程序的信息。根据你拓展程序使用的权限会花费不一样的时间，如果你的拓展程序不需要申请使用比较敏感的权限，提交审核后几个小时就通过了。这个时候你上应用商店还并不能搜索到你的拓展程序，你可以点击你的拓展程序进入到拓展程序的安装页面。