《从零开始开发一个划词翻译扩展程序》系列文章

你好，我是划词翻译的作者。划词翻译是一款安装在 Chrome、Firefox 和 Edge 浏览器上的扩展程序，自 2013 年我在大学寝室开发出它的第一个版本至今，我已经维护了 7 年时间。点击查看划词翻译的大事记

在这段时间里，我积累了一些相关经验，例如文本检测、扩展开发等，于是就想通过一个系列文章记录下来，也算是对这些年的维护经历做一个总结。

目标

我会在这一系列的文章中开发一个简单的划词后显示翻译结果的扩展程序，“从零开始”有两层含义：

• 我会从零开始一步一步的开发这个扩展程序。
• 我希望没有开发过扩展程序的读者也能读懂并完成这个扩展程序的开发。读者只需了解基本的前端开发技术—— HTML、CSS、JavaScript ——即可无障碍阅读。

但是，这一系列文章并不是一个教程。我的主要目的是按照开发一个扩展程序的顺序记录我在这个过程中实际遇到的问题并探讨解决方案。我会默认将扩展开发相关的内容折叠起来，并且只会最低限度的介绍在开发过程中需要了解的部分，其余的部分则会提供官方文档地址作为扩展阅读。

总的来说，这一系列文章是"经验总结"、"扩展程序开发实战"和"扩展程序官方文档导读"。

内容大纲

我把开发一个划词翻译类扩展程序的过程分解成了以下几个大的步骤，每个步骤独自用一篇文章介绍。

第一篇：检测用户的划词操作

这篇文章主要用到了扩展程序的内容脚本，但你不需要了解它也可以阅读。这篇文章主要涵盖以下内容：

• 检测鼠标划词
• 鼠标划词之外的情景
• 跨 iframe 的划词操作检测方案
• 遇到并解决第一个属于扩展程序的“兼容性问题”
• 在浏览器中安装并运行我们的代码

这篇文章已经写完了：

• 在 GitHub 里阅读《检测用户的划词操作》

第二篇：获取用户选中的文本和文本位置

这篇文章没有涉及到扩展程序的任何功能，主要涵盖以下内容：

• 使用 Selection API 获取页面中选中的文本和位置
• 文本框（<input> 和 <textarea> 元素）内划词的情况
• Shadow DOM 内划词的情况
• 跨 Shadow DOM 划词的情况
• 题外话：鼠标悬浮取词功能的实现

第三篇：根据用户划选的文本查询到翻译结果

这篇文章会涉及到扩展程序提供的一个（我自认为）最为强大的 API——webRequest API，但只占很少部分的内容。

• 使用官方提供的 API 获取翻译结果
• 使用在线翻译服务的翻译详情页获取翻译结果
• 分析在线翻译服务的接口
• 使用模拟用户操作的方式获取翻译结果

第四篇：构建将翻译结果显示给用户看的翻译面板

这篇文章不会告诉你如何去构建一个翻译面板，但是会告诉你如何尽可能的不让我们在内容脚本里的代码对宿主页面产生影响甚至冲突：

• 如何让我们的样式不受到宿主页面的影响
• 如何尽可能的减少对宿主页面的影响
• 其它会漏掉的细节：页面焦点等

第五篇：使用扩展程序提供的各种功能增强我们的划词翻译扩展

到第四篇的时候，一个划词翻译扩展程序其实已经开发好了，现在总算到了着重介绍扩展程序功能的时候了。本篇会介绍大部分我们用得到的功能：

• 内容脚本之外划词的情况：浏览器内置页面（例如以 chrome:// 协议开头的页面）、PDF 页面、浏览器外划词
• 提供系统语音朗读功能
• 将浏览器的地址栏改造成单词查询的入口

第六篇：最佳实践

这篇文章会介绍我个人总结的扩展程序开发的最佳实践，涵盖以下内容：

• 尽可能少的申请权限。例如，使用消息通信的方式节省掉 tabs 权限
• 尽量使用可选权限
• 测试、测试、再测试
• 不要给用户“惊喜”

写在最后

以我对自己的了解，我很有可能会弃坑。如果你感兴趣的话，点个赞吧，让我知道还是有人喜欢这些内容的，说不定我就会持续更新了 😂