前言
不知道大家有没有这样的苦恼，我们使用浏览器时经常会打开很多网页，感觉每个页签都有用，都舍不得关掉，结果就是下面这样，有多又乱，有时想找一个页签都要找半天。
虽然浏览器也提供了页签分组的功能，但是一个个分钟也挺难受的，今天尝试使用Cursor制作一个浏览器插件实现自动分组。今天继续尝试使用Cursor开发一个浏览器截图插件，对使用Cursor开发感兴趣的小伙伴也可以看往期案例：
插件开发
使用Cursor Rules
和之前的Github Trending插件一样，我们新建一个项目，在项目根目录配置 .cursorrules 提示词规则，还不了解的小伙伴可以看往期：【Cursor实战】实现一个爬取Github Trending热榜插件
插件开发
接着使用快捷键【Cmd+I】唤起Composer，输入我们的需求提示词
现在需要你帮我实现一个浏览器插件，功能是对浏览器的页签进行域名分组，具体要求如下：
1. 提供2个页面，一个配置页面，一个编辑页面
2. 配置页面内容：
- 提供需要设置的域名、分组名称和分组的颜色
- 点击保存按钮后，将已打开的页签进行分组，页面消失
3. 编辑页面内容：
- 展示分组记录列表，展示内容设置的域名、分组名称和分组的颜色
- 记录支持编辑和删除
4. 在浏览器中打开对应域名的链接时，后台自动根据分组名和颜色进行分组
- 如果该域名已存在分组，自动将该域名加入到分组
项目生成后，可以看到Cursor并没有直接为我们生成icon，而是提供了生成icon的脚本，首先我们需要先进行icon的生成
脚本依赖canvas，我们需要使用npm全局安装canvas，可以在终端执行如下命令：
# node版本要求18以上
$ npm i canvas -g
安装完成后执行脚本生成插件icon，这点Cursor做的还是不错的，解决了使用者自己制作icon的过程
$ node convert_icons.js
最终生成的项目结构如下
之前案例中Cursor还提供了HTML生成icon的方式，感兴趣的小伙伴可以看往期内容：
【Cursor实战】实现一个爬取Github Trending热榜插件
插件使用
在浏览器中加载本地插件，看到插件状态没有异常即可进行预览
打开插件，可以看到效果如下，看着还不错，新建一个分组规则，填写 域名、分组名称、颜色 并点击【保存并分组】进行保存
保存后，初次效果并没有想象中好，分组成功了，但是标签颜色没有生效
我们将问题截图发给Cursor进行修复
修复完成后实现了分组颜色功能，效果如下
点击【管理分组规则】进行查看，同样有问题，发现分组规则没有加载出来
将问题同样截图提供给Cursor进行尝试修复
中间省略了多轮对话修复问题，问题还是不少的，最终又是经过了多轮对话完成了需求，最终效果如下：
- 添加分类对已打开的标签进行分组，打开已配置的域名会自动合并到分组中
- 修改分组规则页签会自动同步
- 删除分组规则后规则不再生效
总结
也可能是提示词写的不够详细，没有明确表达需求，导致这个案例Cursor出现的失误比较多，如标签颜色同步、已打开同域名标签多次分组等，最终也是经过多轮调试，最终完成了插件功能。Cursor可以抹平很多技术栈的门槛，但不代表能完成所有任务，提效还是要建立在懂的基础上。
项目地址
项目放到Github了，感兴趣的小伙伴可以自行玩耍
Github地址：github.com/MisterZhouZ…
友情提示
本文同步自微信公众号 "程序员小溪" ，这里只是同步，想看及时消息请移步我的公众号，不定时更新我的学习经验。
