自动创建、保存和管理 Chrome 标签分组(Tab Groups)功能的扩展程序

[hanguokai]

Chrome 原生的标签组功能

去年 (2020 年) Chrome 推出了标签组 (Tab Groups) 功能，网上有很多介绍。简单地说，标签组功能是在浏览器中“可视化”地将标签页分组显示。使用效果上看，将相关的标签归并到一起，看起来井井有条、很舒服，也有利于提升工作效率。

具体操作层面，通过鼠标点击、右键点击和拖拽可以完成以下功能：

• 新建标签组，取消标签组
• 将标签移到现有标签组，或移出标签组
• 为标签组设置名字和颜色
• 标签组可以收缩(减少空间占用)和展开
• 标签组可以整体左右移动或移动到新窗口

此外，标签组还有几个默认行为：

• 从标签组中打开的新页面自动归属当前标签组
• 关闭标签组中的最后一个标签，标签组也自动关闭

扩展功能介绍

以上这些就是标签组的基本功能。但是很多人在尝试了之后，感觉自己平时很少使用这些功能。因为这些功能都需要用户自己手工处理。而日常大多数页面都是随用随开，用完即关，这样标签页本身是经常变化的，进而标签组也就不稳定。分组关闭之后，每次再重新手工建立和管理太麻烦了。

所以我新做了一个扩展程序，目标就是解决这些问题，让标签组功能更好用。因为管理原生标签组功能的 API 是从 Chrome 89 (2021 年 3 月初发布) 才有的，所以目前支持这方面功能的扩展应该还很少。具体功能如下：

1. 自动分组

通过自定义匹配规则，为标签页自动创建分组，这样解决了手工创建分组的麻烦。 规则支持对页面的域名、URL 或页面标题进行匹配。可以创建一条或多条匹配规则，匹配之后会自动创建分组或合并到现有的分组中。 注：自动分组仅针对未被分组的标签。

比如你可以创建一条规则，将所有 V2EX 页面自动合并到名为 V2 的标签组中。

2. 保存和恢复

扩展支持一键保存当前打开的标签和分组(快照)。 因为分组中的标签并不是一成不变的，所以这里使用了快照的概念，同一个分组可以保存多个快照，每个快照保存的是分组的当前状态(标签和 URL)。 恢复也是一键打开，点一下即可打开某个保存的标签或分组。比手工使用书签实现类似的功能更加快捷。

3. 标签和分组管理功能

扩展会列出当前的所有标签，支持激活、关闭标签，修改分组名称和颜色等功能。

4. 快捷键

扩展提供了大量可自定义的标签和分组管理的快捷键，比如移动、关闭标签或分组，添加分组、取消分组等。

安装

Chrome 扩展商店链接： https://chrome.google.com/webstore/detail/nplimhmoanghlebhdiboeellhgmgommi

正如前面所说，此扩展需要 Chrome 或 Edge 浏览器 89 及以上版本才能使用。Edge 浏览器可能没有默认开启标签组功能，可以在地址栏上输入 edge://flags/#edge-tab-groups，手工开启该功能。

PS：这是刚刚通过 Web Store 审核上线的第一版，欢迎试用。

Microsoft Edge 扩展商店： https://microsoftedge.microsoft.com/addons/detail/jgcmbjdhakghmngjkdpejdcchbigdmgf

[airyland]

添加规则后，已有标签是否不会执行分组？

[hanguokai]

@airyland 新页面或页面 URL 、标题有变化的时候才会应用规则。规则可以随时添加、修改、删除，通常建好之后不会经常改。

[airyland]

@hanguokai 已经用上，实现了我之前类似扩展的想法。

[hanguokai]

随便给大家分享个小技巧：Shift+鼠标点击 或 Cmd/Ctrl+鼠标点击 可以同时选择多个标签页，然后鼠标右键或快捷键就可以一次将多个标签页添加到分组了。

[deqxj00]

激活分组的快捷键 能做成按一次展开 再按一次缩回去这样的么

[hanguokai]

@deqxj00 你这么一说我感觉好像会有这种需求。

如果利用目前提供的快捷键，则需要：1.先激活过去； 2.再利用收缩 /展开快捷键。

我想也许再提供一套 1-9 的快捷键，用来收缩 /展开第 n 个分组。
稍后我再考虑考虑，也许过些天、下个版本加上。

[deqxj00]

@hanguokai 或许可以做个 Toggle，1-9 快捷键可以自定义用“展开”或者“展开 /收缩” 这样。

[Tink]

要是能用 ai 语义识别标签页自动归类就好了

[codehz]

创建规则后 tab 崩溃，触发错误 STATUS_ACCESS_VIOLATION

[hanguokai]

