AI智能翻译助手

自动检测页面语言并翻译为中文

# 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 # 项目文档 ``` ## 安装步骤 ### 方式一：开发者模式安装 1. 下载或克隆本项目代码 2. 打开 Chrome 浏览器，访问 `chrome://extensions/` 3. 开启右上角的"开发者模式" 4. 点击"加载已解压的扩展程序" 5. 选择本项目的文件夹 6. 扩展安装完成，可以在工具栏看到图标 ### 方式二：打包安装（未来支持） 1. 从 Chrome Web Store 搜索"AI智能翻译助手" 2. 点击"添加至 Chrome" 3. 确认权限后完成安装 ## 使用指南 ### 快速开始 1. **首次使用**：点击浏览器工具栏中的扩展图标 2. **选择界面语言**：点击右上角的 🌐 图标切换中文/英文界面 3. **选择翻译源**： - 使用 Google 翻译：无需配置，直接使用 - 使用 OpenAI/Gemini：点击"设置"按钮，配置 API 密钥 4. **开始翻译**： - 点击"翻译页面"按钮 - 或右键点击页面，选择"使用AI智能翻译助手翻译此页面" - 或启用"自动翻译页面"选项 ### 配置 API 密钥 #### OpenAI API 1. 访问 [OpenAI Platform](https://platform.openai.com/api-keys) 2. 创建新的 API 密钥 3. 在扩展设置页面粘贴密钥 4. 点击"验证密钥"按钮 5. 验证成功后选择要使用的模型 #### Google Gemini API 1. 访问 [Google AI Studio](https://makersuite.google.com/app/apikey) 2. 创建新的 API 密钥 3. 在扩展设置页面粘贴密钥 4. 点击"验证密钥"按钮 5. 验证成功后选择要使用的模型 #### 第三方 API（OpenAI 兼容） 1. 在设置页面选择"第三方API（类OpenAI）" 2. 输入 API Endpoint（如：`https://api.example.com/v1/chat/completions`） 3. 输入 API 密钥 4. 点击"验证接口"按钮 5. 验证成功后选择要使用的模型 ### 高级设置 #### 翻译显示模式 - **替换原文**：翻译后的文本直接替换原文 - **保留原文并添加翻译**：在原文下方显示翻译，方便对照 #### 自动翻译 - 启用后，打开新页面时自动进行翻译 - 可以随时在弹窗中关闭此功能 #### 自动回退 - 启用后，当主翻译源失败时自动切换到 Google 翻译 - 确保翻译服务的可用性 ## 技术架构 ### 核心技术栈 - **Chrome Extension Manifest V3**：最新的扩展开发标准 - **原生 JavaScript (ES6+)**：无外部依赖，轻量高效 - **CSS3**：现代化样式，支持动画和渐变 - **Chrome Extension APIs**： - `chrome.storage`：数据持久化 - `chrome.tabs`：标签页管理 - `chrome.scripting`：脚本注入 - `chrome.contextMenus`：右键菜单 - `chrome.runtime`：消息通信 ### 架构设计 - **模块化设计**：翻译器、工具函数、国际化独立模块 - **事件驱动**：基于消息传递的通信机制 - **安全加密**：API 密钥加密存储 - **错误处理**：完善的错误捕获和用户提示 - **性能优化**： - 翻译缓存机制 - 批量翻译优化 - 异步处理避免阻塞 ### 国际化系统 - **语言包分离**：每种语言独立的 JS 文件 - **动态加载**：按需加载语言资源 - **实时切换**：无需刷新页面即可切换语言 - **完整覆盖**：所有 UI 文本均支持翻译 ## 开发说明 ### 调试工具 在浏览器控制台中使用以下命令： ```javascript // 显示调试面板 TranslationDebug.showPanel() // 查看翻译统计 TranslationDebug.stats() // 查看翻译缓存 TranslationDebug.cache() // 查看所有翻译的文本 TranslationDebug.texts() // 查看帮助信息 TranslationDebug.help() ``` ### 开发建议 - **代码规范**：遵循 ESLint 标准 - **注释完整**：关键逻辑添加详细注释 - **错误处理**：所有异步操作都应有错误处理 - **性能优化**：避免不必要的 DOM 操作和 API 调用 ## 版本信息 - **当前版本**：v1.0.0 - **发布日期**：2024年 - **兼容性**：Chrome 88+ ## 常见问题 ### Q: 翻译失败怎么办？ A: 1. 检查网络连接 2. 如果使用 AI 翻译，检查 API 密钥是否正确 3. 尝试切换到 Google 翻译 4. 启用"自动回退"功能 ### Q: 如何切换界面语言？ A: 点击弹窗或设置页面右上角的 🌐 图标，选择中文或 English ### Q: 支持哪些网站？ A: 支持所有 HTTP/HTTPS 网站，但某些使用 Shadow DOM 或特殊框架的网站可能需要特殊处理 ### Q: API 密钥安全吗？ A: API 密钥使用加密方式存储在浏览器本地，不会上传到任何服务器 ### Q: 翻译质量如何？ A: - Google 翻译：适合日常使用，速度快 - OpenAI GPT：翻译质量高，理解上下文能力强 - Google Gemini：翻译质量高，支持多语言 ## 许可证 本项目采用 MIT 许可证开源。 ## 贡献 欢迎通过 Issue 和 Pull Request 来改进本项目！ ### 贡献指南 1. Fork 本项目 2. 创建特性分支 (`git checkout -b feature/AmazingFeature`) 3. 提交更改 (`git commit -m 'Add some AmazingFeature'`) 4. 推送到分支 (`git push origin feature/AmazingFeature`) 5. 开启 Pull Request ## 联系方式 如有问题或建议，请通过以下方式联系： - 提交 Issue - 发送邮件 --- **注意**：本扩展仅供学习和个人使用，请遵守相关 API 服务的使用条款。