news 2026/4/15 6:27:07

浏览器扩展开发：网页划词即时翻译功能实现路径

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
浏览器扩展开发：网页划词即时翻译功能实现路径

浏览器扩展开发：网页划词即时翻译功能实现路径

📌 引言：让翻译更“顺手”的用户体验需求

在日常浏览英文网页时，用户常面临“看得懂但费劲”或“完全看不懂”的困境。虽然已有大量在线翻译工具（如谷歌翻译、DeepL），但它们大多依赖整页翻译或手动复制粘贴，操作繁琐、打断阅读节奏。而随着AI智能中英翻译服务的成熟——尤其是轻量级、高精度、支持API调用的本地化模型出现——我们迎来了构建低延迟、无感化、即选即译浏览器扩展的新契机。

本文将围绕一个实际可用的技术栈组合展开：以前端浏览器扩展为交互入口，以后端AI 智能中英翻译服务（WebUI + API）为翻译引擎，完整实现一个“划词→弹窗翻译→快速理解”的闭环系统。重点讲解如何打通前后端通信、设计轻量弹窗UI、处理跨域问题，并最终部署成可复用的Chrome插件。

🔧 技术选型与架构概览

本方案采用前后端分离模式，整体架构如下：

[用户划词] ↓ [浏览器内容脚本捕获文本] ↓ [通过fetch调用本地/远程翻译API] ↓ [接收JSON格式翻译结果] ↓ [渲染至浮动气泡弹窗]

核心组件说明

| 组件 | 技术选型 | 职责 | |------|---------|------| | 前端（扩展） | JavaScript + HTML/CSS | 捕获选中文本、发起请求、展示结果 | | 后端翻译服务 | Flask + CSANMT模型 | 提供/translate接口，返回高质量译文 | | 通信协议 | HTTP RESTful API | 扩展与后端服务的数据交换 |

💡 为何选择CSANMT？达摩院推出的CSANMT（Chinese-to-English Neural Machine Translation）模型专精于中英互译任务，在流畅性、语法准确性和术语一致性方面表现优异。更重要的是，其轻量化版本可在CPU上高效运行，非常适合部署在个人电脑或边缘设备上，避免对云端API的依赖和隐私泄露风险。

🛠️ 实现步骤详解

第一步：搭建翻译后端服务（Flask API）

假设你已拉取并启动了提供的 Docker 镜像，该镜像内置了一个基于Transformers的 CSANMT 模型，并暴露了标准 HTTP 接口。

✅ 确认API接口可用性

默认情况下，服务运行在http://127.0.0.1:7860，提供以下关键接口：

POST /translate Content-Type: application/json { "text": "今天天气真好" }

响应示例：

{ "translation": "The weather is really nice today." }

⚠️ 注意事项： - 若扩展需访问localhost，必须在manifest.json中声明权限。 - Chrome 默认禁止扩展访问本地回环地址（loopback），需手动启用--allow-running-insecure-content或使用代理转发。

第二步：创建浏览器扩展基础结构

目录结构
word-translator-extension/ ├── manifest.json # 扩展元信息 ├── content.js # 内容脚本：监听页面划词 ├── popup.html # 可选：右键菜单弹出页 ├── popup.js ├── translator.css # 弹窗样式 └── icons/ # 图标资源

第三步：编写manifest.json（v3 版本）

Chrome 扩展 Manifest V3 是当前主流规范，强调安全性与性能。

{ "manifest_version": 3, "name": "划词即时翻译", "version": "1.0", "description": "选中文本后自动调用本地AI翻译服务并显示结果。", "icons": { "16": "icons/icon16.png", "48": "icons/icon48.png", "128": "icons/icon128.png" }, "content_scripts": [ { "matches": ["<all_urls>"], "js": ["content.js"], "css": ["translator.css"], "run_at": "document_end" } ], "host_permissions": [ "http://127.0.0.1:7860/" ], "permissions": [ "activeTab" ] }

🔐 权限说明： -"host_permissions"明确授权访问本地翻译服务； -"content_scripts"注入到所有网页，监听用户行为； - 不需要后台脚本（background service worker），减少资源占用。

第四步：实现核心逻辑 ——content.js

这是整个扩展的核心，负责监听鼠标释放事件、提取选中文本、调用API并显示结果。

