10 分钟开发一个 Chrome 插件?Trae 让你轻松实现!

前言

近年来,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 结对编程"的感觉。

相关推荐
GDAL1 分钟前
Object.freeze() 深度解析:不可变性的实现与实战指南
javascript·freeze
江城开朗的豌豆20 分钟前
Vue+JSX真香现场:告别模板语法,解锁新姿势!
前端·javascript·vue.js
围巾哥萧尘26 分钟前
Trae solo 2.0 三个案例的测试(贪吃蛇、面板、心情)🧣
trae
这里有鱼汤28 分钟前
首个支持A股的AI多智能体金融系统,来了
前端·python
袁煦丞28 分钟前
5分钟搭建高颜值后台!SoybeanAdmin:cpolar内网穿透实验室第648个成功挑战
前端·程序员·远程工作
摸鱼仙人~29 分钟前
Vue.js 指令系统完全指南:深入理解 v- 指令
前端·javascript·vue.js
前端进阶者30 分钟前
支持TypeScript并打包为ESM/CommonJS/UMD三种格式的脚手架项目
前端
星空下的曙光30 分钟前
pnpm vs npm区别对比
前端·npm·node.js
啃火龙果的兔子31 分钟前
React 图标库发布到 npm 仓库
前端·react.js·npm
江城开朗的豌豆32 分钟前
Vue列表渲染的坑:为什么不能用index当key?血泪教训总结!
前端·javascript·vue.js