# hs-i18n

**Repository Path**: hs-xhl/hs-i18n

## Basic Information

- **Project Name**: hs-i18n
- **Description**: 网页自动翻译插件
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-04
- **Last Updated**: 2025-12-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# HS I18n Chrome 扩展

一个功能完整的 Chrome 浏览器扩展，提供网页自动翻译和国际化功能。

## ✨ 功能特性

- 🌐 **自动翻译** - 集成 translate.js，支持多语言自动翻译
- 🎨 **美观界面** - 现代化的 Popup、SidePanel 和 Options 页面
- 🖱️ **可拖拽控件** - 语言选择下拉框支持拖拽移动，位置自动保存
- ⚙️ **配置管理** - 智能配置系统，自动初始化和同步
- 📱 **多端同步** - 使用 chrome.storage.sync 同步到所有设备
- 🔧 **完整文档** - 详细的开发文档和 API 参考

## 🚀 快速开始

### 安装扩展

1. 打开 Chrome 浏览器
2. 访问 `chrome://extensions/`
3. 开启右上角的"开发者模式"
4. 点击"加载已解压的扩展程序"
5. 选择 `hs-i18n` 文件夹

### 使用扩展

1. **打开 Popup**：点击浏览器工具栏中的扩展图标
2. **打开侧边栏**：在 Popup 中点击"侧边栏"按钮
3. **配置设置**：在侧边栏或选项页面中配置翻译选项
4. **选择语言**：使用页面上的语言选择下拉框切换翻译语言
5. **拖拽移动**：拖动语言选择框到合适的位置

## 📁 项目结构

```
hs-i18n/
├── manifest.json              # 扩展清单文件
├── background.js              # 后台服务脚本
├── content.js                 # 内容脚本
├── popup.html/js/css          # 弹出窗口
├── sidepanel.html/js/css      # 侧边栏设置
├── options.html/js/css        # 选项页面
├── styles.css                 # 页面样式
├── utils/                     # 工具脚本
│   ├── translate.js           # 翻译引擎
│   ├── translate-init.js     # 翻译初始化
│   └── translate-drag.js      # 拖拽功能
└── icons/                     # 扩展图标
```

## 📚 文档导航

### 核心文档
- **[PROJECT_SUMMARY.md](PROJECT_SUMMARY.md)** - 完整项目总结
- **[SUMMARY.md](SUMMARY.md)** - 快速总结
- **[ARCHITECTURE.md](ARCHITECTURE.md)** - 架构原理详解
- **[API_REFERENCE.md](API_REFERENCE.md)** - 完整 API 参考

### 开发文档
- **[DEBUG_GUIDE.md](DEBUG_GUIDE.md)** - 调试指南
- **[API_QUICK_REF.md](API_QUICK_REF.md)** - API 快速参考
- **[CONFIG_GUIDE.md](CONFIG_GUIDE.md)** - 配置管理指南
- **[FLOWCHART.md](FLOWCHART.md)** - 流程图和时序图

### 使用文档
- **[SIDEPANEL_GUIDE.md](SIDEPANEL_GUIDE.md)** - 侧边栏使用指南
- **[TROUBLESHOOTING.md](TROUBLESHOOTING.md)** - 问题排查指南
- **[BUILD_GUIDE.md](BUILD_GUIDE.md)** - 打包发布指南

## 🔧 技术栈

- **Manifest Version**: 3
- **JavaScript**: ES6+
- **Chrome APIs**: storage, runtime, tabs, scripting, sidePanel

## 📦 打包扩展

### 方法 1: 使用 Chrome 浏览器

1. 打开 `chrome://extensions/`
2. 开启"开发者模式"
3. 点击"打包扩展程序"
4. 选择 `hs-i18n` 文件夹
5. 点击"打包扩展程序"

### 方法 2: 使用脚本

**Windows:**
```bash
# 双击运行
build-crx.bat
```

**PowerShell:**
```powershell
.\build-crx.ps1
```

详细说明请查看 [BUILD_GUIDE.md](BUILD_GUIDE.md)

## ⚙️ 配置说明

### 默认配置

```javascript
{
  enabled: true,              // 插件启用
  autoTranslate: true,         // 自动翻译
  defaultLang: 'zh-CN',        // 默认语言
  targetLang: 'en',            // 目标语言
  apiKey: '',                  // API 密钥
  showNotifications: false,     // 显示通知
  autoDetectLang: true         // 自动检测语言
}
```

### 配置管理

- 自动初始化默认配置
- 智能合并用户配置
- 配置持久化存储
- 多设备自动同步

## 🎯 主要功能

### 1. 翻译功能
- 自动检测页面语言
- 支持多种语言互译
- 实时翻译页面内容
- 可自定义翻译服务

### 2. 用户界面
- **Popup**: 快速操作和状态显示
- **SidePanel**: 丰富的配置选项
- **Options**: 完整的设置管理
- **语言选择框**: 可拖拽的浮动控件

### 3. 交互特性
- 可拖拽移动的语言选择框
- 位置自动保存和恢复
- 最高层级显示
- 流畅的动画效果

## 🔍 调试

### 打开调试工具

| 组件 | 方法 |
|------|------|
| Background | `chrome://extensions/` → 点击 "service worker" |
| Content Script | 网页按 F12 → Sources → Content scripts |
| Popup | 右键点击 Popup → "检查" |
| SidePanel | SidePanel 页面按 F12 |

详细说明请查看 [DEBUG_GUIDE.md](DEBUG_GUIDE.md)

## 🚫 忽略网站

以下网站已配置为忽略（不注入脚本）：
- `https://www.baidu.com/*`

可在 `manifest.json` 的 `exclude_matches` 中添加更多忽略网站。

## 📋 开发检查清单

- [x] Manifest V3 标准
- [x] 完整的配置管理
- [x] 多环境组件通信
- [x] 可拖拽界面
- [x] 侧边栏支持
- [x] 完善的文档
- [x] 调试支持
- [x] 打包工具

## 🔗 相关资源

- [Chrome Extensions 官方文档](https://developer.chrome.com/docs/extensions/)
- [Manifest V3 迁移指南](https://developer.chrome.com/docs/extensions/mv3/intro/)
- [Chrome Extension API 参考](https://developer.chrome.com/docs/extensions/reference/)

## 📄 许可证

本项目为示例项目，可根据需要添加许可证信息。

## 🎉 项目状态

- **版本**: 1.0.0
- **状态**: 开发完成，可打包发布
- **最后更新**: 2024年

---

**快速链接**: [项目总结](PROJECT_SUMMARY.md) | [架构文档](ARCHITECTURE.md) | [API 参考](API_REFERENCE.md) | [调试指南](DEBUG_GUIDE.md)