前言
近年来，AI 技术在全球范围内迅速崛起，成为科技、商业和社会变革的核心驱动力。随着今年 1 月 DeepSeek-R1 模型的发布，其开源和低成本高性能的特性让 AI 的使用门槛大大降低。
在前端领域，AI 代码编辑器如 Trae、Cursor 可以提升我们的生产力。本文将使用 Trae 开发一个 Chrome 插件，让我们一起感受下 AI 带来的提效。
插件开发
打开 Trae 编辑器后，在右侧的 AI 聊天框里选择内置的 Builder 智能体，切换好了后， AI 不仅仅能回答我们问题，还可以帮我们创建文件，编写代码。
接下来可以根据自己的喜好选择对应的 AI 模型，在右下角可以切换，本示例中使用的 DeepSeek-V3。
设置完成后，我们在此实现一个喝水提醒的插件，在 AI 聊天框中输入“实现一个喝水提醒的Chrome插件“。
在生成代码的过程中，Trae AI 功能会让我们审查代码，可以简单看一下代码内容，没大问题直接选择“全部接受”。
稍等一会，AI 就完成代码生成，可以看到 Chrome 插件的项目结构和代码都已出现在我们目录中。
接着我们用 Chrome 浏览器加载下插件，查看下效果。
加载时发现报错了，图标的相关的文件不存在，继续提示要求生成图标，“manifest.json 中有部分图标不存在，修复一下”。
补上图片后重新加载了下插件，这次完成了插件的安装，插件的弹窗如下。
在点击测试提醒后，发现插件提醒图标加载不对，估计是 chrome.notifications.create API 中图标参数路径不对。这边就手动调整下，不使用 AI 生成的图标（一个加号图标），从 iconfont 上下载了一些图片，手动替换了下图标，并正确的设置了下图标路径。
好了后再点击测试提醒，Chrome 就正常弹窗消息通知了。
看了下代码，插件现在是每小时会提醒一下喝水，我们完善下功能，支持自己设定提醒间隔时间。在 AI 输入框输入“支持用户设置提醒的间隔时间”。
等待 AI 完成代码调整后，我们重新加载插件，发现了加载失败，权限相关出现了问题，AI 中使用了 chrome.storage 是记住用户输入，但是权限并未声明。
直接手动添加下，"permissions": ["alarms", "notifications", "storage"]。
重新加载插件后如下：
验证下设置功能，发现调整为 1 分钟后，并未触发提醒。看了下代码，在修改设置后，代码逻辑没有重新设置提醒间隔 chrome.alarms.create。
继续在 AI 框里输入“保存设置提醒时间后，没有立即生效，请调整”， AI 调整完成后，测试喝水提醒插件现在运行相对正常。
到此我们完成了插件的开发，大概花了十几分钟的时间。
小结
整体体验下来的感受是，Trae 等 AI 编辑器确实可以提升生产力，但是你还是要有相关的知识储备，在功能越复杂的情况下，这点越明显。
对于前端来说，你现在可以更多的借助 AI 去实现自己的想法，AI 能较快地完成基础代码的编写，你负责检查代码、完善细节，有点“我和 AI 结对编程”的感觉。
