什么是书签小工具
我是平田。这是我的第一篇博客文章。先来总结一下最近我自己很热衷的书签小工具(Bookmarklet)。(如果你已经知道书签小工具是什么,只想了解制作方法,请直接从书签小工具的制作方法开始阅读。) 书签小工具是一种把简短的 JS 代码登记到浏览器书签中,通过点击就能执行的技术。它从互联网的萌芽时期就已经存在,直到今天几乎没怎么进化,但因为制作简单、用途广泛,所以非常方便。
只要在书签登记的 URL 开头加上 javascript:,然后写上 JS 代码,就可以在打开的网页上执行那段代码了。既可以通过浏览器的”添加新书签”菜单创建,也可以登记其他人以 a 标签形式公开的书签小工具。
书签小工具的例子
既然能在任意页面上执行自己喜欢的 JS 代码,自然能做的事情也非常多。已经有很多有志之士公开了实用的书签小工具。例如,
等等,搜索一下能找到很多。另外,在社交方面,Twitter 和 Facebook 官方也提供了能够快速分享当前页面的书签小工具。我推荐的书签小工具整理在这个页面上,欢迎查看。
书签小工具的制作方法
搜索能找到的书签小工具确实非常多,但用得多了,有时候会想要一些非常个性化、专属于自己的版本。特别是想把页面信息整理成特定格式再复制时,只要做好一次,之后就非常省事了。
STEP1. 编写 JS 代码
首先编写处理逻辑。为了不影响全局变量(避免影响页面已有的 JavaScript),需要采用所谓的匿名函数形式编写。
javascript:!function(undefined){
//在这里写任意处理逻辑
}();按上面这样的形式来编写。为了能作为书签小工具使用,要在开头加上 javascript: 字符串。
STEP2. 整理特殊字符,压缩成一行
要登记为书签小工具,代码必须经过压缩(没有换行)。可以使用 /packer/ 等工具压缩成一行。另外,(、& 等字符以及中文/日文基本上是不能直接使用的。所以压缩为一行后,使用类似URL 编码/解码工具进行 URL 转义(转换成特殊字符)。不过最近的浏览器环境似乎即便保留换行和中文/日文,大部分也能正常工作。
STEP3. 登记到浏览器
把 STEP2 中压缩 & 转义后的字符串作为新书签登记到浏览器中。各个浏览器的操作略有差异,但大体一致。以 Chrome 为例,右键点击书签栏,选择”添加网页”,然后在”名称:“栏填写任意书签名,在”URL:“栏粘贴刚才创建的代码,按”保存”即完成。
补充: 想使用 jQuery 的情况
通过在登记的 URL 中预先加载库的方式,jQuery 也是可以使用的。这样能更方便地获取页面 DOM,从而更容易抽取特定页面的元素。下面这个页面讲得很清楚。
迟来的书签小工具制作方法总结
补充: 把指定文本复制到剪贴板
这是书签小工具中非常常用的处理。要用 JS 把文本复制到剪贴板,可以利用 document.execCommand 方法。
document.execCommand - Web API 接口 | MDN
按下面这样写,就能将获取的字符串复制到剪贴板。
javascript:!function(undefined){
// 在这里写任意处理逻辑
!function(a){
var b = document.createElement('textarea'),
c = document.getSelection();
b.textContent = a, document.body.appendChild(b), c.removeAllRanges(), b.select(), document.execCommand('copy'), c.removeAllRanges(), document.body.removeChild(b);
}(/*在这里写要复制的字符串*/);
}();总结
对于多少能写一些 JS、jQuery 的人来说,书签小工具是非常方便,而且制作也很简单的工具。可能很多人会觉得”用浏览器扩展或插件不就行了吗?“,但和扩展不同,书签小工具在不使用时不会占用浏览器和内存资源,而且可以自由整理文件夹和命名,这是它的优点。如今 JavaScript 能做的事情已经非常多,可以使用 FileAPI 把页面信息汇总成 CSV 文件,也可以用 CANVAS 生成图像。如果运用得当,今后它一定能成为你工作中的强力助手。