Bookmarklet: 让网页浏览更强大

Bookmarklet是一个书签(bookmark)，这个书签的内容是一段JavaScript脚本。点击这个书签，可以注入JavaScript到当前页面，从而可以作为一个插件使用。

Bookmarklet的开发

注入JavaScript代码

通常是通过一个匿名函数注入JavaScript代码。这样做的目的是防止注入的脚本有返回值。如果有返回值的话，浏览器会被重定向到返回值所指向的页面，而这通常不是我们所期望的。

javascript:(function(){alert('hi')})()

通常是赋值语句会造成bookmarklet的返回值。对于较短的语句，也可以使用void语句。比如：

javascript:void(document.links[0].href='http://noyesno.net/');

注入JavaScript文件

有两个可能的原因会让开发者希望注入JavaScript文件而不是直接代码。

• 浏览器对Bookmarklet字符长度的限制
• 便于管理和更新脚本内容

javascript:
(function(){
  var js=document.createElement('script');
  js.type='text/javascript';
  js.charset='utf-8';
  js.src='http://noyesno.net/.../file.js';
  document.body.appendChild(js);
}
)()

注入jQuery

你的脚本要用到jQuery API，而原页面可能已经包含了jQuery，又或者你想直接引用某些CDN上的jQuery脚本。对此，主要是解决两个问题：

1. 检查jQuery是否已经加载
2. 在自己的代码被执行之前加载jQuery

javascript:
if (typeof jQuery == 'undefined') {
  var js = document.createElement('script');
  js.type = 'text/javascript';
  js.onload=my_main_func;
  js.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js';
  document.body.appendChild(js);
} else {
  my_main_func();
}

function my_main_func() {
  // ...
}

一些有用的Bookmarklet

• 网页计算器
• Delicious 添加书签
• ...

TODO

参考资源

• Bookmarklets - Browser Power
• Bookmarklet Builder