在我日常的生活与开发中,浏览器扮演了十分重要的角色。有些时候,我需要扩展浏览器的功能来满足自己的需求。这些需求大多比较琐碎,找不到合适的插件,这个时候,就轮到本文的主角 Bookmarklet (小书签或者书签小程序)出场了。

概念

简单来说,小书签就是一段 JavaScript 代码,它以书签的形式保存在浏览器中。这段代码拥有访问当前页面 DOM 的能力,所以通过编写 JavaScript 代码,我们就可以实现想要的功能。除了可以执行 JavaScript 以外,小书签和其他书签没有任何区别,它可以被编辑、修改、管理以及同步。

示例

最简单的小书签如下所示:

javascript:alert('hello')

通常我们会用 <a>href 属性来承载小书签代码:

<a href="javascript:alert('hello')"></a>

当浏览器遇到 javascript: 开头的协议时,会执行后面的代码,然后将返回结果做为新页面返回。有些时候,需要在不刷新页面的情况下更改当前页面,此时应使用 IIFE(立即调用函数表达式)将相关代码包裹起来,确保返回 undefined,页面就不会刷新了。

javascript:(function(){ /* TODO */ })() 

安装与使用

小书签的安装非常简单,有两种方法:

  1. 将承载小书签代码的 <a> 标签拖放到浏览器的书签栏中
  2. 通过菜单栏中的“书签”->“书签管理器”(以 Chrome 为例)添加新书签

第一种方法适用于从网上安装小书签(为了安全起见,请不要随意安装并运行网上不受信任的小书签),提供小书签工具的网站会用一个带有明显样式 <a> 标签提醒用户安装;第二种方法适用于自己开发的小书签,在书签添加页面填入小书签的名称和代码。两种方法的使用情况也不一定非要遵循上述规定,完全可以按自己的喜好来。
使用就更简单了,打开想要执行小书签功能的页面,点击小书签即可。

开发

没什么好说的,开发小书签就是用 JavaScript 编程。新建 JavaScript 文件,完成编码并测试通过后使用构建工具将代码压缩混淆为一行,并在最前面加在 javascript: 协议,可以使用 UglifyJS 来压缩混淆 JavaScript 代码。UglifyJS 是老牌的构建工具,使用方便,效果好,我们一直都用它:-)。目前现代浏览器对 ES6 的支持比较好,推荐用 ES6 编写小书签代码,通过 UglifyJS2(npm install uglify-es -g 命令安装)压缩混淆。

如果想要引入第三方代码,因为浏览器对 URL 有长度限制,直接把第三方代码打包到小书签代码中可能会导致小书签异常。这时可以用一种“曲线救国”的方式:在当面页面新建 <script> 标签,通过 src 属性引入第三方代码。

const scriptEl = document.createElement('script');
scriptEl.src = 'cdn/path/to/third-party.js';
document.body.append(scriptEl)

// TODO

如果要引入很多的第三方代码实现复杂的功能,应该用浏览器插件实现,“让专业的来”,小书签并不适用于这种场景。

结语

尺有所短,寸有所长。使用小书签并不意味着要抛弃浏览器插件,插件的强大功能小书签不能取代,小书签的灵活插件也无法比拟,在适用的范围下,合理使用两者,才会让浏览器如虎添翼,发挥真正的实力。