一个开源的 Chrome 扩展，在 YouTube 上显示 AI 双语字幕，支持生词高亮、点词查义、词汇追踪，可接入云端 API 或本地大模型。
An open-source Chrome extension that shows AI-powered bilingual subtitles on YouTube, with word highlighting, click-to-define, vocabulary tracking, and support for both cloud APIs and local LLMs.
| 功能 | 描述 |
|---|---|
| 🌍 双语字幕 | 同时显示视频原文字幕 + AI 翻译字幕 |
| 🎨 生词高亮 | 已掌握（绿色）、生词（橙色）、学习中（蓝色虚线） |
| ⏸️ 点击暂停 | 点击字幕区域暂停/恢复视频 |
| 📖 单词弹窗 | 点击任意单词，显示发音 / 词性 / 释义 / 例句解释 |
| ✅ 词汇追踪 | 标记单词为"已掌握"或"学习中"，持久保存 |
| 📝 字幕面板 | 右侧可滑动字幕列表，点击跳转到对应时间 |
| 🤖 AI 翻译 | 支持 OpenAI / 任意兼容 API / 本地 Ollama 大模型 |
| 📚 词汇管理 | 统计、导出、导入词汇表（JSON 格式） |
| 🚫 零成本可选 | 配置本地大模型后完全免费使用 |
git clone https://github.com/YOUR_USERNAME/YouTubeTranslator.git
# 或直接下载 ZIP 解压- 打开 Chrome，地址栏输入：
chrome://extensions/ - 右上角开启 「开发者模式」（Developer mode）
- 点击 「加载已解压的扩展程序」（Load unpacked）
- 选择项目文件夹
YouTubeTranslator - 扩展加载成功，首次安装会自动打开设置页面
点击浏览器右上角的扩展图标 → 「Full Settings」 进入完整设置页面，选择以下任一翻译方式：
在设置页选择 「Cloud API」，填入以下信息：
| 服务商 | API Endpoint | Model | 费用参考 |
|---|---|---|---|
| OpenAI | https://api.openai.com/v1/chat/completions |
gpt-4o-mini |
~$0.15/百万 token |
| DeepSeek ⭐ | https://api.deepseek.com/v1/chat/completions |
deepseek-chat |
~¥1/百万 token（极低） |
| 通义千问 | https://dashscope.aliyuncs.com/compatible-mode/v1/chat/completions |
qwen-plus |
~¥0.8/百万 token |
| Gemini | https://generativelanguage.googleapis.com/v1beta/openai/chat/completions |
gemini-2.0-flash |
免费额度充足 |
💡 推荐 DeepSeek：翻译质量接近 GPT-4o，价格约为其 1/10，1 元人民币可翻译数千条字幕。
本地部署无需任何 API Key，完全免费且数据不离开你的电脑。
Ollama 是目前最简单的本地大模型运行工具，一条命令即可下载并运行模型。
Windows：
# 方法一：通过 winget 安装（推荐）
winget install Ollama.Ollama
# 方法二：直接下载安装包
# 访问 https://ollama.com/download 下载 OllamaSetup.exemacOS：
# 方法一：官网下载（推荐）
# 访问 https://ollama.com/download 下载 .dmg 安装包
# 方法二：Homebrew
brew install ollamaLinux：
curl -fsSL https://ollama.com/install.sh | sh下载模型后，每次使用前需要确保 Ollama 服务在运行：
Windows：
- 安装后 Ollama 会自动在系统托盘运行（右下角查看）
- 或手动在 PowerShell 运行：
ollama serve
macOS：
- 安装后自动后台运行
- 或终端运行：
ollama serve
验证服务是否正常：
# 在浏览器访问或命令行测试
curl http://localhost:11434/api/tags
# 应返回已安装的模型列表- 打开 YouTube 视频页面
- 点击浏览器右上角扩展图标
- 点击 「Full Settings」
- 在 「AI Translation Settings」 中：
- Translation Provider 选择 「Local LLM」
- Local Endpoint 填写：
http://localhost:11434/api/generate - Model Name 填写你下载的模型名（如
qwen2.5:14b）
- 点击 「Test Connection」 验证连接
- 点击 「Save Settings」 保存
- 刷新 YouTube 页面，开启视频字幕（CC），即可看到双语字幕！
YouTubeTranslator/
├── manifest.json # Chrome Extension Manifest V3
├── background/
│ └── background.js # Service Worker，处理安装和消息路由
├── content/
│ ├── content.js # 内容脚本主入口，处理 YouTube SPA 导航
│ ├── content.css # 字幕、弹窗、面板样式（暗色主题）
│ ├── subtitle.js # 字幕拦截、双语渲染、词汇高亮
│ ├── panel.js # 右侧字幕面板 + 词汇本标签页
│ └── wordPopup.js # 单词释义弹窗组件
├── lib/
│ ├── languages.js # 语言定义、文本分词（支持中日韩）
│ ├── storage.js # Chrome storage 封装（设置、词汇、翻译缓存）
│ └── translator.js # AI 翻译服务（云端 API + 本地 LLM）
├── popup/
│ ├── popup.html # 工具栏弹出窗口
│ ├── popup.css # 弹窗样式
│ └── popup.js # 弹窗逻辑（快速设置、状态显示）
├── options/
│ ├── options.html # 完整设置页面
│ ├── options.css # 设置页样式
│ └── options.js # 设置页逻辑（API 测试、词汇管理）
├── icons/ # 扩展图标（16/48/128px）
└── _locales/
├── en/messages.json # 英文本地化
└── zh_CN/messages.json # 中文本地化
- 打开 YouTube 视频，确保视频有英文字幕（点击 CC 按钮开启）
- 字幕自动替换：插件会拦截原始字幕并显示双语版本
- 点击字幕区域 → 视频暂停/播放
- 点击单词 → 视频暂停 + 弹出释义窗口
- 查看发音、词性、翻译、解释
- 点击 ✓ Mastered 标记为已掌握（绿色）
- 点击 📖 Learning 标记为学习中（蓝色）
- 右侧面板：点击播放器中的列表按钮切换显示
- Subtitles 标签：完整字幕列表，点击跳转
- Vocabulary 标签：查看所有标记的单词
| 颜色 | 含义 |
|---|---|
| 🟢 绿色 | 已标记为「已掌握」的单词 |
| 🟠 橙色下划线 | 未标记的单词（可能是生词） |
| 🔵 蓝色虚线 | 已标记为「学习中」的单词 |
| 设置项 | 说明 |
|---|---|
| Target Language | 视频的语言（你在学习的语言） |
| Native Language | 你的母语（翻译目标语言） |
| Proficiency Level | 语言水平（影响词汇高亮策略） |
| AI Provider | 翻译服务：Cloud API / Custom API / Local LLM |
| API Key | 云端 API 密钥 |
| API Endpoint | API 地址（支持任何 OpenAI 兼容接口） |
| Model | 模型名称 |
| Font Size | 字幕字体大小（12-28px） |
| Auto Translate | 是否自动翻译每条字幕 |
| Show Panel | 启动时是否自动显示字幕面板 |
Q：字幕没有出现？
A：请确保：（1）在 YouTube 视频页面（URL 含 /watch）；（2）视频本身有字幕且已开启（CC 按钮）；（3）扩展已启用（工具栏弹窗中开关为开）
Q：翻译不出来 / 显示 Translation Error？
A：检查设置页的 API 配置，点击 「Test Connection」查看具体错误。本地 LLM 请确认 Ollama 服务已运行（ollama serve）
Q：Ollama 没有使用 GPU？
A：运行 ollama run qwen2.5:14b 时查看任务管理器 GPU 占用。AMD 用户 Windows 下可能需要更新驱动或改用 Linux
Q：MacBook 发热明显？ A：32b 模型计算量大属正常，可切换到 14b 降低负载
Q：能换其他翻译模型吗？
A：可以！任何 Ollama 支持的模型都能用，在设置中修改 Model Name 即可。推荐翻译模型：qwen2.5:14b、qwen2.5:32b、gemma2:9b
欢迎提交 Issue 和 Pull Request！
MIT License © 2026