// content.js let translateBubble = null; // 创建翻译气泡元素 function createTranslateBubble() { const bubble = document.createElement('div'); bubble.id = 'translator-bubble'; bubble.style.position = 'absolute'; bubble.style.backgroundColor = '#fff'; bubble.style.color = '#333'; bubble.style.padding = '8px 12px'; bubble.style.borderRadius = '6px'; bubble.style.boxShadow = '0 4px 12px rgba(0,0,0,0.15)'; bubble.style.fontSize = '14px'; bubble.style.zIndex = '10000'; bubble.style.maxWidth = '300px'; bubble.style.wordBreak = 'break-word'; bubble.style.display = 'none'; document.body.appendChild(bubble); return bubble; } // 显示翻译结果 async function showTranslation(selectionText) { try { const response = await fetch('http://127.0.0.1:7860/translate', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ text: selectionText }) }); if (!response.ok) throw new Error('Network error'); const data = await response.json(); const translation = data.translation || '翻译失败'; // 获取选区位置 const sel = window.getSelection(); const range = sel.getRangeAt(0); const rect = range.getBoundingClientRect(); // 定位气泡在选区上方 translateBubble.style.top = `${rect.top + window.scrollY - 40}px`; translateBubble.style.left = `${Math.min(rect.left, window.innerWidth - 320)}px`; translateBubble.textContent = translation; translateBubble.style.display = 'block'; // 3秒后自动隐藏 setTimeout(() => { translateBubble.style.display = 'none'; }, 3000); } catch (err) { console.error('翻译请求失败:', err); translateBubble.textContent = '翻译服务不可用'; translateBubble.style.display = 'block'; setTimeout(() => { translateBubble.style.display = 'none'; }, 3000); } } // 初始化 document.addEventListener('mouseup', () => { const selection = window.getSelection(); const selectedText = selection.toString().trim(); if (selectedText.length === 0) return; // 忽略过长文本（防止误触） if (selectedText.length > 200) return; // 延迟执行以确保选区稳定 setTimeout(() => { showTranslation(selectedText); }, 100); }); // 动态创建气泡 translateBubble = createTranslateBubble();

✅ 关键点解析： - 使用getBoundingClientRect()精确定位弹窗位置； - 添加防抖机制（setTimeout）避免频繁触发； - 设置最大宽度和自动换行，提升可读性； - 错误兜底处理，增强健壮性。

第五步：美化弹窗样式 ——translator.css

/* translator.css */ #translator-bubble { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; transition: opacity 0.2s ease-in-out; }

简单引入现代字体栈，使弹窗风格更贴近主流操作系统审美。

🧪 实际测试流程

  1. 启动本地翻译服务：bash docker run -p 7860:7860 your-csanmt-image

  2. 打开 Chrome → 地址栏输入chrome://extensions/

  3. 开启“开发者模式” → 点击“加载已解压的扩展程序” → 选择项目目录

  4. 访问任意英文/中文网页，尝试划词

  5. 观察是否弹出翻译结果气泡

✅ 成功效果：
选中“人工智能正在改变世界”，松开鼠标后，上方出现气泡：“Artificial intelligence is changing the world.”

⚠️ 常见问题与优化建议

❌ 问题1：CORS 阻止请求？

尽管是本地服务，Chrome 扩展仍受同源策略限制。但由于我们在manifest.json中显式声明了host_permissions，不会触发 CORS 错误。只要服务允许 POST 请求即可。

✅ 解决方案：确保后端 Flask 支持跨域（推荐使用flask-cors）：

python from flask_cors import CORS app = Flask(__name__) CORS(app)

❌ 问题2：无法访问127.0.0.1:7860？

Chrome 默认不允许扩展访问本地回环接口（出于安全考虑）。你需要手动启用：

  1. 启动 Chrome 时添加参数：bash google-chrome --allow-running-insecure-content --disable-web-security

    ⚠️ 仅用于开发环境！生产环境不建议关闭安全策略。

  2. 或者使用 Nginx 反向代理，将localhost:7860映射到http://api.translator.local并加入白名单。

✅ 优化方向

| 优化项 | 实现方式 | |-------|--------| | 缓存机制 | 对已翻译过的短语进行 localStorage 缓存，减少重复请求 | | 多语言支持 | 修改 API 调用参数，支持英→中或其他语种 | | 快捷键唤醒 | 绑定Ctrl+Enter主动触发翻译 | | 悬浮窗持久化 | 点击气泡不消失，可复制内容 | | 错误重试机制 | 网络异常时自动重试一次 |

🔄 进阶整合：双栏WebUI嵌入式预览（可选）

除了弹窗翻译，还可以在扩展中集成一个迷你版的双栏对照界面，点击图标后从侧边滑出。

实现思路：

  1. 在popup.html中嵌入<iframe src="http://127.0.0.1:7860">
  2. 用户点击扩展图标时加载本地 WebUI
  3. 支持手动输入更复杂句子进行精翻
