AI Translator - 浏览器翻译插件
项目背景
作为产品经理，我经常需要研究海外的 AI 产品和技术文档。市面上的翻译插件要么难以准确传达专业内容， 要么订阅费用偏高，性价比不够理想。
同时，我也希望通过实践来深入了解 AI 大模型的应用边界。因此决定自己开发一个浏览器翻译插件—— 既能打造符合专业需求的工具，又能以较低成本探索 AI 技术的产品化路径。
开发方式
采用现代化的前端技术栈构建 Chrome 扩展，使用 Vite + TypeScript 确保开发效率和代码质量， 使用轻量级的 Preact 框架构建用户界面，通过 Shadow DOM 技术确保翻译结果与原网页样式完美融合。
技术栈
Vite 5.4+TypeScriptPreactChrome Extension APIOpenRouter API阿里百炼API
核心功能展示
✨ 主要特性
- 🔄一键整页翻译 - 保持原网页样式和布局
- 📝智能选区翻译 - 选中文本即时翻译
- 🤖多AI模型支持 - OpenRouter多模型聚合、阿里百炼（通义千问）
- 💰费用透明可见 - 实时显示Token消耗和成本
- ⚡高性能缓存 - 避免重复翻译，节省费用
- 🔒隐私安全 - 所有数据本地存储，API密钥加密保护
🎯 使用场景
- • 浏览外语技术文档和资料
- • 阅读国外新闻和社交媒体
- • 学习外语内容理解
- • 跨语言商务沟通
⌨️ 快捷键支持
Alt+T (Cmd+Shift+T)- 翻译整页Alt+R (Cmd+Shift+R)- 还原原文Alt+S (Cmd+Shift+S)- 翻译选中文本
功能演示
🔧 技术特点
- •Shadow DOM 渲染，完美保持页面样式，沉浸式翻译体验
- •智能批处理，每批最多1000 tokens，优化API调用效率
- •会话级缓存，SHA1缓存键，避免重复翻译节省费用
- •动态注入模式，符合Chrome Web Store最新安全政策
- •本地统计面板，实时掌握Token消耗和费用明细
🚀 立即体验
AI Translator
插件已上架 Chrome Web Store
点击下方按钮即可安装使用，开启智能翻译新体验
🚀安装 AI Translator 插件支持浏览器：
ChromeEdge
其他 Chromium 浏览器
支持浏览器：
ChromeEdge其他 Chromium 浏览器
💡 安装步骤
1点击安装按钮
2确认安装权限
3开始翻译体验