# deep-translate **Repository Path**: bitpg/deep-translate ## Basic Information - **Project Name**: deep-translate - **Description**: 这是一个深度翻译的浏览器插件，使用者需要配置deepseek大语言模型的api key即可使用，浏览器自带的翻译很难通过全文的全局视角来翻译，有时候会翻译的非常生涩，这个插件会结合文章内容，通过大语言模型来完成翻译。同时也可以根据上下文的信息对选中的词汇进行解释。这里的解释也会结合上下文的语言来解释哦。 - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 1 - **Created**: 2026-09-01 - **Last Updated**: 2026-09-03 ## Categories & Tags **Categories**: Uncategorized **Tags**: ai翻译, 网页翻译 ## README # 深度翻译 (DeepTrans) — DeepSeek 沉浸式网页翻译扩展 一个 Chrome / Edge（Manifest V3）扩展：点击浏览器工具栏图标，即可**一键用 DeepSeek 上下文感知地沉浸式翻译网页内容**，呈现**逐段双语对照**；选中文字还能查看简短中文解释。适合顺畅地阅读英文网站、论文、文档等。 > **核心思路**：先让模型通读整页生成「全局摘要 + 术语表」建立全局视野，再**逐段**翻译——每段只翻一小段，但会携带全局上下文与前后文，而不是一次性翻译大段内容。这样既省 token、又快，又能保证上下文连贯。 ![Chrome / Edge](https://img.shields.io/badge/Chrome%20%2F%20Edge-MV3-blue) ![License: MIT](https://img.shields.io/badge/License-MIT-orange.svg) ![Model](https://img.shields.io/badge/Model-deepseek--v4--flash--vision--exp-ff7a00) ![No build](https://img.shields.io/badge/Build-none-lightgrey) 📦 **仓库地址**： --- ## 预览 ![弹窗](assets/popup.png) ![逐段双语对照](assets/translate.png) ![划词解释](assets/explain.png) > 截图：弹窗 · 逐段双语对照 · 划词解释。 --- ## 一、功能特性 **翻译** - 点击图标 → 翻译**当前整页**。 - **先理解整页，再逐段翻译**：每次只发送一小段给模型，但带上整页摘要、术语对照和前/后文原文，保证上下文连贯、术语前后一致。 - **逐段双语对照**：每段原文下方就地插入译文（浅色小字、虚线分隔、开头带橙色 `|` 标记），原文保留，阅读流畅。 - **受限并发**（默认 4）翻译提速；结果按 DOM 顺序落位，快慢不影响页面顺序。 - 页面右下角**悬浮控制条**：实时进度；翻译中可**暂停 / 继续**，完成后可**移除译文**；左侧橙色的 `⟩` 可整块**向右收起**，右缘留 `⟪` 手柄点击展开。 **划词解释** - 页面**选中一个单词或一段话**后**松开鼠标左键**，选区右端出现橙色「解释」按钮，点击即在选区附近弹出小卡片： - 是单词/术语 → 给简短定义； - 是短语/论断 → 解释其在上下文里的含义。 - 始终输出**极简短的简体中文**（强制 1-3 句、无废话），并结合文章标题 + 选中文本 + 上下文。 **通用** - **一键总开关**：弹窗右上角开关，可整体开启/停用插件（停用后不翻译、不解释）。 - **可配置**：API Key、Base URL、模型、目标语言、思考模式。 - **首次使用引导**：未配 Key 时点击翻译会提示并跳转设置页。 --- ## 二、安装 ### 方式一：开发者模式加载（本地） 1. 打开扩展管理页： - Chrome：地址栏输入 `chrome://extensions` - Edge：地址栏输入 `edge://extensions` 2. 打开右上角 **“开发者模式”**。 3. 点击 **“加载已解压的扩展程序”**，选择本项目文件夹 `deep-translate`。 4. 在工具栏固定该扩展（点拼图图标 → 固定）。 > 修改源码后，回扩展管理页点击该扩展的 **“重新加载”** 图标即可生效。 ### 方式二：从仓库克隆加载 ```bash git clone https://gitee.com/bitpg/deep-translate.git deep-translate # 然后按“方式一”加载 ``` --- ## 三、快速开始（首次配置 API Key） 1. 前往 [platform.deepseek.com/api_keys](https://platform.deepseek.com/api_keys) 创建 API Key（需充值余额）。 2. 点击工具栏扩展图标 → 点右上角 **“设置”** 按钮。 3. 填入 API Key（可选：调整 Base URL / 模型 / 目标语言 / 思考模式）。 4. 建议先点 **“测试连接”**，显示“连接成功”后点 **“保存”**。 5. 回到任意英文网页，点图标 → **“翻译本页”**。 ![设置页](assets/setting.png) --- ## 四、使用说明 - **翻译当前页**：弹窗点「翻译本页」。可在右下角状态条**暂停/继续**、**收起**（`⟩`，右缘 `⟪` 展开）、**移除译文**。 - **划词解释**：选中文字 → 松开左键 → 点「解释」。 - **停用/启用**：弹窗右上角开关。停用后翻译与解释均不生效（「移除译文」仍可用，用于清理已注入内容）。 - **配置**：弹窗右上角「设置」按钮打开设置页；未配 Key 时会引导。 --- ## 五、权限说明 | 权限 | 用途 | | --- | --- | | `storage` | 保存你的 API Key 与配置（`chrome.storage.local`，仅本扩展可读） | | `activeTab` | 弹窗里对当前标签页按需注入内容脚本 | | `scripting` | 向页面注入内容脚本 / 样式（含安装时向已打开页面注入） | | ``（host + content_scripts） | 在**任意网页**上执行翻译与划词解释 | > ⚠️ `` 会在 Chrome 中提示“读取/更改你在所有网站上的数据”。这是让“解释”在任意网页生效所必需的，本扩展仅用于你主动触发的翻译/解释，不做其他用途。 --- ## 六、数据流与隐私 - **页面文本**：点击「翻译本页」时，读取当前网页正文，连同整页摘要/术语表一起发送到**你在设置页配置的接口**（默认 DeepSeek `https://api.deepseek.com`）。 - **选中的文字与上下文**：点「解释」时，把选中文本、所在句子/段落和网页标题发送到同一接口。 - **API Key**：仅保存在你本机的 `chrome.storage.local`，**只属于你的浏览器**，不上传到任何自有服务器（本扩展无自有服务器）。 - **不收集**：个人身份信息、浏览历史、日志；不使用统计/埋点/追踪脚本。 详见 [PRIVACY.md](PRIVACY.md)（Chrome 商店发布时作为隐私政策提交）。 --- ## 七、配置项与默认值 | 配置 | 默认值 | | --- | --- | | Base URL | `https://api.deepseek.com` | | 模型 | `deepseek-v4-flash-vision-exp` | | 目标语言 | `zh-CN` | | 思考模式 | 关闭（翻译更快更省） | ## 八、计费说明 按 DeepSeek 官方 token 计费（`deepseek-v4-flash-vision-exp` 与 `v4-flash` 同价）。每页翻译 = 整页理解 1 次 + 每个段落 1 次，长文会产生多次调用。→ 想更省可配合「只翻译已读段落」的低耗模式（见下）。 --- ## 九、目录结构 ``` deep-translate/ ├─ manifest.json # MV3 清单：权限、内容脚本、host_permissions、图标 ├─ background.js # 后台 service worker：唯一调用 DeepSeek 的地方（绕过 CORS） │ # SUMMARIZE_PAGE / TRANSLATE_SEGMENT / EXPLAIN_SELECTION / TEST_API ├─ content.js # 内容脚本：抽取段落、理解整页、逐段翻译、插入双语、划词解释、悬浮条 ├─ content.css # 注入的译文/解释卡片/悬浮控制条样式 ├─ options.html/js # 设置页（API Key / Base URL / 模型 / 目标语言 / 思考模式） ├─ popup.html/js # 工具栏弹窗（主开关 / 设置 / 翻译本页 / 移除译文） ├─ icons/ # 16 / 48 / 128 图标 ├─ README.md # 本文件 ├─ PRIVACY.md # 隐私说明 ├─ LICENSE # MIT 许可 ├─ CONTRIBUTING.md # 贡献指南 ├─ .gitignore, .gitattributes ``` --- ## 十、实现原理 / 技术要点 - **CORS**：内容脚本 `fetch` 会被 CORS 拦截，所以所有请求都由 `background.js`（Service Worker）发出，依赖 `host_permissions: [""]` 放行（同时用于向任意网页按需注入内容脚本）。 - **全局可用**：内容脚本匹配 ``，并在扩展安装/更新时向所有已打开页面注入一次；有**单实例守卫**，重复注入不会产生重复状态条。 - **上下文一致性**：先一次 `SUMMARIZE_PAGE`（`response_format: json_object`）得到 `{summary, glossary}`；随后每段 `TRANSLATE_SEGMENT` 都带上该摘要 + 术语表 + 前/后文原文。 - **逐段、并发**：受限并发（默认 4）翻译提速，结果按 DOM 顺序落到对应元素。 - **模型**：`deepseek-v4-flash-vision-exp`（实验性多模态模型，文本能力与 `v4-flash` 持平）。只发送文字，不用视觉输入。 - **节流**：导航/按钮等短文本（<10 字符、无字母或非标题）跳过；代码、脚本、隐藏元素也跳过。 - **划词解释**：左键选中后抓取选区（文本 + 位置 + 上下文），点「解释」调 `EXPLAIN_SELECTION`，用「标题 + SELECTED + CONTEXT + 请用简体中文简短解释」的 prompt 生成一句式解答。 --- ## 十一、从源码打包 / 发布到 Chrome 商店 1. 把 `deep-translate` 文件夹（不含 `node_modules`，本项目没有）打包成 zip。 2. 注册 [Chrome Web Store 开发者账号](https://developer.chrome.com/docs/webstore)（一次性 $5）。 3. 在 Developer Dashboard 上传 zip，填好描述、截图、权限说明；隐私政策处填 [PRIVACY.md](PRIVACY.md) 内容或链接。 4. 审核通过后发布。 --- ## 十二、开源许可与贡献 - 本项目以 [MIT](LICENSE) 许可开源。 - 欢迎通过 [CONTRIBUTING.md](CONTRIBUTING.md) 参与贡献。 - 隐私相关见 [PRIVACY.md](PRIVACY.md)。 --- ## 十三、常见问题（FAQ） - **右键菜单里没有「解释」？** 解释只通过**左键选中 → 松开 → 点「解释」**触发，右键菜单已移除。 - **翻译结果/解释没反应？** 先确认已在设置页配置 Key 并点了「测试连接」+「保存」；确认弹窗总开关为开；刷新目标网页（`F5`）让内容脚本注入。 - **出现两个状态条？** 内容脚本有单实例守卫，通常不会；若发生，刷新页面即可。 - **怎么更省 token？** 可考虑「按阅读进度只翻译可见段落」的低耗模式，或减小前后文窗口。 --- ## 十四、已知限制 - **自定义 Base URL**：`host_permissions` 已是 ``，改任何 OpenAI 兼容地址都不会被 CORS 拦截（含代理）。 - **API Key 安全**：Key 仅在扩展自己的 `chrome.storage.local`（明文）；所有请求在后台通过 `Authorization: Bearer` 以 HTTPS 发送到你配置的地址。**网页/其他扩展读不到 Key。** 风险：① 本机被恶意软件攻击可能被读取；② 若把 Base URL 改成不受信任地址，Key 会发给该地址（务必用官方/可信端点）；③ 用 DevTools 打开扩展控制台可看到 Key，别外传。 - **页面刷新后译文消失**：译文是运行期注入 DOM 的，刷新即移除。 - **SPA 动态加载**：对“点击翻译时”已加载内容生效；切换路由后需重新点击翻译。 - **懒加载/虚拟列表**：未渲染的段落可能漏掉。 --- ## 十五、参考文档 - Base URL / 模型：DeepSeek API — [Your First API Call](https://api-docs.deepseek.com/) · [Models & Pricing](https://api-docs.deepseek.com/quick_start/pricing/) - V4-Flash-Vision-Exp 上线公告： - Chat Completions API： - 思考模式： - 查询余额：