聊聊小书签(Bookmarklet)

小书签就是一段 JavaScript 代码,保存在浏览器书签里,点击时会在当前页面中运行。相当于向页面注入 JS 代码。这么自由方便,可以用来完成许多事情。

它安装十分简单,我们只需要把代码放在链接的 href 属性里,然后用户将链接拖拽到书签栏即可(其实就是添加了一个书签)。

这么好的东西却又比较小众,可能因为玩这个的人还是比较少吧,所以写点东西,聊聊我对它的认识,也希望帮大家入门,发现它的强大、便捷和简单。


目录

  • 一、结构呀

  • 二、原理呀

  • 三、注意呀

  • 四、安装呀

  • 五、变通呀

  • 六、限制呀


惯例的,如果你喜欢这篇文章,请到这里扫码支持小老鼠(【老鼠的小书签们】),啊?!对,就是要钱的,知识付费什么的,如果反感,你可以不必往下阅读(发表奇怪的评论什么的,哼,老鼠会删除掉,就是这么的霸道)。


一、结构呀

javascript: 开头,后面写 JS 代码即可,简单的很,就比如:

javascript:alert('Hello World!')

二、原理呀

这个一般没人讲,老鼠太良心了,就说说吧。

其实这也是一种网址,javascript:http 或者 https: 或者 ftp: 什么的一样,就是一个协议名称,浏览器按着对应的协议来解读后面的内容。这种方式应用十分广泛,只是可能大家都没很在意。那么……thunder: 这个你就认识,迅雷下载地址的前缀,magnet:你也认识,磁力链的前缀。其实都差不多啦,就是说协议。

可能 javascript: 没那么常见吧,不过如果你了解一些前端知识,你也许会知道这种网址:data:image/jpg;base64,/9j/4AAQ……,这里的 data 也是一种协议(确切的说,这几种也未必算是协议,更像是描述后面是什么数据的……标签?!)。而且这种也可以作为小书签来用,甚至……也很强大,这个玩法就更加小众了,我如果有时间,会在最后讲一讲这个。

所以,这就是网址(或者说和网址同类型的东东)。

三、注意呀

总是要有些细节上与普通 JS 有点区别的。也不大,就是被格式限制而已。

因为网址中没有换行么,所以代码必须在一行,于是分号什么的就不能省略了。不过完全可以写完之后用代码压缩工具压缩一下啦,并不很麻烦。

如果想让大家方便安装,就要放在连接的 href 属性里,就会有一些符号冲突,比如 " 什么的,这个下面我提供一种解决方法。

然后尽量不要污染全局变量(也防止被全局变量污染),所以,我习惯使用立即执行的匿名函数:

javascript:(function(){ /* 这里写你的代码 */ })()

这个方法通用性很强,缺点是括号有点多,别搞乱了。

如果你的代码只有一行,也可以这么写:

javascript:void( /* 这里写你的代码 */ )

就简短一些,结构也清晰,不过一行代码么……手写似乎不太容易,不过某些代码压缩工具压出来的结果是满足要求的。

发现了么,如果需要注释,因为没有换行,所以无法使用 // 的方式进行注释,那样就把后面所有代码一起注释了,所以只能像上面一样使用 /* 注释 */ 这样。

四、安装呀

使用方便,书写简单,安装快捷。多好!

但是制作安装地址真的很烦,不用 " 就已经很烦了,还有一些其它符号可能冲突什么什么的。

我的方法是把代码写好,用 Node.js 读取文件,把文件内容放入变量,再把链接元素的 href 属性赋值为此变量,这样就不用考虑那些恼人的冲突了,比较方便(写个 Node.js 脚本就好)。

五、变通呀

道理都讲过了,写代码是另外的事情,不在这里说。

那么……为啥非得写 JS 呢,我不是抬杠,我只是说可不可以写别的呢?

对,上面说的 data:image/jpg;base64,/9j/4AAQ…… 这种也可以的,打开以后就是个图片,你看嘛,写的很清楚 imagejpg 就是图片嘛。但是这个就很死板,我们就不会觉得惊奇。

换个格式,data:text/html, 咱也不多解释,反正但凡看一眼也能猜到这个数据是 HTML 代码,那就跟前面说的小书签是 JS 代码差不多的意思吧。对,在这个结构后面写 HTML 代码就可以了。

于是就有了最简单的编辑器:

data:text/html, <html contenteditable>

contenteditable 这个属性不常用,说一下,就是让元素可编辑,这里只有一个 <html> 元素,并且可编辑。你说没有结束标签?浏览器会自动补充的,虽然平时这种自动补充不一定正确,但是只有一个标签还搞不定就太笨啦。

打开以后发现一片空白,但其实实可以在里面些东西的,很方便……(谁会用?!

对啊,这个就是为了最简短嘛。如果我们写的完整一点的话,完全可以通过 style 标签来加入样式。那我再用 script 标签加入 JS 代码来实现复杂功能好啦。就是写个网页而已,你们都懂的。

六、限制呀

好玩吧,但是限制也是挺明显的哦。

首先,不能包含换行(或者说换行会被忽略掉),这个对于 JS 影响最大。

然后,数据都写在网址里了,可是网址是有长度限制的。虽然我们一般只会用小书签写一些简单的功能,所以不太容易触碰到这个限制,但也要知道呀。就不能把整个 jQuery 文件写在里面,可能会出问题的。

但是长度问题可以通过引用外部文件来解决,就像我们平时引用其他脚本和样式文件一样。

不过,如果网页本身设置了 Content-Security-Policy 就不能方便的引用自己的文件了,这时候要用一些其他方法来绕过。

小书签还是要向着小巧便捷的方向,所以也不建议引用大段的外部文件,而简短的内容,当然是写在小书签里,没有额外的网络请求就更加稳定快速嘛。


看到这里了还不快去请老鼠喝咖啡,哼哼,对老鼠不好小心晚上梦见可怕的大猫猫

4赞

来个油🐒…

这可不容易,复杂度高好多的说