网页收藏夹小技巧：bookmarklet 一个你不知道的技术
收藏栏
浏览器的收藏栏是一个特别好用地方，可以用来对书签进行管理，通常位于浏览器窗口的顶部或底部。它允许用户快速访问常用的网页或书签，非常类似于桌面上的快捷方式，使得用户能够更快速方便地浏览和访问网页。
收藏栏中的书签可以是用户自己添加的，也可以是浏览器默认提供的。用户可以通过单击书签栏中的书签来打开一个网页，也可以将网页添加到书签栏中以便快速访问。除此之外，用户还可以在书签栏中创建文件夹来组织和管理自己的书签。
在大多数浏览器中，收藏栏可以通过在浏览器菜单中选择“书签”或“收藏夹”来打开。用户可以在收藏栏中添加、编辑、删除书签，也可以通过拖拽等方式对书签进行管理和排序。
bookmarklet
浏览器收藏栏基本用于收藏网页，但除了支持网页收藏栏还可以支持别的协议，比如用浏览器打开本地一个文件也能收藏。除了浏览器的收藏栏通常可以收藏以下类型的协议：
- HTTP 和 HTTPS：这是浏览器中最常见的协议类型，用于访问和显示网页。
- FTP：FTP（File Transfer Protocol）是一种用于文件传输的协议，也可以在浏览器中打开和访问。
- JavaScript：JavaScript 是一种常用的脚本语言，在浏览器中也可以将 JavaScript 代码片段添加到收藏栏中，用于执行特定的操作或运行脚本。
- Data：Data URL 是一种用于在网页中嵌入图片、CSS 样式等数据的协议，也可以在浏览器中将其添加到收藏栏中。
- Mailto：Mailto 是一种用于发送电子邮件的协议，将其添加到收藏栏中可以快速打开默认邮件客户端。
- News 和 NNTP：这些协议用于访问新闻组和新闻服务器，也可以在浏览器中添加到收藏栏中。
- Telnet：Telnet 是一种用于远程登录到计算机的协议，也可以在浏览器中打开和使用。
其中收藏栏可以直接打开 JavaScript 是比较厉害的一点，因为 JS 可以动态操作网页，这项技术就是 bookmarklet。
bookmarklet 的含义
Bookmarklet是由 Bookmark（书签） 和 Applet（小程序） 组合而来。bookmarklet可以翻译为——书签小程序。
javascript 协议
就像 http:、file:、ftp: 一样，JavaScript 协议是以 JavaScript 开头——javascript。
同样的 javascript: 不仅能用在 <a> 标签的 href 属性中，同样也能直接放入浏览器的地址栏运行，不过为了安全性，现在大多数浏览器都是直接禁止在地址栏中执行 JS 代码，例如执行一个 hello world—— javascript:'hello, world'; 在 Safari 浏览器中表现为：
但是浏览器并没有在收藏栏禁止执行 JS，我们可以利用这个特性来完成一些神奇的事情，例如在线翻译、搜索引擎优化、页面分析、自定义样式等。
一切都应该从最简单的开始，我们先来一段打招呼的代码：
javascript:(function(){alert("Hello Bookmark")})()
打开浏览器，添加书签。
随便打开一个网址，然后点击书签运行添加的代码，就能看到效果了。
bookmarklet 书写规范
因为写的 bookmarklet 代码需要在浏览器的 URL 中运行，所以一些最佳实践让你注意。
- 避免变量的污染：Bookmarklet 本质上是一段 JavaScript 代码，因此书签中的代码应该被包含在一个匿名函数中，避免污染全局变量名，。
- JavaScript 压缩：因为 URL 是有大小限制的，所以你应该页限制 bookmarklet 的大小，因此书签中的 JavaScript 代码应该尽可能压缩和精简，以减小书签的大小，同时在书签中使用的变量名应该尽量短小。
- 编码转换：由于 bookmarklet 中的代码可能包含特殊字符，因此需要将其进行编码转换，以保证在各种浏览器中都能正常运行。最好使用 encodeURIComponent() 函数进行编码，当然你也可以选择 Base64。
bookmarklet 能做的基本上浏览器的插件系统都能做，但 bookmarklet 能加轻量和方便，可以用来作些简单的本地插件，毕竟发布到 Chrome 商城需要 5 美元的认证费用。
自定义 bookmarklet 图标（favicon）
当您为网站添加书签时，书签列表中会出现一个简洁的小图标以及网站名称。浏览器默认会使用网站图标作为书签的图标。但是，小书签没有域，只有一个位置（就是小书签本身），将小书签添加到书签工具栏时，它通常没有图标或只是采用浏览器的默认书签图标。
通过上面我们知道，如果想修改 CSS 自定义 favicon 是不可能的了：
<link rel="shortcut icon" href="favicon.ico">
<link rel="icon" type="image/png" href="icon.png">
可以换一个方法实现自定义 favicon，打开浏览器的书签管理器，找到 导入书签/导出书签，先导出书签为 HTML 文件，修改完 HTML 文件在导入书签。
修改 HTML 文件，HTML 内容很简单，比如收藏的 git ready 网站：
<DT><A HREF="http://gitready.com/" ADD_DATE="1598153156">git ready</A>
编辑器打开搜索下书签的名字，然后添加 ICON 属性，值为 base64 编码的图片，我给 git ready 添加了一个黄黄色三角形：
<DT><A HREF="http://gitready.com/" ADD_DATE="1598153156" ICON="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj48cG9seWdvbiBwb2ludHM9IjEwLDgwIDUwLDIwIDkwLDgwIiBmaWxsPSIjRkZENzAwIiAvPjwvc3ZnPg==">git ready</A>