让划词翻译支持 PDF 文档

[lmk123]

刚才我花了点时间找到了让划词翻译支持 PDF 文件的方法，在这里记录一下。

首先要说明的是，官方提供的结合 Webpack 使用的例子只能将 PDF 转换为 canvas，划词翻译还是没法使用，所以我需要的其实是 pdf.js 里的 viewer。

详细步骤

1. 在 https://github.com/mozilla/pdf.js/releases/tag/v1.3.91 下载 pdfjs-1.3.91-dist.zip 并解压到 ./src 的 pdfjs-1.3.91-dist 目录下
2. 打开 ./src/pdfjs-1.3.91-dist/web/viewer.js，注释掉其中的第 7157-7159 行。这是为了避免 view.js 在检测到不同源的 PDF 文档时报错——在 Chrome 扩展程序里是可以进行跨域请求的。
3. 打开 ./src/pdfjs-1.3.91-dist/web/viewer.html，并在 </body> 前加上下面几行代码：

<link rel="stylesheet" href="../../bundle/commons1.js.css">
<script src="../../bundle/commons3.js"></script>
<script src="../../bundle/commons2.js"></script>
<script src="../../bundle/commons1.js"></script>
<script src="../../bundle/content.js"></script>

现在，在浏览器内打开 chrome-extension://bocneeaaedgmgcehokhbgffchgbbhllk/pdfjs-1.3.91-dist/web/viewer.html?file=http%3A%2F%2Fmozilla.github.io%2Fpdf.js%2Fweb%2Fcompressed.tracemonkey-pldi-09.pdf 就能预览 http://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf 的 PDF 文件，并且划词翻译能正常工作。

工作原理

1. 要让划词翻译能翻译 PDF 内的文本，首先要使用 pdf.js 自带的 viewer 打开 PDF 文档。
2. 然后，因为内容脚本不会被插入到 chrome-extension://* 类的网页里，所以要手动在 viewer.html 底部加上内容脚本的代码。
3. 最后，在打开 viewer.html 的网址后加上 ?file=pdf文件的URL（pdf 文件的 URL 需要使用 encodeURIComponent() 编码），viewer.html 就会加载 PDF 文件了。

需要解决的问题

• pdfjs-1.3.91-dist.zip 里有近 400 个文件，但需要改动的只有两个文件，所以我需要使用编程的方式将它下载到项目中及改动文件（使用 postinstall）。
• 需要在检测到即将访问一个 PDF 文档时跳转到 viewer.html 并带上 PDF 文档的 URL。可以在内容脚本内判断当前 URL 是否以 .pdf 结尾，或者使用 chrome.webRequest 检测（后者好些）

此 PR 就解决了上面的两个问题。相关 issue：#69

[lmk123]

现在的判断方式是将以 .pdf 结尾的网址都当做 PDF 文档来处理，但这是不严谨的。

• 只有 file:///协议的 .pdf （即使用 Chrome 打开的本地 PDF 文档）才能认为是 PDF 文档
• http:// 或 https:// 协议下要通过响应头的 Content-Type 判断
• ftp:// 协议要怎么处理？