我用Claude Code 开发了一个浏览器插件
背景
经常会看一些英文网站,基本的英文网站自己是能看懂的,但是经常因为几个单词,影响了对整个语义的理解,感觉特别难受,每次都单独查单词,又特别不方便。
于是,突发奇想,如果能把自己不熟悉的单词根据上下文自动给出正确的翻译,既可以锻炼英文阅读,也不会影响自己阅读的体验。
当然,浏览器一般有一键翻译功能,但是有时候翻译得并不好,而且翻译的时候看不了原文,也失去了英文本身的韵味,因此,还是倾向于辅助翻译
项目地址:https://github.com/wenxueliu/auto-translator
开发过程
1、本人之前完全没有 chrome插件开发经验,但能看懂 js,网上大概搜了 chrome 插件的开发流程
2、代码99%由Claud Code + Kimi K2生成,手动修改主要是加了qwen模型的支持
3、使用过程记录详细参考 chat-history
4、主要时间花费,调试验证,调试很关键,目前 AI 还做不到自动调试,自动验证,这是需要人工参与的。实际使用过程中,前期花了不少调试时间,后期基本没有怎么花时间调试
5、累积花费 20+小时,20 元
核心功能
- 右键菜单翻译: 右键点击页面选择"翻译当前网页"
- 词库管理: 右键选中单词添加到个人词库
- 上下文感知翻译: 结合上下文进行智能翻译
- 翻译专属模型低成本集成: 支持DeepSeek V3和 qwen-mt-turbo、qwen-mt-plus 对翻译进行专门优化
- 词库导入导出: 支持词库的备份和恢复
安装方法
插件市场安装
访问https://chromewebstore.google.com/detail/%E6%99%BA%E8%83%BD%E7%BF%BB%E8%AF%91%E6%8F%92%E4%BB%B6/ghgomfkoldmfgpblimgepgddbmlofoan?pli=1
注:需要梯子
手动安装
- 下载项目文件并解压 https://github.com/wenxueliu/auto-translator/archive/refs/heads/main.zip
- Chrome浏览器输入
chrome://extensions/
- 开启右上角的"开发者模式",变成如下状态
- 点击左边的"加载已解压的扩展程序",加载解压的文件
- 安装完成
使用指导
配置API
- 点击浏览器工具栏的插件图标
- 在设置页面输入OpenAI API Key
- 选择适合的模型(Qwen MT Turbo、Qwen MT Plus)
- 保存配置
推荐使用 qwen-mt-turbo,秒翻,key申请参考 https://bailian.console.aliyun.com/?tab=api#/api/?type=model&url=2712195,如果你已经有Qwen的key,直接填即可
添加单词(或词组)到词库
选中页面上的单词,右键选择"添加到词库"
添加单词之后,自动翻译
翻译网页
在网页任意空白处右键点击,选择"翻译当前网页"
翻译之后
词库管理
- 查看词库: 在设置页面查看当前词库
- 删除单词: 点击单词右侧的"删除"按钮
- 导出词库: 点击"导出词库"按钮下载JSON文件
- 导入词库: 点击"导入词库"选择JSON文件
注:API Key安全: 插件是开源的,因此,不会保持你的API Key,请妥善保管API Key,不要分享给他人