摘要
用 TRAE SOLO 开发了一个 Edge 浏览器插件，解决了 AI 绘图提示词反推太麻烦的问题。现在直接在浏览器里悬停图片就能看到 AI 图标，点击就能分析，还支持上传本地图片，中英文提示词一键切换，用起来很方便。
背景
前几天在网上刷到一张很好看的 AI 生成的图片，突然就想反推一下它的提示词，结果折腾了半天，保存图片、开网站、上传、等待，太麻烦了。就突然有了个想法，要是有个浏览器插件，直接在网页里悬停图片就能反推提示词该有多好，就想试试看能不能快速做出来。
实践过程
一开始我先在 SOLO 里打开一个新的工作区，然后告诉它我要写一个 Edge 浏览器插件，功能是图片反推提示词，用朋友的Ai中转站。它很快就理解了我的需求，直接帮我生成了插件的四个核心文件：manifest.json、popup.html、background.js、content.js，还有基本的目录结构。
我先看了一下 manifest.json，配置了权限和脚本，看起来没问题。然后看 content.js，它已经写了基本的图片识别逻辑，鼠标悬停图片时右下角会显示一个 AI 图标，点击图标会发送消息给 background.js。
接着开始对接 API，在 popup.html 里加了 API Key 输入框和模型选择下拉框。一开始模型是硬编码在里面的，后来我觉得应该动态获取，就让它改成调用 API 拉取模型列表。在 background.js 里，它实现了和 API密钥 的对接，包括图片处理、提示词生成、翻译等功能。这里踩了一个坑，API Key 里如果有非 ASCII 字符会导致请求失败，后来加了一个清理函数，只保留标准 ASCII 字符就好了。
然后开始做上传图片功能，在 popup.html 里加了上传区域，支持点击和拖放两种方式。
这里又踩了一个坑，fileInput 元素一开始是在点击事件里创建的，而且没有 append 到 DOM，导致点击没反应，后来改了顺序，先创建元素再绑定事件，还加上了 appendChild，就正常了。
接下来加上了中英文切换功能，在 popup.html 里加了两个按钮，点击时可以切换提示词的语言，翻译时用了缓存机制，避免重复调用 API 浪费钱。切换语言时还加了加载动画，让用户知道正在处理。
然后优化了悬浮图标的功能，这个功能一开始有点问题，图标一会儿显示一会儿消失，后来改了事件监听逻辑，用了延迟隐藏，鼠标移到图标上时不会触发隐藏，还加了一个开关，让用户可以自己决定要不要显示悬浮图标。
最后优化了一下 UI，把插件窗口改大了一点，改成简约的线条风格，去掉了渐变色，看起来清爽了很多。
最终功能
这个插件最终实现了这些功能：网页图片悬停显示 AI 图标，点击一键分析；支持上传本地图片分析，可拖放可点击；中英文提示词自由切换，翻译时有加载动画；一键复制提示词，也可下载为 txt 文件；设置页面可配置 API Key、拉取模型列表、选择模型；可开启或关闭悬浮图标功能。
成果展示
这个插件现在功能挺完整的，支持网页图片悬停显示 AI 图标，点击就能分析，一键复制提示词，也能下载成 txt 文件。 支持中英文互相切换，翻译时有加载动画，用户体验还可以。 支持直接上传本地图片，支持拖放和点击上传两种方式，上传后有预览，不满意可以删除。 设置页面可以配置 API Key、拉取模型列表、选择模型，还能开关悬浮图标，所有设置都会保存。
效果与总结
SOLO开发真的很不错，而且现在上线了移动端也非常方便，SOLO 在流程里主要做了几件事，一是快速搭建项目架构，不用我自己查文档写基础配置；二是实现具体功能逻辑，比如文件上传、API 对接、事件处理这些；三是快速定位和修复 bug，很多问题我自己可能要找半天，它看一眼代码就能指出来；四是优化 UI 和样式，让界面看起来更舒服。 总结了一点经验，用 AI 开发小工具可以用一个流程，先让它搭个架子，然后逐个加功能，每加一个就测试一下，遇到 bug 就让它帮忙修，最后再整体优化一下 UI。这个流程可复用性还挺高的，以后做类似的浏览器插件或者小工具，都可以这么干。
