书签小工具生成器：把 JavaScript 变成 Bookmarklet

如何使用这个书签小工具生成器

1. 给书签起个名字，把 JavaScript 粘贴到代码框里；也可以点击载入“页面标题”示例，先看一个完整的例子。开头的 javascript: 可写可不写，生成器会先把它去掉，再加上自己的。
2. 点击生成书签小工具。生成的网址会显示在下方，并标明它有多少个字符。
3. 把深色按钮拖到书签栏上。如果书签栏是隐藏的，请先在浏览器的“查看”菜单或设置里把它打开。
4. 打开任意网页，点击这个书签。脚本会针对该页面运行一次。

在本页点击这个按钮不会有任何反应，这是有意为之：书签小工具是用来在你正在阅读的页面上运行的， 而不是在生成器自己的页面上运行。

书签小工具到底是什么

书签小工具（Bookmarklet）就是一个普通的浏览器书签，只不过它的地址以 javascript:开头，而不是 https:。打开一个页面，点击这个书签，浏览器不会跳转到别处，而是在当前页面上运行你的脚本。 它适合做与页面相关的小操作：复制格式化好的引用、切换阅读视图、提取选中的文字，或者把当前网址交给另一项服务去处理。 书签小工具不需要安装扩展、不申请任何权限，和其他链接一样放在书签栏里。

如何把 JavaScript 转成书签小工具

手动转换一段脚本只需要三步，而生成器会替你全部完成。下面是一段两行的脚本，以及它变成书签小工具之后的样子：

const n = document.links.length;
alert(n + ' 个链接');

javascript:(()%3D%3E%7B%0Aconst%20n%20%3D%20document.links.length%3B%0Aalert(n%20%2B%20'%20%E4%B8%AA%E9%93%BE%E6%8E%A5')%3B%0A%7D)()

1. 把代码包进函数

工具会把你的代码放进一个立即执行的箭头函数 (() => { … })() 里。这样你的变量就不会与页面中已有的变量冲突， 还有第二个原因同样重要：当 javascript: 网址里的代码最后得到一个字符串值时，浏览器会用一个显示该字符串的新文档替换整个页面。 块体函数不会返回任何内容，所以页面保持原样。如果手写，传统的做法是在代码开头加上 void。

2. 做百分号编码

浏览器在使用任何网址之前，都会先去掉其中原始的制表符和换行符，因此直接把多行脚本粘贴进书签，会被压成一行。 这时一条 // 注释就会吞掉它后面的所有内容，依靠换行分隔的语句也会连在一起。编码会把每个换行变成 %0A， 这样就能保留下来；浏览器在运行前会再次把代码解码。编码同时也保护了空格、双引号、% 和 #。 中文字符也会被编码为 UTF-8 的百分号序列，所以示例输出里的“个链接”变成了 %E4%B8%AA%E9%93%BE%E6%8E%A5。

3. 加上 javascript: 前缀

javascript: 协议告诉浏览器：把地址里剩下的部分当作脚本来运行。最终得到的字符串， 就是你要拖到书签栏、或粘贴进书签的内容。

如何安装书签小工具

在电脑上

在 Chrome、Edge、Firefox、Safari 或其他任何桌面浏览器里，把深色按钮拖到书签栏上即可。如果拖放不方便， 就点击复制书签网址，新建一个书签，再把网址粘贴到它的地址栏位里。

在 iPhone、iPad 和安卓手机上

手机浏览器没有可以拖放的书签栏，所以请用编辑的方法：

1. 点击复制书签网址。
2. 收藏任意一个页面，本页也可以。
3. 打开书签列表，编辑刚才新建的书签，把它的地址替换成复制的 javascript: 网址，顺便给它改个名字。
4. 前往你想运行它的页面。在 iPhone 或 iPad 的 Safari 中，从书签列表里打开这个书签。在安卓版 Chrome 中，请在地址栏输入书签的名称，再点选出现的书签建议；从书签界面打开会离开当前页面，脚本就没有可作用的对象了。

不要粘贴到地址栏里

这看起来像个捷径，但 Chrome 会有意把粘贴到地址栏中的文字开头的 javascript: 去掉， 目的是防范那些诱骗人们粘贴恶意代码的骗局。剩下的部分会被当作搜索词处理。把代码保存为书签，才是可靠的做法。

可以直接粘贴的书签小工具示例

下面每个示例都只用到标准的浏览器 API。把其中一个粘贴到上方的代码框，点击生成书签小工具，再安装即可。

把当前页面复制成 Markdown 链接

弹出一个已选中链接的输入框，直接复制即可。

prompt('Markdown 链接：', '[' + document.title + '](' + location.href + ')');

统计你选中的字数

先选中文字，再点击书签小工具。

const chars = String(getSelection()).replace(/\s+/g, '').length;
alert('已选中 ' + chars + ' 个字符');