@codehz 虽然我还没遇到过，不过这种问题一般是浏览器内部的 bug 。需要提供可复现的方法提交到 https://bugs.chromium.org/p/chromium/issues/list，或者可能其他人已经反馈了，等几个月或几年可能就修复了。

[wd]

扩展很好用，`从标签组中打开的新页面自动归属当前标签组` 这个居然不能关闭么？ 试过 chrome://flags/#tab-groups-auto-create 好像没用的样子。

另外，感觉 chrome 的这个 tab group 还是有奇怪。不会自动缩回去，缩回去之后通过快捷键挨个切换 tab 的时候，居然会跳过缩回去的 group 。。

[hanguokai]

@wd 我在做的过程中也感觉到一些行为细节是“应该这样，还是应该那样？”。对一些人可能这个设定是好的，但另一些人可能不希望这样。Google 官方也没有完全想好。

比如说，`从标签组中打开的新页面自动归属当前标签组` 这个默认行为我可以在扩展中覆盖掉，但这意味着要对已经处于分组中的标签重新分组。这可能是一部分用户期望的，但也可能造成一些用户不期望的副作用。所以我发布的第一版里没这么做。目前我在考虑增加一个设置选项来支持，默认状态还是应该保留浏览器的默认行为。

[wd]

@hanguokai 我感觉那个动作和你这个扩展的 rule 是一个不匹配的情况。创建 rule 的本意就是用 rule 来分组，用户应该不想在一个 news 的分组里面把 github 放进去吧？我本来是把 google 分了一组，结果发现从 google 打开的页面也进入了那个分组。

主要是为啥我通过修改那个 flag 不能关闭？奇怪...

[hanguokai]

@wd 比如说把 google 搜索结果页设置为一个“搜索”分组，那么从搜索结果页中打开的链接（按默认行为）会自动属于这个分组。这倒是也能说得通，因为这些页面之间存在相关性（都是为了解决同一个问题，由同一个页面延展而来）；这样还有一个好处：搞定问题之后可以整体关闭这个分组。所以看怎么理解和使用分组了。当然，如果用户期望的是从搜索结果打开的页面被自己建立的规则匹配，而不是划分为搜索分组，这也很合理。所以我准备增加一个选项，让用户自己来设置。未来可能还需要允许设置规则的优先级。我这几天再考虑一下，可能会先把那个选项加上。

> 主要是为啥我通过修改那个 flag 不能关闭？
tab groups 相关的功能去年已经正式推送到 Chrome 稳定版。按 Google 的惯例，相关的 flag 可能就不再有效了。足够稳定之后，未来可能会删掉相关的 flag 。

[wd]

@hanguokai 嗯 你说的这个也有道理。group 我用的不多，感觉还需要用用才能明白需要什么。

[cutemurphy2000]

https://i.bmp.ovh/temp/1812/a67cfc94c8e7aa1a.jpg

[hanguokai]

@cutemurphy2000 😄
PS: 其实这里只用了 Bootstrap 5，而 BS 5 已经不依赖 jQuery 了。剩下的 100% 纯手工 vanilla JS 。

[0A0]

@hanguokai 雪中送炭的扩展！被 google 自带的分组功能很很坑了好几次终于受不了再找插件替代。chrome 默认的分组如果缩起来后关掉 chrome 再打开然后恢复上次打开的标签页时，所有分组里的标签全部都会丢失掉。因为这个要死不死的辣鸡机制丢了好几次重要的标签。
看了下这个扩展里有快照功能，但是没办法自动（定时）保存或关闭 chrome 前自动保存全部分组快照，需要手动点保存，如果分组太多的话一个一个点有点麻烦，快照快捷键也没有，但是还是超级好用的插件。能加上快照自动保存相关的功能的话就完美了，希望能够实现。

[hanguokai]

@0A0 感谢反馈！目前分组可以保存一个或多个快照但需要手动保存。因为分组里的标签经常变化，所以我也感觉自动保存还是挺有用的。稍后我考虑下怎么实现。

[codehz]

啊，原来除了设置界面会 crash，后台跑的 service worker 也会在操作的时候触发崩溃啊，devtools 直接断开连接（

[hanguokai]

@codehz crash 的情况我还没遇到，不过谢谢反馈！如果有更详细信息可以发邮件给我，看看能不能在我这复现。我的邮箱在 Chrome Web Store 上可以看到。PS：service worker 和一般页面不一样，更新、出错、reload 扩展等都会导致从 devtools 中断开。

[hanguokai]

@wd 今天更新了一个版本(0.0.3)。打开 chrome://extensions/ 右上角打开“开发者模式”，可以看到版本号。如果还没更新，点击左上角“更新”按钮即可手工更新。

更新后，在弹出页->分组规则 下面多了一个“对已处于分组中的标签也应用规则”的复选框。勾选即表示即使一个标签页已经处于某个分组中了，但如果导航到其它页面也会重新按规则匹配，同时也覆盖了浏览器默认的“从标签组中打开的新页面自动归属当前标签组”行为。

