怎样一键并列显示双语网页

引言

在浏览网页过程中，翻译外语页面是常见需求。对此，大多数浏览器都提供了内置的翻译功能，可以一键将页面翻译为中文。

但很多时候，出于语言学习、在原始网页上做批注等需求，我们会希望对照查看双语内容；这就无法用内置翻译功能实现了。虽然「彩云小译」等少数插件可以实现在原文旁边插入译文，但需要注册账号并付费，其翻译效果也未必让所有人满意。

当然，如果不嫌麻烦，完全可以通过「复制当前网址——新建窗口——粘贴网址并访问——启用翻译——将窗口左右并列」这一系列步骤，手动实现对比查看双语网页。

……开玩笑，怎么可能不嫌麻烦。

本文中，我们将介绍如何将上述步骤自动化，实现一键查看双语网页。

继续阅读前，请先下载安装所用到的成品：

• 适用于 macOS 的快捷指令：
  • Safari（中文系统 | 英文系统）
  • Chrome（中文系统 | 英文系统）
• 适用于各平台的小书签（bookmarklet）。

具体使用方法和实现原理将在下文说明。

使用方法

如果使用快捷指令版本，打开要翻译的网页，点击菜单栏的快捷指令图标，选择「Split + Translate」即可。

你还可以使用我们此前文章介绍过的方式，通过快捷键、Alfred 等途径启动这些快捷指令：

• 条条大路通罗马：细数 macOS 版「快捷指令」的运行方式

如果使用小书签版本，打开下载页面后，按照提示将链接拖动到浏览器书签栏，即可完成安装。（在 iPhone 上，可以双手操作：一只手拖动链接不放，另一只手按工具栏的「书签」按钮、展开收藏夹，然后将链接拖进收藏夹松手。）

遇到需要翻译的网页时，点击这个书签，即可弹出新窗口（移动端为新标签页）并查看中文。虽然还是需要手动调整一下窗口排布，但也比纯手工操作方便不少了。

原理解释：AppleScript 版本

上面提供的快捷指令仅仅是一个「包装」，其中唯一步骤就是一段 AppleScript 脚本。下面简单介绍这些脚本的编制思路。

Safari 版本

新版 Safari 已经内置了基于 Siri 的翻译功能，并且可以直接通过菜单项触发，因此脚本的内容也与开头介绍的手工「笨办法」一一对应：

tell application "Safari"
	activate
	tell front window to set theUrl to URL of current tab
end tell
tell application "System Events" to tell process "Safari"
	click menu item "将窗口移到屏幕左侧" of menu "窗口" of menu bar 1
end tell
tell application "Safari"
	make new document at end of documents with properties {URL:theUrl}
	activate
end tell
delay 1
tell application "System Events" to tell process "Safari"
	click menu item "翻译为简体中文" of menu of menu item "翻译" of menu "显示" of menu bar 1
	click menu item "将窗口移到屏幕右侧" of menu "窗口" of menu bar 1
end tell

AppleScript 的语言啰嗦但很好懂，不难看出上面的代码依次做了这些事：

1. 读取当前标签页的地址，将其存储到变量 theURL 中；
2. 通过 macOS 内置的窗口管理功能将当前窗口移动到屏幕左半边（对应的手动操作是按住 Option 键，然后点击「窗口」>「将窗口移到屏幕左侧」）；
3. 新建一个 Safari 窗口，访问之前存储的 theURL 网址；
4. 从 Safari 菜单栏选择翻译为中文的菜单项，然后将这个翻译网页移动到屏幕右半边。

注意到脚本中多次出现 delay 1（暂停一秒再执行下一行），这是一种常见技巧、也是易错点。因为我们的脚本是在模拟手工操作图形界面（即所谓的 GUI scripting），各个步骤的执行不是即时完成的，而是有一定延迟。如果不插入一些等待时间，后续步骤会出错。

至于为什么要区分中英文版本，则因为不同语言下的菜单项名称不同，必须要精准匹配。

Chrome

Chrome 浏览器也内置了 Google 翻译，但一个麻烦之处在于翻译功能无法通过菜单栏触发，只能在页面空白处右键翻译，或者在启用自动翻译提示后，点击弹出的浮窗按钮；这超出了 AppleScript 的处理能力（存在变通方法，但要么需要借助借助第三方应用，要么代码过于复杂，通用性和稳定性很差）。

为此，我们采用一种曲线救国的方法，通过调用网页版的 Google 翻译来实现近似效果。Google 网页翻译的 URL 和参数格式为：

https://translate.google.com/translate?sl={SRC_LANG}&tl={TARGET_LANG}zh-cn&u={URL}

其中，SRC_LANG 是原语言（auto 表示自动检测），TARGET_LANG 是目标语言，URL 是网址。

因此，只要让 Chrome 打开一个新窗口，访问上述 Google 翻译网址，并将待翻译网页的地址填写到参数 u 之后即可。对应的脚本如下：

...

set newUrl to "https://translate.google.com/translate?sl=auto&tl=zh-cn&u=" & theUrl
tell application "Google Chrome"
	make new window
	open location newUrl
end tell

...

如果你访问 Google 翻译有障碍，可以尝试将上述脚本中的 google.com 域名改为 google.cn，可能有所改善。或者，将整段网址前缀替换为其他服务：

此外，还可以使用一个优秀的开源插件 Translate Web Pages（未上架 Chrome 商店，需要按链接中步骤手动安装），它可以调用 Google 翻译 API 直接翻译网页文本，并且可以指定快捷键（默认为 Option + T）和其他各类选项。对应的脚本内容放在 GitHub Gist 上，有兴趣的读者可以自行下载和调整。

原理解释：小书签版本

上面的步骤虽然可以实现全自动，但因为依托于 AppleScript，只适用于 macOS。如果在移动端或者 PC 端怎么办呢？这时，虽然没有各平台通用的方法，但可以通过浏览器小书签（bookmarklet）达到类似的效果。

如果你还不了解小书签，这是指以浏览器书签形式存储的一段 JavaScript 代码，保存在书签栏后，点击即可执行特定操作；如有兴趣了解，可以参阅少数派之前的文章：

• 无需安装浏览器插件，这些常用功能用「小书签」也能实现
• 用小书签改善 Safari 网页阅读效果

具体到文首提供的小书签（下载），原理仍然是调用上文介绍的 Google 翻译。其中重要部分的代码如下：

var prefix = "https://translate.google.com/translate?sl=auto&tl=zh-cn&u=";
window.open(
  prefix + encodeURIComponent(location.href),
  "_blank",
  "height=2000,width=600,noreferrer"
);

这里，我们使用 location.href 获取了当前网页的链接，与翻译服务网址前缀组合，然后通过 window.open() 打开。同时，用 target="_blank" 配合 noopener 链接类型，是为了实现强制在新窗口打开网页的效果。

当然，你可以按照自己的需求对下载页左上角的书签代码做调整，包括：

• 翻译服务地址：如果要换用上面介绍的微软翻译，或者其他支持类似语法的网页翻译服务），替换 prefix 变量中即可。我已经做好了对应几个主流服务的版本供取用。
• 弹出窗口的尺寸：包括高度 height 和宽度 width，单位为像素。这里，高度的值不妨设置得大一些，保证在各种分辨率的屏幕上都可以填满纵向空间。
• 书签的名称：即夹在 a 标签中的文本。