企业官网建设流程全解析

DeepL Chrome 翻译插件实战指南：从 API Token 配置到 OCR 图文识别的浏览器翻译全流程

【免费下载链接】deepl-chrome-extensionA DeepL Translator Chrome extension项目地址: https://gitcode.com/gh_mirrors/de/deepl-chrome-extension

如果你经常需要在英文文献、西班牙语新闻或日语技术博客之间来回切换，大概率经历过这样的场景：复制一段文字，切到翻译网页，粘贴，等结果，再切回来。来来回回几次，思路早就断了。DeepL Chrome 翻译插件正是冲着这个痛点来的——它把 DeepL 的专业翻译引擎直接塞进了浏览器，选中即译，不打断阅读节奏。这篇文章会以一位"老用户"的口吻，带你从零走完安装、配置、日常使用，再到自己动手改代码的完整旅程。

为什么值得在浏览器里装一个 DeepL 翻译扩展

先聊聊背景。DeepL 之所以被很多人称为"翻译质量天花板"，在于它对长句的语序重组和术语把握远超普通机翻。但再好用的在线翻译，只要还停留在"复制—粘贴"的流程里，体验就打折扣。浏览器扩展的价值恰恰是把翻译能力变成网页的一个原生能力：你不需要离开当前页面，翻译结果就在你眼皮底下出现。

这个开源项目（A DeepL Translator Chrome extension）的技术选型也相当主流：React 负责界面，TypeScript 保证类型安全，Webpack 负责打包，搭配 Emotion 与 Tailwind 完成样式。正因为结构清晰、模块化程度高，它既是日常工具，也是学习 Chrome 扩展开发的现成范本。后面我们会分别验证这两点。

3 分钟快速安装：商店安装与离线部署两条路径

有网络条件时，Chrome 网上应用店一键搞定

打开 Chrome 网上应用店，搜索"A Translator"或"DeepL Translate"，找到对应条目后点击"添加到 Chrome"。安装完成后，工具栏会出现插件图标，整个过程用不了一分钟。这种方式胜在省事，后续还能自动更新。

无法访问商店时，用源码构建离线安装

如果你在 Edge、360 浏览器、猎豹浏览器这类基于 Chromium 内核的环境里，或者网络访问不了商店，离线安装同样不麻烦。先把项目克隆到本地：

git clone https://gitcode.com/gh_mirrors/de/deepl-chrome-extension cd deepl-chrome-extension

接着安装依赖并构建：

npm install npm run build

构建完成后，项目里会生成dist目录。此时打开浏览器的扩展管理页面（Edge 或 Chrome 都在chrome://extensions/），开启右上角的"开发者模式"，点击"加载已解压的扩展程序"，选中dist目录即可。这里有个小提醒：package.json里声明了 Node 版本需不低于 16，如果你的环境版本过旧，可以先升级再构建，否则可能报错。

拿到 DeepL API Token 之后，配置页面怎么填

离线安装版和商店版都需要你自己准备 DeepL API Token——这是唯一一个绕不开的前置条件。DeepL 官方为个人用户提供了每月 50 万字符的免费额度，日常阅读绰绰有余。注册后，在 DeepL 控制台可以找到你的 Auth Key。

安装完插件后，点击工具栏图标进入配置页面（对应源码中的src/pages/Options/Options.tsx），核心配置项如下：

填完 Token 后，别忘了点一下页面上的"测试 Token"按钮。它会在内部发一条真实的翻译请求（把 "This is a test message." 翻成中文），成功则提示"测试成功"，失败会给出具体报错信息。这一步能帮你快速排查是密钥问题还是网络问题，值得养成习惯。全部确认无误后再点"保存"，配置会写入 Chrome 的storage.sync，同一账号下的多台设备会自动同步。

一个容易踩的坑：免费账户和 Pro 账户对应的是不同的 API 域名。源码里getAPI()的逻辑是，free区域走https://api-free.deepl.com，其余走https://api.deepl.com。如果你用的是免费额度却选了 Pro 类型，请求大概率会被拒绝。反过来，用 Pro 密钥却选免费区域同样会出问题。所以配置时"API 类型"和你的账户性质必须一一对应。

第一次翻译体验：选中文案，剩下的交给插件

配置完成，现在打开任意一个外文网页，用鼠标选中一段文字。如果开启了悬浮按钮，选区旁会浮现一个小图标，点它即弹出翻译窗口；不习惯悬浮按钮的，也可以在配置页把它关掉，改用快捷键或右键菜单触发。

翻译窗口分为上下两层：上方保留原文，下方是对应译文，翻译结果下方还有复制按钮，方便你把译文直接粘进笔记。这里放一张实际效果图——这是一个西班牙语百科页面的实时翻译：

从截图里能直观看到整个交互：右侧紫色标题栏的翻译窗口覆盖在页面上，原文与中文译文一一对应，无需离开当前页面。对阅读维基百科这类长文来说，这种"原地翻译"比来回切标签页舒服得多，阅读连贯性几乎不受影响。

进阶操作：快捷键、右键菜单与 OCR 图片翻译

三个高频入口，减少鼠标点击

插件在manifest.json里注册了两组全局快捷键，并默认启用右键菜单，日常使用可以这样分配：

