Safari 作为 iOS 设备上我们使用最为频繁的 App 之一，它除了能让我们翱翔于无边的网际之外，其实利用它本身自带的书签功能我们还可以将其打造成一个快速启动中心。

在桌面环境中大多数浏览器都允许安装各种插件以扩展浏览器自身的各种功能，而在 iOS 8 之前的 iOS 设备上出于安全以及其他方面的考虑，苹果公司并不允许 App 间的互相通讯更不用说在 Safari 中安装插件了。作为代价在桌面环境中一件非常简单的事情在 iOS 下都会显得繁复不堪，比如将当前浏览的页面保存到 Evernote 中在桌面下只是点击一下鼠标的操作，在 iOS 中却要在多个 App 间来回切换。在这样背景下作为插件的折中选择——Bookmarklet 应运而生。

如果你不知道 Bookmarklet 是什么的话，那么你肯定知道什么是书签（Bookmark）。Bookmarklet 与普通书签的唯一区别是普通书签保存的是一个网页地址，而 Bookmarklet 里存储的是一段 Javascript 代码。Bookmarklet 就像桌面浏览器的插件一般增强 Safari 在 iOS 中的易用性以及便捷性。

不同的 Bookmarklet 所实现的功能也各不相同。有的可以一键将当前页面保存到 Everclip 中去，有的则可以将当前的浏览的 Twitter 页面在 Tweetbot 中打开。如果配合上 Launch Center Pro 的话更是如虎添翼。

安装 Bookmarklet

在我们展开讨论 Bookmarklet 之前先看看如何安装 Bookmarklet。如果你已经有过使用 Bookmarklet 经验的话，则可以跳过此段落。

  1. 在 Safari 中打开任意一个网页，然后点击底部工具栏的分享图标。

  2. 接着选择书签（Bookmark）选项。

  3. 在弹出的页面中我们可以修改书签的名称，以便更好的辨识，最后点击右上角的保存。

  4. 复制一段我们需要的 Javacript 代码到剪切板中待用。

  5. 点击底部工具栏的书签图标，卡开书签列表。

  6. 进入书签列表之后点击右下角的编辑，然后选择我们需要刚刚创建的书签。

  7. 在书签的编辑页面下清空地址栏中的内容后长按地址栏将 Javascript 代码复制到其中，最后点击完成。

实例：常用的 Bookmarklets

  • 保存到 Everclip

      javascript:window.location='everclip://x-callback-url/article?url='+encodeURIComponent(location.href)+'&x-success='+encodeURIComponent(location.href)

    说明：将当前页面的正文部分保存到 Everclip 中后自动返回刚才浏览的网页。

  • 在 Tweetbot 中打开 Tweet

      javascript:window.location='tweetbot:/'+location.pathname

    说明：将当前浏览的 Tweet 页面在 Tweetbot 中打开。

  • 保存到 Instapaper

      javascript:window.location='i'+location.href

    说明:将当前页面保存到 Instapaper 中。

  • 在 Tweebot 中打开 Profile

      javascript:window.location='tweetbot:///user_profile'+location.pathname

    说明：在 Tweebot 中打开该 Twitter 的 Profile。

  • 在 Moke 2 中打开微博页面（需安装 Launch Center Pro）

      Javascript:window.location='launch://x-callback-url/clipboard?text='+encodeURIComponent(location.href)+'&x-success=com.moke.moke-2://'

    说明：出于安全的原因 Javascript 无法读取和写入剪切板内容，所以借助 Launch Center Pro 将微博地址写入到剪切板后跳转到 Moke 中打开微博页面。

  • 打开剪切板中的网址（需安装 Launch Center Pro)

       Javascript:window.location='launch://url?=%5Bclipboard%5D'

    说明：通过 Launch Center Pro 在 Safari 新建一个新的标签打开剪切板中的网页。

  • 使用 Chrome 打开当前页面

      javascript:window.location='googlechrome-x-callback://x-callback-url/open/?url='+encodeURIComponent(location.href)

    说明：在 Chrome 中打开当前浏览的网页。

  • 在 Articles 中打开维基页面

      javascript:window.location='x-articles://'+location.href.replace("http://" , "")

    说明：在 Articles 中浏览当前维基百科页面。

  • 在 Documents 中打开当前页面

      Javascript:window.location=('r'+location.href)

    说明：在 Documents by Readdle 自带的浏览器中打开当前页面。Documents 自带的浏览器支持下载多媒体格式文件。

  • Google 搜索当前选中的文字（仅限 iPad）

      Javascript:window.open('http://www.google.com/search?q='+document.getSelection())

    说明：将选中的文本作为关键词在新标签页中进行搜索。

  • 返回网站主页

      Javascript:window.location=location.origin

    说明：快速返回到当前网站的主页。

  • 滚动到网页底部

      javascript:scroll(0,document.getElementsByTagName("body")[0].scrollHeight)

    说明：快速滚动到当前浏览网页的底部。

