网页翻译插件的技术原理：从划词到全文翻译

随心翻译插件上架 Edge 商店了，聊聊背后的技术原理。

插件架构

浏览器插件本质上是运行在浏览器沙箱里的 Web 应用。核心组件：

• Content Script：注入到目标页面，负责 DOM 交互和文本提取
• Background Service Worker：处理 API 请求和状态管理
• Popup/Options UI：用户界面和配置

三种翻译模式的技术实现

1. 沉浸双语对照

• 提取原文 DOM 节点，创建对照容器
• 调用翻译 API 获取译文
• 保持原文格式（段落、列表、表格）
• 难点：长文档分段、格式还原

2. 划词即翻

• 监听 Selection API，获取选中文本
• 弹出浮层显示译文
• 难点：浮层定位、避免遮挡

3. 全文一键翻译

• 遍历页面文本节点，批量调用翻译 API
• 保持页面结构不变
• 难点：大文档分段、增量更新

价格模式

不用不花钱，注册送 ¥1 体验金，不包月，余额永不过期。按量计费，用多少扣多少。

总结

Edge 商店上架后，安装插件变得非常简单。如果你还在为外文阅读烦恼，试试这个不用不花钱的翻译工具。