• Ctrl+Shift+W（Mac 为 MacCtrl+Command+W）：随时打开/收起翻译应用窗口；
• Ctrl+Shift+E（Mac 为 MacCtrl+Command+E）：开启 OCR 识别模式；
• 选中文字后右键 → 翻译选中文字：不习惯快捷键时的鼠标操作路径。

这三种入口对应的都是同一套后台逻辑，只是触发方式不同，你可以按使用习惯选顺手的。阅读场景里，快捷键 + 划词的组合是效率最高的。

OCR 模式下，图片里的文字也能翻

网页里总有那么些文字是"长在"图片里的——数据图表、代码截图、海报、扫描件。划词翻译对它们无能为力，这时候就该 OCR 出场了。插件通过腾讯云 OCR 服务完成文字识别，再交给 DeepL 翻译。

使用前需要先在配置页填入腾讯云的 Secret Id 和 Secret Key，并选择区域（默认华东上海ap-shanghai，另有北京、广州、香港、首尔、新加坡、多伦多等可选）。填写后，按 Ctrl+Shift+E 进入识别模式，框选图片区域，插件会先调用 OCR 接口把图片里的文字抠出来，再走翻译流程，最终在窗口里显示识别并翻译后的结果。对经常处理外文截图的人来说，这一条链路能省下"先截图识别、再复制翻译"的中间步骤。

拆开看看：插件背后的消息传递与请求管线

如果你对"一个翻译请求是怎么从选区跑到屏幕上的"感兴趣，这段可以满足好奇心。整个扩展由三部分组成：后台脚本（Background）、内容脚本（Content）和配置页（Options）。它们之间通过 Chrome 扩展 API 通信，核心路径在src/pages/Background/index.ts里可以看到：快捷键、右键菜单、图标点击这些事件，都会在后台脚本里被监听，然后通过connect.io建立的通道把指令发到当前标签页的内容脚本。

翻译请求本身封装在src/common/api.ts，核心代码非常简洁：

async translate(text: string, targetLang: string) { return this.axios.post('/v2/translate', qs.stringify({ target_lang: targetLang, split_sentences: '1', preserve_formatting: '0', text, }), { headers: { Authorization: `DeepL-Auth-Key ${this.apiToken}`, }, }).then(res => res.data) }

这段代码做的事情很直白：把文本和语言参数编码成表单，带上DeepL-Auth-Key头，POST 到翻译接口。注意它设了split_sentences: '1'，也就是按句子切分后再翻译，这样长段文本的译文结构会更清晰。日常用不到这些细节，但如果你想让插件"翻译得更合口味"，改参数就是从这里入手的。

还有一处值得留意的设计：内容脚本里维护了一个"翻译队列"（translation-stack.ts）。当你一次性划了多段文字，请求不会一拥而上打给 API，而是排队依次处理。这个队列在内容脚本尚未就绪时会先暂存任务，就绪后再逐个分发。它保证了高频划词时不会打乱顺序，也间接避免了瞬间打满 API 额度。

二次开发：想加功能，从哪里下手

这个项目的源码目录设计得很规整，想改哪里基本一眼就能定位：

src/ ├── pages/ │ ├── Content/ # 网页内渲染的翻译界面与 OCR 工具 │ ├── Options/ # 配置页面 │ └── Popup/ # 工具栏弹出窗口 ├── common/ │ ├── api.ts # DeepL API 客户端 │ ├── ocr-client.ts # 腾讯云 OCR 客户端 │ └── types.ts # 全局类型定义 └── manifest.json # 扩展清单

比如你想把 OCR 服务换成别的厂商，重点看src/common/ocr-client.ts；想调整翻译窗口的 UI，去src/pages/Content/components/下的App、TranslationList等组件里改。项目的消息层把"触发事件"和"具体动作"解耦得比较干净，新增一个入口（比如新的快捷键）不需要动太多其他地方。

开发调试时，可以用npm start启动开发服务器（内部是scripts/webserver.js），配合扩展管理页的"加载已解压的扩展程序"实现热更新；代码改动后跑一遍npm run lint和npm run prettier，保持与项目现有风格一致，提 Pull Request 时也更顺利。

避坑清单：五条容易翻车的细节

最后把这篇文章里值得记住的坑集中列一遍，遇到问题时先对照自查：

1. Token 填了但翻译报错：先确认"API 类型"是否与账户一致，免费额度对应free区域，Pro 对应默认区域；再确认网络能否正常访问对应 API 域名。
2. OCR 识别不出内容：检查腾讯云 Secret Id / Secret Key 是否填写完整，区域是否选择正确，并确认腾讯云那边已开通 OCR 服务。
3. 快捷键没反应：manifest.json里注册的快捷键可能与其他扩展冲突，可在浏览器的chrome://extensions/shortcuts页面手动重新绑定。
4. 翻译窗口被网页遮挡：翻译窗口本身支持拖动，把它拖到阅读区域外侧即可，不影响选中翻译。
5. 本地构建报 Node 版本错误：项目要求 Node >= 16，先用node -v确认版本，必要时升级后再执行npm install。

到这里，你既知道了怎么把它用起来，也清楚了它内部的运转逻辑。无论是纯粹为了提升阅读效率，还是想拿它当 Chrome 扩展开发的练手项目，这个开源插件都值得留在你的工具箱里。剩下的，就是装上它，去找一篇外文长文试试手了。

【免费下载链接】deepl-chrome-extensionA DeepL Translator Chrome extension项目地址: https://gitcode.com/gh_mirrors/de/deepl-chrome-extension