进阶：构建属于自己的 Bookmarklet

以上这些 Boormarklet 都是我日常比较经常用到的。如果你想要构建属于你自己的 Bookrmarlet ，那么你可以参考以下这一部分的内容。

1.整体结构

假设现在我们要创建一个 Boormarklet 利用 Launch Center Pro 将当前浏览的网页的标题以及 URL 分享到微博上。如果你有仔细观察上面的这些 Boormarklet 的代码你会发现他们都是以Javascript:开头，用以告诉 Safari 需要调用 Javascript 进行解析。所以不管你要创建什么样的 Boormarklet 这一前缀都是不变的。

接着如果一个 Boormarklet 要调用到除了 Safari 自身以外的 App，就需要用 window.location= 来告知 Safari 我们需要调用的 App 地址。什么是 App 的地址呢？其实就是 Launch Center Pro 中我们会经常用到的 URL Scheme，它和普通的 URL 除了前者打开的是一个 App，后者打开的是一个网页外并没有多大的区别。假设你在 window.location=后面输入一段网址并保存为 Boormarklet ，它也能正常的被 Safari 打开。通过 Launch Center Pro 我们可以很容易获取到它本身自带的微博分享功能的 URL Scheme： launch://sinaweibo?text={{微博正文}}。我们将前面已知道的部分拼合起来得到以下代码：

Javascript:window.location='launch://sinaweibo?text=微博正文'

细心的你应该发现了 URL Scheme 前后被一对单引号包围起来了，那是因为对于 Javascript 来说 URL Scheme 既不是它所认识的「函数」也不是用户创建的「变量」，所以需要用单引号包围起来标示为纯文本，并不需要 Javascript 进行特殊的运算处理。我们把上面创建的代码保存为 Boormarklet 后在 Safari 中执行会得到以下这个结果:

2.代码拼合

现在离我们的目标只差最后一步了，只要将「微博正文」这几个字替换成我们正在浏览的网页的标题以及网址就大功告成了。在这里我们可以使用 document.title 以及 location.href系统变量来获取当前页面的标题以及地址。URL 中是不允许空格等其他特殊符号存在的，为了防止断链我们需要使用encodeURIComponent()函数对标题以及网址进行 URL 编码。我们用「+」号将两个系统变量连接起来后放置在 URL 编码函数的括号内，并替换掉上面代码中的「微博正文」四个字后得出下面这段代码：

Javascript:window.location='launch://sinaweibo?text='+encodeURIComponent(document.title+location.href)

我们之前说过了只有文本才需要被单引号包围起来，因此整段代码中只有 launch://sinaweibo?text=这一段需要使用单引号包围起来，其余的部分都是 Javascript 自身的系统变量或者函数。引号内不管包含了什么内容 Javascript 都不会对它进行任何的运算，因此需要特别注意引号的起始以及结尾。另一个特别需要注意的是Boormarklet 中文本、函数以及变量各个不同的「部件」要使用「+」号连接起来的。

现在我们再将这段代码保存为 Boormarklet 在 Safari 中运行看看效果：

3.最后优化

以上的效果基本达到了我们的需求，但是标题和网址却混杂在一起，每次还需要手动的去调整。我们可以在标题和网址直接插入两个换行符 /cn 来解决。按照之前的规则使用单引号将非函数以及变量的换行符包围起来后用「+」将其插入到标题与地址之间得到以下代码1:

Javascript:window.location='launch://sinaweibo?text='+encodeURIComponent(document.title+'%5cn%5cn'+location.href)

再次将修改后的代码保存为 Bookmarklet，在 Safari 中执行后得到我们最终想要的结果：

结语

如果你看完上面进阶内容后再去回顾第二部分的实例代码，或许会有不一样的收获。

在 WWDC 2014 的 Keynote 上，苹果公司发布了 iOS 8，新的系统以一个前所未有的开放态度面向所有的 iOS 应用开发者。使得在 Safari 中安装插件成为了可能，当多数应用适配 iOS 8 的 「 Extension」新特性后 Bookmarklet 或许将会渐渐的退出 iOS 这个舞台，也或许将会披上「Extension」的外衣继续在 iOS 8 的舞台上默默的演绎着曾经的角色。但至少目前为止它依旧还是那个不二的选择。

如果你有任何疑问，欢迎在评论中留言讨论，或者在微博上 @饺子如何是好。

  1. 之所以不直接将 /n 插入到代码中，而使用手动 URL 编码后的 %5cn 是因为从 Javascript 到 URL Scheme 整个过程中进行了两次 URL 解码。如果直接使用 /n 的话，使用 encodeURIComponent编码后输出结果为 %5cn。在经过第一次解码后直接回到了原型 /n，无法继续第二次解码。↩