如何为你的 Web 应用制作一个书签工具(Bookmarklet)

浏览器按钮（书签工具）是类似简单浏览器插件的快捷方式。它们的优点包括：

• 快速安装：只需将链接添加到书签
• 便捷：在当前页面上使用功能
• 易编写：书签工具就像制作网页一样；无需编写整个浏览器插件
• 跨浏览器：同一个书签工具可以在 IE、Firefox、Opera 和 Safari 中工作。

以下是我经常使用的一些书签工具：

• Delicious 按钮：标记网页（对于没有 delicious 工具栏的浏览器，如 Opera 和 Firefox 3 很有用）
• 谷歌翻译：一键翻译当前页面
• InstaCalc 书签小工具：在任何网站上打开实时计算器

它有多简单？

只有一种方法可以知道。试试这里的instacalc书签工具：

• 点击此链接： instacalc 书签小工具.
• 页面角落会打开一个计算器。输入 1 + 1 查看结果。
• 选中这段文本 15 mph in fps 然后再次点击链接。瞧！文本自动插入。
• 点击红色“x”关闭窗口

很整洁吧？无需安装，只需点击即可。要保存书签工具，右键单击链接并“添加到收藏夹/书签”。现在你可以在任何页面上打开计算器了。

今天我们将剖析书签小工具的解剖结构，拆解几个案例，并为你提供构建自己书签小工具的工具。

书签工具(Bookmarklet)入门

普通书签（又称收藏夹）只是要访问的位置，比如“http://gmail.com”。 书签小工具是JavaScript代码 书签小工具是浏览器在当前页面上运行的代码，它们以“javascript:”而非“http:”标记。

点击书签小工具时，可以想象页面作者编写了 <script>bookmarklet code here</script> ——它几乎可以做任何事情。但有一些限制：

• 长度限制：大多数 URL 限制在 2000 个字符左右，这限制了你可运行的代码量。有一种绕过方法。
• 不允许空格：某些浏览器无法处理 URL 中的空格，所以你的代码看起来像这样。我们对此也有一个技巧。

一个简单的书签小工具看起来像这样：

<a href="javascript:alert('hi');">my link</a>

点击 此链接 查看效果。这个例子不算太疯狂，但关键在于 书签工具(Bookmarklet)允许你在现有页面上运行代码。

你想做什么？

你的书签小工具应该做一些有用的事情。想法包括：

• 转换当前页面。 执行查找/替换、高亮某些单词或图像、更改 CSS 样式……
• 打开/覆盖新页面。打开一个新页面或在当前页面上绘制一个窗口，比如侧边栏
• 发送数据到另一个站点。发布、分享或上传当前 URL 或选中的文本（如谷歌翻译）。
• 查看 书签小程序 目录 获取更多灵感。

人们大部分时间都花在其他网站上。Web应用程序作者们，请创造性地思考：当用户离开你的网站时，他们如何使用你的服务？

用于书签工具(Bookmarklet)的 Javascript

书签小工具可以使用任何 JavaScript 命令，但某些特定的很有帮助：

获取当前页面标题： document.title 获取当前URL: location.href 获取当前选中的文本:

  // get the currently selected text
  var t;
  try {
    t= ((window.getSelection && window.getSelection()) ||
(document.getSelection && document.getSelection()) ||
(document.selection &&
document.selection.createRange &&
document.selection.createRange().text));
  }
  catch(e){ // access denied on https sites
    t = "";
  }

使文本URL安全： encodeURIComponent(text) （以及相应的 decodeURIComponent()）。页面标题或URL可能包含无效字符（空格、斜杠等），因此好的习惯是在发送前对它们进行编码（空格变成%20等）。

拆解 Delicious 书签工具(Bookmarklet)

以下是delicious书签小工具的代码（为可读性添加了空格）：

javascript:location.href='http://del.icio.us/post?v=4;
url='+encodeURIComponent(location.href)+';
title='+encodeURIComponent(document.title)

以下是发生的过程：

• 更改为新 URL（以发布该项目）
• 为当前文档的 URL (location.href) 和标题 (document.title) 指定查询参数
• 使用 encodeURIComponent 使参数对 URL 安全

一旦你标记并保存了帖子，delicious会将你发送到原始页面。他们怎么知道在哪里？因为它在原始请求中被发送了！

书签工具(Bookmarklet)界面设计思路

想象一下： 你的用户正在浏览猫的照片（或美国化学学会的期刊，但 可能是 lolcats）时，点击你杀手级的Web 2.0书签小工具。会发生什么？

常见的技术有：

• 将用户带到新页面。 希望你能使用当前页面的某些数据，否则它就是一个普通书签。
• 在当前页面周围加框，如谷歌翻译或 Stumbleupon。这与第一种技术类似，但你的网站在窗口内显示旧页面。
• 叠加一个新界面。 使用 CSS 绝对定位 在固定位置创建窗口，或 固定定位 让窗口随滚动跟随。注意 CSS 的 bug。

