插件
AI智能翻译助手
一个功能强大的 Chrome 浏览器扩展，提供智能网页翻译服务，支持多种翻译源和多语言界面。
AI智能翻译助手
一个功能强大的 Chrome 浏览器扩展，提供智能网页翻译服务，支持多种翻译源和多语言界面。
功能特性
核心翻译功能
- 智能网页翻译：支持整页翻译，保持原有页面布局和样式
- 多翻译源支持：
- Google 翻译（免费，无需 API 密钥）
- OpenAI GPT（高质量 AI 翻译）
- Google Gemini（高质量 AI 翻译）
- 第三方 API（支持 OpenAI 兼容接口）
- 自动回退机制：主翻译源失败时自动切换到备用翻译源
- 多种显示模式：
- 替换原文模式
- 保留原文并添加翻译模式
- 语言自动检测：智能识别网页语言
- 支持 10+ 种语言：中文、英文、日文、韩文、法文、德文、西班牙文、俄文、阿拉伯文、葡萄牙文
多语言界面
- 双语界面支持：完整的中文和英文界面
- 一键切换语言：在弹窗和设置页面快速切换界面语言
- 智能语言检测：首次使用时自动检测浏览器语言
- 动态翻译更新：切换界面语言时，所有文本实时更新
- 右键菜单多语言：右键菜单文本跟随界面语言设置
用户体验优化
- 现代化 UI 设计：
- 渐变色主题
- 玻璃态效果（Glass Morphism）
- 流畅的动画过渡
- 响应式布局
- 多种操作方式：
- 浏览器工具栏图标
- 右键菜单快捷翻译
- 自动翻译模式
- 实时状态反馈：翻译进度和状态实时显示
- 深色模式支持：自动适配系统深色模式
- 无障碍支持：完整的键盘导航和屏幕阅读器支持
高级功能
- 翻译缓存：提高翻译速度，减少 API 调用
- API 密钥管理：安全存储和验证 API 密钥
- 模型自动获取：验证 API 密钥后自动获取可用模型列表
- iframe 支持：支持翻译页面内的所有 iframe 内容
- 调试工具：内置调试面板，方便开发和问题排查
支持的语言
| 语言 | 代码 | 原生名称 |
|---|---|---|
| 中文 | zh | 中文 |
| 英文 | en | English |
| 日文 | ja | 日本語 |
| 韩文 | ko | 한국어 |
| 法文 | fr | Français |
| 德文 | de | Deutsch |
| 西班牙文 | es | Español |
| 俄文 | ru | Русский |
| 阿拉伯文 | ar | العربية |
| 葡萄牙文 | pt | Português |
项目结构
浏览器翻译插件/
├── manifest.json # 扩展配置文件
├── background.js # 后台服务脚本
├── content.js # 内容脚本（页面注入）
├── popup.html # 弹窗页面
├── popup.css # 弹窗样式
├── popup.js # 弹窗逻辑
├── settings.html # 设置页面
├── settings.css # 设置页面样式
├── settings.js # 设置页面逻辑
├── i18n/ # 国际化文件夹
│ ├── zh.js # 中文语言包
│ ├── en.js # 英文语言包
│ └── i18n.js # 国际化管理器
├── translators/ # 翻译器模块
│ ├── google-translator.js # Google 翻译
│ ├── openai-translator.js # OpenAI 翻译
│ ├── gemini-translator.js # Gemini 翻译
│ └── custom-api-translator.js # 第三方 API 翻译
├── utils/ # 工具函数
│ ├── validation.js # 验证工具
│ └── crypto.js # 加密工具
└── README.md # 项目文档
安装步骤
方式一：开发者模式安装
- 下载或克隆本项目代码
- 打开 Chrome 浏览器，访问
chrome://extensions/ - 开启右上角的"开发者模式"
- 点击"加载已解压的扩展程序"
- 选择本项目的文件夹
- 扩展安装完成，可以在工具栏看到图标
方式二：打包安装（未来支持）
- 从 Chrome Web Store 搜索"AI智能翻译助手"
- 点击"添加至 Chrome"
- 确认权限后完成安装
使用指南
快速开始
- 首次使用：点击浏览器工具栏中的扩展图标
- 选择界面语言：点击右上角的 🌐 图标切换中文/英文界面
- 选择翻译源：
- 使用 Google 翻译：无需配置，直接使用
- 使用 OpenAI/Gemini：点击"设置"按钮，配置 API 密钥
- 开始翻译：
- 点击"翻译页面"按钮
- 或右键点击页面，选择"使用AI智能翻译助手翻译此页面"
- 或启用"自动翻译页面"选项
配置 API 密钥
OpenAI API
- 访问 OpenAI Platform
- 创建新的 API 密钥
- 在扩展设置页面粘贴密钥
- 点击"验证密钥"按钮
- 验证成功后选择要使用的模型
Google Gemini API
- 访问 Google AI Studio
- 创建新的 API 密钥
- 在扩展设置页面粘贴密钥
- 点击"验证密钥"按钮
- 验证成功后选择要使用的模型
第三方 API（OpenAI 兼容）
- 在设置页面选择"第三方API（类OpenAI）"
- 输入 API Endpoint（如：
https://api.example.com/v1/chat/completions） - 输入 API 密钥
- 点击"验证接口"按钮
- 验证成功后选择要使用的模型
高级设置
翻译显示模式
- 替换原文：翻译后的文本直接替换原文
- 保留原文并添加翻译：在原文下方显示翻译，方便对照
自动翻译
- 启用后，打开新页面时自动进行翻译
- 可以随时在弹窗中关闭此功能
自动回退
- 启用后，当主翻译源失败时自动切换到 Google 翻译
- 确保翻译服务的可用性
技术架构
核心技术栈
- Chrome Extension Manifest V3：最新的扩展开发标准
- 原生 JavaScript (ES6+)：无外部依赖，轻量高效
- CSS3：现代化样式，支持动画和渐变
- Chrome Extension APIs：
chrome.storage：数据持久化chrome.tabs：标签页管理chrome.scripting：脚本注入chrome.contextMenus：右键菜单chrome.runtime：消息通信
架构设计
- 模块化设计：翻译器、工具函数、国际化独立模块
- 事件驱动：基于消息传递的通信机制
- 安全加密：API 密钥加密存储
- 错误处理：完善的错误捕获和用户提示
- 性能优化：
- 翻译缓存机制
- 批量翻译优化
- 异步处理避免阻塞
国际化系统
- 语言包分离：每种语言独立的 JS 文件
- 动态加载：按需加载语言资源
- 实时切换：无需刷新页面即可切换语言
- 完整覆盖：所有 UI 文本均支持翻译
开发说明
调试工具
在浏览器控制台中使用以下命令：
// 显示调试面板
TranslationDebug.showPanel()
// 查看翻译统计
TranslationDebug.stats()
// 查看翻译缓存
TranslationDebug.cache()
// 查看所有翻译的文本
TranslationDebug.texts()
// 查看帮助信息
TranslationDebug.help()
开发建议
- 代码规范：遵循 ESLint 标准
- 注释完整：关键逻辑添加详细注释
- 错误处理：所有异步操作都应有错误处理
- 性能优化：避免不必要的 DOM 操作和 API 调用
版本信息
- 当前版本：v1.0.0
- 发布日期：2024年
- 兼容性：Chrome 88+
常见问题
Q: 翻译失败怎么办？
A:
- 检查网络连接
- 如果使用 AI 翻译，检查 API 密钥是否正确
- 尝试切换到 Google 翻译
- 启用"自动回退"功能
Q: 如何切换界面语言？
A: 点击弹窗或设置页面右上角的 🌐 图标，选择中文或 English
Q: 支持哪些网站？
A: 支持所有 HTTP/HTTPS 网站，但某些使用 Shadow DOM 或特殊框架的网站可能需要特殊处理
Q: API 密钥安全吗？
A: API 密钥使用加密方式存储在浏览器本地，不会上传到任何服务器
Q: 翻译质量如何？
A:
- Google 翻译：适合日常使用，速度快
- OpenAI GPT：翻译质量高，理解上下文能力强
- Google Gemini：翻译质量高，支持多语言
许可证
本项目采用 MIT 许可证开源。