【Cursor】开发chrome插件，实现网页tab根据域名分组插件

---

前言

我们日常工作和学习中经常需要同时打开大量网页标签页。无论是研究某个技术主题、还是同时处理多个工作任务，浏览器中打开的标签页数量往往会迅速增长。

随之而来的是标签栏变得拥挤不堪，标签缩小到只能看到图标，严重影响了工作效率和浏览体验。

那能不能开发一个工具来做好标签页分组呢？最好是轻量级的，自己够用的就行。想了想，最简单的方式就是Chrome扩展开发了，轻量高效。

---

提示：以下代码内容均是由cursor生成

一、Cursor交互提示词

# 角色: 你是一位资深程序员，能够熟练开发google浏览器插件。
# 目的: 我需要开发一个插件,用于将google浏览器的tab自动分组,根据配置的域名自动分组。
当用户打开过多的浏览器tab，看着会比较混乱，通过插件自动分组后，会显得更加整洁和干净。
# 功能:
1. 点击插件,可以输出需要设置的域名,分组名称,和分组的颜色,颜色有(Blue、Red、Grey、Yellow、
Green)
2.点击保存后，页面消失,显示“保存成功”
3.当在浏览器打开对应域名的链接，后台将自动根据分组名称,和颜色，进行分组.
4.若打开新链接时,没有分组,则创建分组
5.若打开新链接时,已经存在相同域名的分组，则自动合并
6.配置的域名支持*通配符
# 注意:
1.注意使用 manifest v3 版本开发。
2.注意中文编码的问题。

二、操作步骤

1.新建文件夹,并在cursor中打开

2.选择agent模式，模型选claude-3.7-sonnet

3.输入上述提示词，等cursor调用大模型，响应结果

4.等待cursor执行完后，选择accpet all
项目代码见: https://github.com/swg209/tab-group-chrome-plugin

5.chrome浏览器里，打开插件扩展，点击“加载已解压的扩展程序”，选择本次插件开发代码的文件夹

6.使用插件-配置域名分组

7.打开对应域名的tab，效果如下：

点击分组，会将同分组的tab合并。

---

总结

本文介绍了一个轻量级的Chrome浏览器标签页自动分组插件，它能有效解决我们日常工作中标签页过多导致的混乱问题。

通过简单的域名配置，插件可以自动将相关标签页归类到同一个分组中，使浏览器界面更加整洁有序。该插件不仅支持精确匹配域名，还支持通配符匹配，可以灵活应对各种分组需求。

整个开发过程借助Cursor和大型语言模型，实现了高效快捷的插件开发，充分展示了AI辅助编程的强大能力。

虽然不太懂chrome插件的开发细节，但是借助cursor，仍然可以快速开发出插件，验证功能。AI辅助编程工具，让我们可以更快验证我们的产品设计想法。