[wd]

@hanguokai 我升级测试了，确实可以处理好了。我用了一会，发现确实如你前面所说，通过页面点击产生的 tab 自动加入 group 可能是一个比较好的方式。我把 google 的页面分组到一起之后，发现单独留着这个分组好像并没有什么用。确实应该是按照解决特定问题的时候分组，解决完毕直接关闭分组，可能会比较好一点。我也还在摸索中。谢谢你的扩展。

[psterman]

感谢楼主的推荐，今天在少数派上看到推荐了。提几个建议仅供参考
1.把分组颜色的选项换成网站自带的 ico 图标，减少选项强迫症；
2.能不能增加一个竖列预览标签模式？方便浏览主题并跳转？
3.能不能开放一个快捷键，专用于展开 /合拢当前标签组？
再次感谢

[hanguokai]

关于分组“收缩 /展开”快捷键：

@deqxj00 #5
已经增加了 9 对新的快捷键，用于收缩 /展开第 n 个分组。
并且还增加了一个快捷键，用于一键收缩 /展开当前窗口中的所有分组。
这个修改我在 3 天前就提交到 Chrome 商店了，但是最近 Chrome 商店审核速度比较慢，现在还是“审核中”的状态，所以再等等，应该快了。

@psterman #24 的建议 3
“收缩 /展开当前分组”的快捷键在最初的版本中就支持了，你可以快捷键设置里应该可以找到。

[hanguokai]

@psterman #24

> 1.把分组颜色的选项换成网站自带的 ico 图标
（浏览器标签栏上的）分组（不管是手工还是通过扩展）只支持设置颜色和名字，目前不支持设置图标。另外，一个分组中的标签不一定都来自同一个网站，所以图标也可能是不一样的。

> 2.能不能增加一个竖列预览标签模式？方便浏览主题并跳转？
点击扩展图标，首先展示的就是当前窗口的所有标签，点击即可跳转过去。还是说“竖列预览标签模式”是 Edge 浏览器最近新出的那种功能？那种需要浏览器支持，扩展做不了。

> 3.能不能开放一个快捷键，专用于展开 /合拢当前标签组？
这个已经支持了，点击扩展图标->快捷键->最下面“自定义快捷键”，然后在那个页面里找到 “收缩 /展开当前分组” ，设置一下即可。

[hanguokai]

@deqxj00 刚刚新版本（ 0.0.4 ）已经通过商店审核，我在 #25 中说的新快捷键更新后可以用了。因为 Chrome 扩展自动更新要延迟几个小时或 1 天时间。手工立刻更新的方法见我在 #22 的说明。

[psterman]

@hanguokai #26
关于扩展快捷键
感谢回复，已经找到设置选项了！请问能不能把点击扩展图标也设置一个快捷键选项，哈哈

关于图标设置归类
因为个人是按照网站域名前缀来归类标签的，比如抽屉、少数派，cnbeta 这些网站一次性打开很多，所以才有按照图标分类的需求。能实现一键同域名网页的自动化归类吗？

[hanguokai]

@psterman
> 请问能不能把点击扩展图标也设置一个快捷键选项
技术上是可以的，并且是应该支持的。但是这个扩展需要使用一种新的扩展技术(manifest v3 - chrome.action)，而 Chrome 对 V3 的激活扩展快捷键的支持有 bug 。这个 bug 就是我最先发现的，并于 23 天前向 Chromium 反馈了这个 bug，https://bugs.chromium.org/p/chromium/issues/detail?id=1190476 。一旦官方解决，我会尽快加上去。

> 能实现一键同域名网页的自动化归类吗？
我先试试，看看效果。技术上没问题，主要是看行为是否符合用户预期、副作用有多大（比如说会破坏现有分组）。如果只是想对*少量*经常打开的网站自动归类，那么设置几条分组规则就能解决了。而这个功能则是针对*所有*网站。

[hanguokai]

@psterman
> 能实现一键同域名网页的自动化归类吗？
我自己体验了一下。如果浏览器上本身*没对标签做任何分组*，那么一键对所有 tab 完成同域名的归并分组还挺方便的。但是这会破坏之前已经存在的分组。另外，归并分组的时候，关于分组名称有两种选择：1 ）不设置名称； 2 ）设置分组名称为合并时的域名。另外，这种操作（通过快捷键或一个按钮）是一次性执行，是否需要自动对新页面持续不断地保持这样我不太确定。

[hanguokai]

@psterman 还有一种不错的效果：一键按域名归并分组，并自动设置分组名称为域名，同时将所有分组收缩（因为不收缩的话标签栏可能显示不下这么多分组了）。

[psterman]

