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 服务的使用条款。