本文介绍了如何利用AI技术开发一款Chrome浏览器插件，以实现对标签页的自动分组管理。通过提示词，AI能够生成插件代码，根据域名自动对已打开的标签页进行分组，并能自动将新打开的同域名标签页加入已存在分组。文章详细展示了插件的开发、安装和使用过程，并对初始版本进行了优化，最终实现了无需手动设置的自动分组功能，极大地提升了浏览器的标签页管理效率。

👨‍💻**需求明确**: 通过清晰的提示词，向AI明确Chrome插件的功能需求，包括自动分组、域名设置、分组颜色等，为AI代码生成奠定基础。

⚙️**插件安装与调试**: 详细介绍了Chrome插件的安装步骤，包括打开开发者模式、添加已解压的扩展程序等，并展示了插件成功添加后的界面。

🎨**初始版本与优化**: 初始版本需要手动设置域名和分组信息，随后通过优化，实现了点击插件时自动按照域名进行分组，无需手动填写，提升了用户体验。

✨**最终效果展示**: 展示了优化后的插件界面，实现了自动分组功能，并鼓励读者根据个人喜好进行微调，体现了AI辅助开发的灵活性和可定制性。

你好，我是山茶，外企独角兽程序员，正在和 1000+ 朋友一起探索AI和副业中。

用 AI 制作 100 个应用挑战，今天是第三期，我们今天用 AI 做一个 Chrome浏览器插件，来实现我们对标签页的管理。

实现的结果图如下

开始开发

下面是相关的提示词

请帮我实现一个 Chrome 插件，能够自动对浏览器标签页进行分组管理#要求1. 自动对已打开标签页进行分组管理，点击插件可以设置域名，分组名称和分组颜色2. 有保存按钮，点击保存之后，提示保存成功3. 当浏览器打开对应的域名的链接时，后台自动根据分组名称，颜色，对标签页进行分组   - 打开链接时，没有分组，则创建分组，如果存在分组，则自动合并，默认为收起4. 插件名称命名为：Chrome标签页收纳#注意- 无需使用图标- 使用V3版本的manifest.json- 请注意中文的格式编码问题

如图所示应该是完成了我们需求的制作，现在就开始接续安装吧！看看有没有生效！

Chrome安装插件

如何安装插件，打开设置，找到扩展程序

打开开发者模式，选择添加已解压的扩展程序

找到刚才的文件夹，直接添加既可，如下显示表示成功添加

点击右上角的插件管理，开始使用

开始进行设置,虽然是手动能够设置，但是打开的页面如果太多，那么就会存在一个比较耗时间的问题。

继续优化

所以我们继续优化一波，直接让其自动收纳，不在麻烦的手动填写了

现在更改chrome插件需求，插件分组管理#要求1. 当点击插件时，自动按照域名进行自动分组，不用手动填写，区块颜色随机2. 浏览器对应的域名存在分组，当打开新的标签页时自动加入已存在分组。如果没有分组则创建#注意- 无需使用图标- 使用V3版本的manifest.json- 请注意中文的格式编码问题

更新以后在浏览器页面点击刷新按钮同步更新就能用了

更改以后的页面设计

最终实现了自动分组

好啦！今天就到这里。如果大家对当前样式还不够满意，可以继续让它进行微调哦！

欢迎在评论区留言，留下你想实现或你喜欢的应用。我会从你们评论中挑选一些有趣的建议去实现他们！