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核心配置项如下配置项说明默认值默认目标语言翻译成什么语言如 ZH中文ZHAPI 类型免费账户选免费Pro 账户选DeepL ProDeepL ProAPI 秘钥你的 DeepL Auth Key空腾讯云 OCRSecret Id / Secret Key / 区域可选空开启网页悬浮按钮划词后是否显示翻译按钮开启填完 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里注册了两组全局快捷键并默认启用右键菜单日常使用可以这样分配CtrlShiftWMac 为 MacCtrlCommandW随时打开/收起翻译应用窗口CtrlShiftEMac 为 MacCtrlCommandE开启 OCR 识别模式选中文字后右键 → 翻译选中文字不习惯快捷键时的鼠标操作路径。这三种入口对应的都是同一套后台逻辑只是触发方式不同你可以按使用习惯选顺手的。阅读场景里快捷键 划词的组合是效率最高的。OCR 模式下图片里的文字也能翻网页里总有那么些文字是长在图片里的——数据图表、代码截图、海报、扫描件。划词翻译对它们无能为力这时候就该 OCR 出场了。插件通过腾讯云 OCR 服务完成文字识别再交给 DeepL 翻译。使用前需要先在配置页填入腾讯云的 Secret Id 和 Secret Key并选择区域默认华东上海ap-shanghai另有北京、广州、香港、首尔、新加坡、多伦多等可选。填写后按 CtrlShiftE 进入识别模式框选图片区域插件会先调用 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 时也更顺利。避坑清单五条容易翻车的细节最后把这篇文章里值得记住的坑集中列一遍遇到问题时先对照自查Token 填了但翻译报错先确认API 类型是否与账户一致免费额度对应free区域Pro 对应默认区域再确认网络能否正常访问对应 API 域名。OCR 识别不出内容检查腾讯云 Secret Id / Secret Key 是否填写完整区域是否选择正确并确认腾讯云那边已开通 OCR 服务。快捷键没反应manifest.json里注册的快捷键可能与其他扩展冲突可在浏览器的chrome://extensions/shortcuts页面手动重新绑定。翻译窗口被网页遮挡翻译窗口本身支持拖动把它拖到阅读区域外侧即可不影响选中翻译。本地构建报 Node 版本错误项目要求 Node 16先用node -v确认版本必要时升级后再执行npm install。到这里你既知道了怎么把它用起来也清楚了它内部的运转逻辑。无论是纯粹为了提升阅读效率还是想拿它当 Chrome 扩展开发的练手项目这个开源插件都值得留在你的工具箱里。剩下的就是装上它去找一篇外文长文试试手了。【免费下载链接】deepl-chrome-extensionA DeepL Translator Chrome extension项目地址: https://gitcode.com/gh_mirrors/de/deepl-chrome-extension创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 DeepL Chrome 翻译插件实战指南：从 API Token 配置到 OCR 图文识别的浏览器翻译全流程
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核心配置项如下配置项说明默认值默认目标语言翻译成什么语言如 ZH中文ZHAPI 类型免费账户选免费Pro 账户选DeepL ProDeepL ProAPI 秘钥你的 DeepL Auth Key空腾讯云 OCRSecret Id / Secret Key / 区域可选空开启网页悬浮按钮划词后是否显示翻译按钮开启填完 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里注册了两组全局快捷键并默认启用右键菜单日常使用可以这样分配CtrlShiftWMac 为 MacCtrlCommandW随时打开/收起翻译应用窗口CtrlShiftEMac 为 MacCtrlCommandE开启 OCR 识别模式选中文字后右键 → 翻译选中文字不习惯快捷键时的鼠标操作路径。这三种入口对应的都是同一套后台逻辑只是触发方式不同你可以按使用习惯选顺手的。阅读场景里快捷键 划词的组合是效率最高的。OCR 模式下图片里的文字也能翻网页里总有那么些文字是长在图片里的——数据图表、代码截图、海报、扫描件。划词翻译对它们无能为力这时候就该 OCR 出场了。插件通过腾讯云 OCR 服务完成文字识别再交给 DeepL 翻译。使用前需要先在配置页填入腾讯云的 Secret Id 和 Secret Key并选择区域默认华东上海ap-shanghai另有北京、广州、香港、首尔、新加坡、多伦多等可选。填写后按 CtrlShiftE 进入识别模式框选图片区域插件会先调用 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 时也更顺利。避坑清单五条容易翻车的细节最后把这篇文章里值得记住的坑集中列一遍遇到问题时先对照自查Token 填了但翻译报错先确认API 类型是否与账户一致免费额度对应free区域Pro 对应默认区域再确认网络能否正常访问对应 API 域名。OCR 识别不出内容检查腾讯云 Secret Id / Secret Key 是否填写完整区域是否选择正确并确认腾讯云那边已开通 OCR 服务。快捷键没反应manifest.json里注册的快捷键可能与其他扩展冲突可在浏览器的chrome://extensions/shortcuts页面手动重新绑定。翻译窗口被网页遮挡翻译窗口本身支持拖动把它拖到阅读区域外侧即可不影响选中翻译。本地构建报 Node 版本错误项目要求 Node 16先用node -v确认版本必要时升级后再执行npm install。到这里你既知道了怎么把它用起来也清楚了它内部的运转逻辑。无论是纯粹为了提升阅读效率还是想拿它当 Chrome 扩展开发的练手项目这个开源插件都值得留在你的工具箱里。剩下的就是装上它去找一篇外文长文试试手了。【免费下载链接】deepl-chrome-extensionA DeepL Translator Chrome extension项目地址: https://gitcode.com/gh_mirrors/de/deepl-chrome-extension创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考