覆盖窗口很棒，但不会很难塞进一行吗？

核心技巧：动态 Javascript(Dynamic Javascript)

如果只是想将用户重定向到另一个页面（比如 delicious bookmarklet），直接使用 JavaScript 就可以。但当你需要更复杂的界面时，无空格、2000 字符的限制就很麻烦。

有一个解决方法：我们的书签小工具变成一个 存根(stub) 来加载另一个（常规）JavaScript 文件。以下是代码（添加了空格以便阅读）：

javascript:(function(){
  _my_script=document.createElement('SCRIPT');
  _my_script.type='text/javascript';
  _my_script.src='http://mysite.com/script.js?';
  document.getElementsByTagName('head')[0].appendChild(_my_script);
})();

它的工作原理如下：

• 定义一个匿名函数来下载脚本
• 创建一个 script 元素，类型 text/javascript。我们不能使用 var _my_script 因为空格的原因，所以选择一个唯一的名称。
• 将脚本的src设置为我们的真实JavaScript文件。这个文件也可以拉取更多的JavaScript。
• 添加 script 元素到当前页面

就这样！我们的书签小工具现在可以加载我们想要的任何 JavaScript，没有烦人的限制。额外好处：可以看到有多少人在使用你的工具，并且我们可以在服务器上更改脚本（修复 bug 或添加功能）。

拆解 Instacalc 书签工具(Bookmarklet)

以下是我创建 instacalc 书签小工具的步骤：

创建书签工具界面

我创建了一个 精简页面 为书签小工具设计的。如果点击页面，它会全屏显示，但会调整大小为父容器的大小。我计划将这个页面托管在一个较小的 iframe 中。

创建存根书签工具

因为我想要获取当前选中的文本并覆盖一个界面，我知道我的 JavaScript 不能只限于 2000 字符。所以我使用了上面的动态 JavaScript 技术来获取 真正的 JavaScript 文件.

谨慎缓存

我不想缓存书签小工具的 JavaScript，以防我想改变它的行为（但我确实缓存了 其他文件）。我使用添加了一个虚假的查询参数 Math.random()，这会强制浏览器每次下载该文件。由于脚本很小，这不算太大的问题。

instacalc_script.src='http://static.instacalc.com/gadget/instacalc.bookmarklet.js?x='+(Math.random());

构建界面

该脚本 构建界面非常简单。有一些用于编码的辅助函数（instacalc 使用 base64 存储数据）。脚本获取选中的文本，构造 iframe 的 URL，并加载它。它生成 CSS 使窗口固定在屏幕右上角，并有一个隐藏窗口的按钮。

一个小技巧：如果书签小工具在同一页面再次运行，它只会显示现有窗口，而不是创建新的 iframe。

技巧与诀窍

在制作书签小工具时谨记：

使其友好. 不要打断用户的操作流程。在同一页面或关闭新页面时弹出窗口。如果必须重定向，请将用户带回原始页面。

这一点很重要：用户好心使用你的服务，所以把他们放回原处！

使其快速. 等工作正常后，用以下技巧调整书签小工具的速度。

• HTTP 缓存
• gzip 压缩
• JavaScript 优化

给用户提供说明. 书签小工具并不常见，所以帮助人们理解你的工具。一些说明（"right click this link and add to bookmarks/favorites"）和截图会大有帮助。

陷阱：跨域通信

由于跨域安全限制，你的书签工具不能使用花哨的Ajax技术与你的网站通信。最简单的通信方式是通过URL中的查询参数。

调试

编程哪能没有bug？使用 用 Firefox 调试 你的JavaScript和CSS。不必每次都点击书签工具，只需创建一个直接运行JavaScript文件的页面： <script src="...">。这就是书签工具所做的。

一旦测试页面正常工作，尝试在其他网站上使用你的书签工具。你会惊讶于其他CSS规则如何破坏你精心定位的元素（记住，你是在另一个网站的上下文中运行）。

链接与资源

我相信你会想出疯狂的方式来使用这个新玩具。主要好处是安装简单、兼容性好，并且能够与当前页面交互。

• 存在 压缩工具 使你的JavaScript对书签工具友好。但最好直接动态加载真正的脚本，一劳永逸。

• 人们已经将 加强版 Delicious 书签小工具，例如让你在点击按钮之前在URL中输入标签。

• 更进一步， Greasemonkey 是一个Firefox插件，允许你运行非常强大的脚本。例如，有一个脚本在Gmail的“删除”按钮可用之前就添加了它。

玩得开心。

本系列其他文章

1. Ruby on Rails 入门：我希望当初就知道的事
2. Rails 进阶：理解模型(Model)、视图(View)和控制器(Controller)
3. Javascript 简明而全面概述
4. 使用 JSON 交换数据
5. 如何为你的 Web 应用制作一个书签工具(Bookmarklet)