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
- chrome.tabs.get
- chrome.tabs.group
- chrome.tabs.query
- chrome.tabs.update
- chrome.tabs.ungroup
- chrome.tabs.onCreated.addListener(()=>{})
- chrome.tabs.onRemoved.addListener(()=>{})
- chrome.tabs.onDetached.addListener(()=>{})
- chrome.tabs.onAttached.addListener(()=>{})
- 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插件试试,搞不定的时候再去看一下作者的开源项目。