使用小书签扩展浏览器功能

2019-05-22 22:40

#Chrome #UI #ES6

在我日常的生活与开发中，浏览器扮演了十分重要的角色。有些时候，我需要扩展浏览器的功能来满足自己的需求。这些需求大多比较琐碎，找不到合适的插件，这个时候，就轮到本文的主角 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

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

结语

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