案例一：自动分组浏览器 Tab

利用Cursor工具实现

第一次提示词：

# 角色:
你是一位资深程序员，能够熟练开发google浏览器插件。

# 目的:
我需要开发一个插件，用于将google浏览器的tab自动分组, 根据配置的域名自动分组。通过插件,如果用户打开过多的浏览器tab, 这样看着会比较混乱. 自动分组后, 会显得更加整洁和干净.

# 功能：
1. 点击插件, 可以输出需要设置的域名, 分组名称, 和分组的颜色, 颜色有(Blue、Red、Grey、Yellow、Green)
2. 点击保存后, 页面消失,显示“保存成功”
3. 当在浏览器打开对应域名的链接, 后台将自动根据分组名称,和颜色, 进行分组.
- 若打开新链接时,没有分组,则创建分组
- 若打开新链接时,已经存在相同域名的分组, 则自动合并

# 注意:
1. 注意使用 manifest v3 版本开发。
2. 注意中文编码的问题。

第二次提示词：

输入框中输入相应的提示，比如，请输入域名（www.example.com），请输入分组名称

第三次提示词：

域名可以泛指，比如  rdm.yfzx.965432.com、gxpt.yfzx.965432.com, 我输入的域名是*.yfzx.965432.com， 可以分为一组

第四次提示词：（如果生效了，可以忽略，不交互）

泛域名没有生效，比如我域名输入的是 *.yfzx.965432.com ，分组名称是Aisino， 但是rdm.yfzx.965432.com、gxpt.yfzx.965432.com 没有自动分组？

随便找三张图：

1729216968413.png

可以通过 iconfont 网址随便下载三个图表放入生成代码的目录，如下图：

1729217038738.png

Chrome插件加载目录，加载成功如下图：

1729217092854.png

效果：

1729217928010.png

完美

为了使插件更美观，增加了如下提示词，

提示词：
1、已保存的，增加一个编辑功能
2、弹窗整体宽度大一点，保证编辑按钮和删除按钮不换行
3、编辑按钮和删除按钮右对齐
4、域名输入还继续支持ip

效果如下图：

1729221601972.png

提示词

1、已保存的，增加一个按钮，上移下移，保持已实现的功能不变，也是右对齐

1729222117926.png