@hanguokai #31 可能你的软件设置选项会比较多，因为每个人的需求不一样
你这种方案对我是最好的 哈哈
@Livid @Kai @Olivia @GordianZ @sparanoid @Girlphobia

[hanguokai]

@psterman 关于“一键同域名网页的自动化归类”
已发布新版本(0.0.6)，增加了 2 个实现这个功能的快捷键。可以手工立刻更新。

理论上，按域名自动分组之后，「是否设置分组名称 X 展开或收缩状态」有 4 种可能的功能组合，扩展实现了其中的两种：
✅ 设置域名为分组名称，且收缩全部分组
✅ 不设置分组名称，也不收缩分组
❌ 设置域名为分组名称，但不收缩分组：设置分组名称意味着占据很多宽度，标签太多可能会导致显示不下，故不提供支持。但是如果用户只开了很少的标签页，希望自动分组后全部展开，可以结合另外一个 “展开或收缩全部分组” 的快捷键解决。
❌ 不设置分组名称，且全部收缩：会导致标签栏只剩下一堆小圆点，根本不知道那个标签页在哪里，故不提供支持。

[psterman]

@hanguokai #33 自动命名变色归类的功能很赞！ ctrl+a 分配给她长驻了！
分组规则的子选项太细心了，赞一个，不会乱了。

[psterman]

@hanguokai #4 如果增加历史同步、备份、备注、加锁、定时等个性化的功能可以往收费功能发展么。希望这个插件能更好地发展

[deqxj00]

感谢楼主的更新 很好用。希望能坚持下去

[liango]

希望不按快捷键不设规则也能自动按域名分组啊

[hanguokai]

@liango 我正在考虑增加一个选项来实现这个功能。当然，启用这个功能就意味着其它自定义规则会失效（因为行为冲突）。

[hanguokai]

@liango 新版本(0.0.11)已支持自动按域名分组。
就效果来看：如果打开的标签来自少数网站，且网站域名较短时效果比较好；如果打开了很多标签，每个标签都来自不同的域名，网站域名又较长时，效果不好。

[liango]

@hanguokai 感谢楼主,刚刚试了一下 0.0.11,很好用哦,可以解决我的问题了,工作经常会开好多标签,url 都差不多(相同代码发到不同测试环境,就域名或者端口号稍微有点不同),刚打开的标签经常记不住是哪个了,有了这个自动分组应该好一些了.

[hanguokai]

@psterman #28 #29
> 请问能不能把点击扩展图标也设置一个快捷键选项
新版本 (0.0.12) 已添加了这个快捷键支持。但由于浏览器尚未修复这个 bug，所以设置这个快捷键要“禁用再重新启用”扩展或重启浏览器才能生效。仅激活扩展这一个快捷键受此 bug 影响，其它快捷键功能正常。

PS：现在还支持自动按域名进行分组的选项了，但启用时会禁用所有其它规则。

[psterman]

可以建一个微信群吗？希望能长期聊

[hanguokai]

@psterman 时不时我会收到一些国内外用户的反馈，但此前从来没有为此建群。单独联系我的话可以发邮件给我（ Chrome 商店上的邮箱就行），微信可以通过邮件告知。

[psterman]

@psterman #34 能换成 ico 显示域名标签吗？

[hanguokai]

@psterman 目前只能设置文本类型的名字，不支持设置 ico 、图片。想实现的话，只能向 Google 提 feature request 。
要不用随机生成的 1-2 个字母来表示域名？这样可以短一点。否则只能用自定义规则了。

[psterman]

@hanguokai #45 现在有的域名会比较长，比如 message.bilibili 就很占空间
另外能设置单快捷键吗，ctrl+a alt+2 有点麻烦

[hanguokai]

@psterman 自动域名分组怎么解决名称太长的问题我还没想好，稍后有时间的话我看看能不能做几种简单的缩短策略让用户选择。就我个人而言，用自定义规则把自己最经常访问的网站自动分组，名称可以自定义；不经常访问的网站分不分组无所谓。

> 能设置单快捷键吗?
不行。在 chrome://extensions/shortcuts 里设置的这种快捷键必需是组合的。那种在网页里生效的快捷键是可以的，实现机制不一样。

[psterman]

@hanguokai #47 已经搞定，我这边用 quicker 这类快捷键软件来实现单键转多键的曲线救国模式来实现单键激活了。
现在用颜色标签自动分类，也算间接实现了 logo+标签完成。非常好

[ko1haha]

界面很漂亮，很专业。但我感觉有点复杂的（尤其快捷键好多啊），不是我的需求，我想要的其实很简单：强制分组，不能存在未经分组的标签页。

稍微改了改。要是 Chrome 自带的功能就好了，也不用太复杂。

---

我上次在知乎下载的。发现分组名不能是空的。其实是可以的。分组名称空的时候，最左边显示的是一个圆形点。