让页面变成可编辑状态

再点一次即可关闭编辑；刷新页面会恢复原样。

document.designMode = document.designMode === 'on' ? 'off' : 'on';

在 Wayback Machine 中打开当前页面

列出你所在页面的历史存档版本。

location.href = 'https://web.archive.org/web/*/' + location.href;

书签小工具的常见用途

书签小工具为什么不起作用

网站的安全策略把它拦住了

如果一个书签小工具在大多数网站上都能用，只在某一个网站上毫无反应，请查看该网站的内容安全策略（Content-Security-Policy）。 CSP 规范指出，页面的策略不应干扰书签小工具，但在 script-src 规则严格的页面上，浏览器仍然可能拦截javascript: 网址。如果书签小工具要从其他域名注入脚本，影响就有两层：即便它运行了， 页面的策略仍决定那个外部脚本能否加载。书签小工具本身无法绕过这一点。如果你一定要在这样的网站上运行脚本， 可以改用浏览器扩展或用户脚本。

页面变成了只有一段文字的空白页

你的代码最后得到了一个字符串值，所以浏览器把它显示成了一个新页面。请去掉任何会返回文字的return。如果书签小工具是你手写的，在这里重新生成一次就会把它包进函数， 这样结尾的字符串表达式就不会再替换整个页面了。

什么都没发生，也没有报错

打开浏览器的开发者控制台，再点击一次书签小工具。语法错误、缺失的元素和被拦截的脚本，都会在那里报告。 手工制作的书签小工具里，常见原因是一条 // 注释和其余代码落在了同一行，用原始源码重新生成就能解决。

如何编辑已有的书签小工具

复制书签的地址，去掉开头的 javascript:，再用网址编码与解码工具（英文页面）解码其余部分， 就能还原出可读的代码。修改完成后，把代码粘贴进这个书签小工具生成器，再用新的网址替换旧书签的地址。 把原始源码保存在一个文本文件里，可以省去这一来一回的功夫。

安全须知

书签小工具拥有与页面自身脚本相同的权限：页面暴露出来的任何内容，它都可以读取和修改。安装之前请先检查代码； 避免使用会加载远程脚本的片段，因为别人控制的网址在你安装之后仍可能被改动；也不要在含有敏感信息的页面上运行来历不明的书签小工具。 如果某个网站、消息或视频要求你把代码粘贴到书签或地址栏里，请把它当作骗局。

书签小工具、用户脚本和扩展的区别

这三者看起来相似，解决的却是不同的需求。书签小工具是一段在你点击时、只在一个页面上运行一次的脚本， 无需安装，还会随你的书签一起同步。用户脚本（由用户脚本管理器管理）会附着在匹配的网站上， 可以在每次访问时自动运行，并在页面之间保存自己的设置。浏览器扩展能做到前两者的一切， 还能做更多，比如后台任务、网络请求拦截和工具栏图标，代价是需要安装，以及浏览器会预先向你展示的广泛权限。 页面的安全策略对扩展的处理也不同：CSP 规范提到，Chrome 会努力保证由扩展发起的注入不受页面策略影响。 建议先从书签小工具开始，碰到它的局限时再升级。

局限：什么时候不该用书签小工具

书签小工具只在你点击时运行，而且一次只作用于一个页面。它无法在两次访问之间保存状态、无法在后台工作， 也无法自动修改每一个页面。长度很少是问题，因为 Chrome 文档中标明的网址长度上限是 2 MB， 但脚本一长，书签网址就变得无法阅读，到了那个规模，用户脚本管理器或扩展会更容易维护。 书签小工具所做的改动，刷新后也会消失：如果你想要下次打开时仍然在的高亮， 请参阅如何在任何网页上高亮文字并保留下来（英文文章）。 而且，如果你要做的是“一键保存这个页面”，而不是“运行一段代码”， 专门的浏览器扩展可以做到，不需要你自己维护代码。

隐私：你的代码去了哪里

哪里也没去。名称、代码片段和生成的网址都不会离开本页，生成书签小工具的过程中没有任何网络请求。 需要老实说明的一点是：做好的书签小工具会像普通书签一样保存，所以如果你在多台设备之间同步书签， 这段脚本会随其他书签一起同步，任何能读取该同步资料的程序都能看到它。

相关工具与指南

上面的 Markdown 链接书签小工具一次只复制一个链接；如果要把整个页面的 HTML 转成 Markdown， 请使用 HTML 转 Markdown 转换器（英文页面）。如果你复制的链接里满是追踪参数，网址清理工具（英文页面）可以帮你去掉它们。想不写任何脚本就保存和处理网页， 可以看看 Marqly 的网页高亮工具、Chrome 书签管理器和第二大脑工作流（均为英文页面），也可以阅读如何整理书签这篇指南（英文）。