每个程序员估计都有过，把自己常用的软件全部自行实现一遍的想法。
听起来很极客，但实现起来的时间成本太高了。
但现在不一样了——有了 TRAE SOLO，我们只要描述清楚想法，就可以一站式快速搞定。我感觉这个事情，可以再试试。
毕竟，一个个完全符合自己偏好的工具，用起来心情都会好上不少。
今天，我们就从浏览器翻译插件开始~
项目背景
浏览器中翻译应该是非常高频的一个场景，但之前的翻译插件一直都不怎么好用，直到我了解到“沉浸式翻译”插件。
不得不承认，这个插件非常好用，分别在每段原文下方或旁边显示翻译内容，直观，可对照，支持翻译接口和各类AI。
但前阵子的安全事件，让我感觉还是自己鼓捣一个吧。
名词解释
因为我之前从未有过浏览器插件开发的经验，因此需要提前了解下相关概念。
- 浏览器插件：一套基于网页技术（HTML/CSS/JavaScript）+ 浏览器提供的扩展 API 组成的文件集合（最终打包成 .crx/.xpi 等格式），运行在浏览器的 “沙箱环境” 中。
- manifest.json：重点中的重点，插件总配置，包括名称、权限、功能模块等。
- popup.html：点击插件图标后弹出的小窗口，本质是一个迷你网页，支持所有 HTML 语法。
- content script（可选）：注入到目标网页中的 JS/CSS，能直接操作网页 DOM（比如修改网页文字、隐藏广告）；
- background service worker（可选）：插件的 “后台服务”，即使 popup 关闭也能运行，用于监听事件或发起请求。
- Options：插件的 “设置面板”，专门用来让用户自定义插件功能的独立页面，比如开关功能、修改参数、保存偏好设置等。
实操记录
基础概念了解后，我们就可以开始了。
开发软件依然是 TRAE SOLO，本次我们选择了 SOLO Coder 智能体。
前置准备
翻译工作，我们直接采用完全免费的 GLM-4.5-Flash 模型。
只需要注册，并创建 API Key 即可。
之前有分享过，这里就不再赘述。
初版生成
指令
除了说明我要做什么之外，额外明确了技术栈采用智谱API，并给出官方文档中 cURL 的代码示例。
我要实现一个chrome 浏览器插件，主要实现网站页面上选中内容的翻译，翻译结果通过浮动弹窗显示在选中内容上方。
翻译接口采用智谱大模型api，glm-4.5-flash。
curl示例如下：
curl -X POST " https://open.bigmodel.cn/api/paas/v4/chat/completions " \
-H "Content-Type: application/json" \
-H "Authorization: Bearer <你的 API Key> " \
-d '{
"model": "glm-4.5",
"messages": [
{
"role": "user",
"content": "作为一名营销专家，请为我的产品创作一个吸引人的口号"
},
{
"role": "assistant",
"content": "当然，要创作一个吸引人的口号，请告诉我一些关于您产品的信息"
},
{
"role": "user",
"content": "智谱AI 开放平台"
}
],
"thinking": {
"type": "enabled"
},
"max_tokens": 4096,
"temperature": 0.6
}'
过程
先是照常生成文档。
不得不再次感叹，这个文档内容是真的详细。
并且，还非常靠谱的帮我设计了 API Key 的安全存储方案。
毕竟，我一个浏览器插件小白，它要不告诉我，我还真不知道有个 Options 可以快速设置。
再然后，给出了相关的参考链接，方便我们了解核对。
确认文档后，SOLO 就直接按计划生成了。
结果
之前使用自己熟悉的技术栈的时候，执行总结一般都是很快扫完的。
今天，上手一个新的领域才发现，SOLO 给出的总结也非常详细。
最主要的是接下来我需要如何调试，也帮我指明了。
此时生成代码结构如下：
本地调试
代码已经生成完了，下面我们按照前面 SOLO 给出的步骤，一步步操作即可。
第一步，打开 Chrome，地址栏输入：chrome://extensions/，你可以通过插件管理菜单进入。
然后按照下图的箭头指示操作。
- 右上角“Developer mode”，打开开发者模式；
- 左侧“Load unpacked”，选择项目跟路径，如果没有错误，插件会显示在图中位置。
第二步，打开Options界面。
设置 API Key，请忽略设置页面的简陋。
第三步，在英文网站中选择内容。
点击“翻译”，查看效果。
哦耶，直接成功！
如果有跟练的，测试链接：docs.trae.ai/ide/what-is…
界面优化
上面已经实现了翻译效果，但是界面有点难受。
没有有效利用屏幕宽度，并且还遮挡了选中的内容。
不用急，我们再追加一次对话，依然是 SOLO Coder 智能体。
指令
浮窗宽度和选中文字同宽；
浮窗定位应该在选中文字整体的下方，不要遮挡选中文字；
点击关闭后，应该清空翻译结果，并可再次进行下次翻译。
过程
效果
再次打开插件管理页面，删除“Remove”原有版本的插件，重新“Load unpacked”，再次测试。
理解非常到位，效果也很完美，收工。
实践体会
今天实现这个插件，一共花费了 1 小时 40 分钟左右，这还包含了采用 SOLO Builder 智能体未成功的时间。
Builder 和 Coder 的挑选
SOLO Builder 适合前端应用，所以，我首选的就是它，但效果不佳。
我修复了3次之后，才能运行，并且效果还不是很好。
于是，我果断清空代码，重新开始，并更换了 SOLO Coder。
如上所示，一次过，这才像 SOLO 嘛。
小体会：一定要根据任务选择合适的模型或者智能体，也许可以事半功倍哦。
使用AI返回的名词
“界面优化”的对话中，我没有使用“初版生成”提示词中的“浮动弹窗”，而是使用了 AI 生成的文档中的“浮窗”。
这是一个实践的小技巧，尽量使用 AI 返回的名词，这样，它对你的指令理解会更加到位。
外部API调用使用示例代码
我们在开发应用的过程中，会碰到很多需要调用外部 API 的情况。
我们可以把 API 文档给到 AI，但我更喜欢直接把官网的样例代码给到 AI。
毕竟，自然语言容易存在歧义，代码很少有歧义的。
结语
今天，我们从0开始，实现了一个浏览器插件的开发，大家可以根据需要自行尝试。
有了 SOLO，实现这些小工具，真的又快又省心。
不过，这个插件目前还仅仅是初版，接下来，我会把更多好用的特性加进去，希望可以真正用起来。
也欢迎大家关注后续分享。
