随笔

零代码实现 Chrome Extension

昨天字节 Singapore 子公司发布了一款类似 Cursor 的 IDE “Trae”,正好有时间,就从零实现一个小插件。

目前 Trae 可以免费使用,算是众测期吧,模型使用的是 Claude-3.5-Sonnet,还支持上传图片分析。

Implement

功能点主要有两部分:第一部分是配置功能,配置 AI Service 的地址,第二部分是选中文本,然后给出总结。

实现效果如下:
截屏20250121 13.18.00.png

截屏20250121 13.29.01.png

中间也有一些会卡住,比如请求,最开始生成在页面直接用的 fetch,那势必会有 CORS 问题,然后就卡在那里了,告诉他是 CORS 问题,还是不行。再反问他这种跨域问题不是应该有专门的解决方案吗?不知咋地又反应过来了,才将请求放在了 service 里。

然后就是图片目前还不能生成,他把 base64 字符串直接写到 png 文件里了,我又另外找的其他在线平台生成的 logo。

使用上感觉还缺少一个类似于项目上下文绑定的功能,现在项目的会话记录不知道是存在哪里的,换个地方就看不到历史上下文了
截屏20250121 14.09.20.png

Explore Backend Project

另外对于已经存在的项目,也进行了一个小小的测试,他也能够参照现有的文件去写新的逻辑,比如在我的记账本小程序后端项目里,我输入的 prompt 是“记账模块增加一个传入开始和结束时间,返回该时间段内每种分类总计支出和收入的接口”。

他会自动在 model 里生成数据查询代码,然后在 controller 里生成参数校验和调用数据查询的代码,最后注册到 router 中。

截屏20250121 13.52.16.png

相比界面 API 生成甚至会简单很多,因为没有太多主观的好看不好看,只要按照风格实现逻辑就完全可以满足基本的使用。

本文链接:https://note.lilonghe.net/post/implement-chrome-extension-with-zero-code.html

-- EOF --