<!-- popup.html --> <!DOCTYPE html> <html> <head> <style> body { width: 400px; height: 500px; margin: 0; overflow: hidden; } iframe { width: 100%; height: 100%; border: none; } </style> </head> <body> <iframe src="http://127.0.0.1:7860"></iframe> </body> </html>

💡 优势：复用现有 WebUI，无需重新开发交互页面；适合需要深度编辑的场景。

🎯 总结：打造真正“无感”的翻译体验

通过本次实践，我们成功实现了从“被动整页翻译”到“主动划词即译”的跃迁。整个系统具备以下核心价值：

📌 工程落地三大收获： 1.本地优先：依托轻量级 CPU 可运行的 CSANMT 模型，保障速度与隐私； 2.无缝集成：浏览器扩展作为前端入口，实现零干扰阅读体验； 3.开放架构：RESTful API 设计便于未来替换为其他翻译引擎（如阿里云、腾讯翻译君等）。

🚀 下一步建议

  • 将扩展发布至 Chrome Web Store，供更多人使用
  • 结合 TTS（文本转语音）功能，实现“听译一体”
  • 加入用户反馈机制，收集翻译不准案例用于模型微调
  • 探索 PWA + 扩展联动，实现跨平台同步配置

✨ 最终愿景：
让语言不再成为信息获取的障碍。每一次轻轻一划，都是通向世界的窗口。而这一切，始于一个小小的浏览器扩展，和一个足够聪明的本地AI翻译引擎。

版权声明: 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！
网站建设 2026/4/15 6:27:08

8.2 磁悬浮刚性转子动力学：基于磁轴承支承的转子系统建模与稳定性分析

8.2 磁悬浮刚性转子动力学：基于磁轴承支承的转子系统建模与稳定性分析 磁悬浮轴承的最终目标是实现转子在五个受控自由度上的稳定、高性能悬浮与旋转。第5.1节所述的单自由度模型揭示了系统稳定性的基本原理，但实际转子是一个具有质量分布和转动惯量的连续体，其动力学行为远…

作者头像 李华
网站建设 2026/4/15 6:27:05

CSANMT模型在电商产品评论翻译的情感保留

CSANMT模型在电商产品评论翻译的情感保留 &#x1f310; AI 智能中英翻译服务 (WebUI API) 项目背景与业务需求 随着跨境电商的迅猛发展&#xff0c;海量中文产品评论需要被快速、准确地翻译成英文&#xff0c;供海外用户参考。然而&#xff0c;传统机器翻译系统在处理用户生成…

作者头像 李华
网站建设 2026/4/15 6:28:38

如何用CSANMT构建支持历史记录的翻译应用？

如何用CSANMT构建支持历史记录的翻译应用&#xff1f; &#x1f310; AI 智能中英翻译服务 (WebUI API) 在多语言交流日益频繁的今天&#xff0c;高质量、低延迟的自动翻译系统已成为开发者和企业不可或缺的工具。传统的翻译服务往往依赖云端API&#xff0c;存在隐私泄露、网络…

作者头像 李华
网站建设 2026/4/15 6:28:37

10. Linux 系统启动原理

CentOS 7 启动过程 现代计算机系统是硬件与软件的复杂组合。从加电状态开始&#xff0c;到拥有登录提示符的运行中系统&#xff0c; 这需要大量的硬件和软件配合工作。 以下列表从较高层面概述了 CentOS7 启动过程。 计算机接通电源。系统固件&#xff08;现代UEFI或更旧的BIO…

作者头像 李华
网站建设 2026/4/12 23:19:53

翻译服务客户端SDK：简化CSANMT集成的开发工具

翻译服务客户端SDK&#xff1a;简化CSANMT集成的开发工具 &#x1f310; AI 智能中英翻译服务 (WebUI API) 在跨语言交流日益频繁的今天&#xff0c;高质量、低延迟的自动翻译能力已成为众多应用的核心需求。无论是国际化产品的内容本地化&#xff0c;还是开发者构建多语言支持…

作者头像 李华
网站建设 2026/4/12 11:35:21

网站多语言改造实战：用AI镜像快速生成英文版内容

网站多语言改造实战&#xff1a;用AI镜像快速生成英文版内容 随着全球化进程的加速&#xff0c;越来越多的企业和开发者开始关注网站的多语言支持能力。对于中文为主的网站而言&#xff0c;如何高效、低成本地构建高质量英文版本&#xff0c;成为一项关键挑战。传统的人工翻译…

作者头像 李华