chrome auto groups 插件使用&分析

效果

我们往往chrome tab开多了，就会如下效果：

使用chrome tab效果如下：

例如我们配置后，能让github、掘金、阿里云、人人都是产品等打开的tab合并如下效果：

关键其好处，还能让新打开的tab合并到同一类型的区域。

安装方法

https://chrome.google.com/webstore/detail/auto-group-tabs/danncghahncanipdoajmakdbeaophenb/related?hl=zh

关于作者

一位来自德国的全栈前端工程师。

它的博客：

https://loilo.de/

关于该项目的源码

在chrome85，chrome介绍了这个tab group的功能（一个聚合，并给一个颜色和可选的标题）。但是普通配置是比较枯燥的，所以作者就结合正则配置，开发了这个chrome插件。

插件代码：

https://github.com/loilo/auto-group-tabs

项目使用：Vue 3.0 和 Vite 2.0开发。

原理分析

用到的一些chrome插件的开发api：

https://developer.chrome.com/docs/extensions/reference/tabs/#method-get

1. chrome.tabs.get
2. chrome.tabs.group
3. chrome.tabs.query
4. chrome.tabs.update
5. chrome.tabs.ungroup
6. chrome.tabs.onCreated.addListener(()=>{})
7. chrome.tabs.onRemoved.addListener(()=>{})
8. chrome.tabs.onDetached.addListener(()=>{})
9. chrome.tabs.onAttached.addListener(()=>{})
10. chrome.tabs.onUpdated.addListener(()=>{})

开发chrome插件的Manifest文件需要做一些配置：

tab permission:

1
2
3
4
5
6
7
8

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

Host permission:

1
2
3
4
5
6
7
8
9

{
  "name": "My extension",
  ...
  "host_permissions": [
    "http://*/*",
    "https://*/*"
  ],
  ...
}

activeTab permission:

1
2
3
4
5
6
7
8

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

我看一些api版本要求是：chrome 88+。

所以理解这些原理后，我们就能开发出这样的chrome插件。如果想要抢占先机，那就要跟进chrome Extensions的新特性。

它会发布新特性介绍：https://developer.chrome.com/docs/extensions/whatsnew/ 大家可以关注一下这个特性。

总结

最终大家如果要试着开发这样的插件，首先看看能否理解这些api，然后再开发一个chrome插件试试，搞不定的时候再去看一下作者的开源项目。