奔跑中的奶酪

各种骚操作，中文网最全 Bookmarklet 小书签

奔跑中的奶酪奔跑中的奶酪 2018/10/26
37.28W 85

导读

bookmarklets

我们知道，微信里面有一个微信小程序的功能，它可以不用安装就能使用，非常方便。其实在浏览器里也有类似的应用，它的名字叫做「小书签」Bookmarklet，而且比微信小程序还早了近 20 年。

作为一项远古神技，知道它的人可能还不到10%，10个人里面只有 1 个人知道，但在关注了奶酪的人群里，这个比例可能高达70%。因为奶酪前后历经 5 年，更新了14次，整理了中文网最全的小书签合集，今天它迎来了最新版本的更新。

一、什么是小书签？

小书签又名 Bookmarklet，由英文单词 Bookmark 和 Applet 组合而来，也就是书签小程序的意思。简单地说，小书签就是把一段带有特定功能的 JavaScript 代码保存到收藏夹，当你需要的时候，点击它可以实现这段 JavaScript 代码的功能。

小书签无需安装，也就不会对浏览器速度造成任何的影响，它和普通的书签一样放到书签栏里，只需要点击一下就能实现各式各样的功能，比如生成二维码，生成短链接，阅读模式等等功能，算得上“屠龙宝刀，点击就送”。

那小书签如何使用呢？

以「视频解析下载」为例，除了用鼠标点击小书签外，我们还可以为小书签设置一个关键字，然后只需要在地址栏输入关键字 “dl”（dl 意为 download）就可以一键解析下载视频了。

同理，将「VIP视频解析」设置关键字为 "vip"，也可以快速调用这个小书签。（PS：如果遇到地址栏输入关键字后弹出空白页的情况，则需要按住 Alt 键再按回车）。

各种骚操作，中文网最全 Bookmarklet 小书签

Chrome 浏览器不支持书签设置关键字，但我们可以在“搜索引擎管理器”中设置，同样在地址栏里输入关键字就可以一键调用小书签了。

各种骚操作，中文网最全 Bookmarklet 小书签

二、中文网最全小书签合集

使用方法：将小书签拖入书签栏，点击即可使用。（文末附打包下载）

 

  1. VIP视频免费观看，测试页面：点这里
  2. 视频解析下载，除优酷外，支持国内大多数视频网站。
  3. 视频解析下载(优酷)，暂时没做成小书签，需要手动输入地址。
  4. 随机打开网站，网站被墙，需要科学上网。
  5. 查找网站RSS源，任意有RSS的网站都可使用，测试页面就用奶酪的博客吧
  6. 网页另存为PDF，可惜有水印。
  7. 弹出软键盘，如题。
  8. WP一键留言， 需要修改成自己的名字，邮箱和内容。测试页面：点这里。
  9. 摧毁网站，加载可能较慢。
  10. 网页地震，让网页抖动起来。
  11. 网站涂鸦，可以涂鸦后再截图。
  12. 显示当前时间，如题。
  13. 今年还剩多久?，如题。
  14. 查看浏览器UA，如题。
  15. 显示网页最后更改时间，如题。
  16. 百度云直链，去百度网盘调用百度云管家，实现直链下载。
  17. 百度网盘提取码自定义，使用方法：点这里。
  18. 购物·购物党，不用多说，购物比价，测试页面：点这里。
  19. 购物·如意淘，如上。
  20. 购物·惠惠购物，如上。
  1. 自动滚屏，按Esc键停止。
  2. 自动刷新，支持自定义时间。
  3. 阅读模式，进入阅读模式。
  4. 夜间模式，降低网页亮度，再次点击取消。
  5. 高亮关键词，如题。
  6. 简单记事本，生成一个记事本。
  7. 改变文字颜色，可以在小书签中修改颜色，支持HTML颜色值。
  8. 显示明文密码，去掉登录界面的密码星星，显示实际的密码。测试网站：点这里。
  9. 水平分屏浏览，需要输入另一个地址，不输入则是同一个网页。
  10. 垂直分屏浏览，如上。
  11. 限制网页宽度，如题。
  12. 关键词密度查询，如题。
  13. 给表格添加边框，给一些隐藏了边框的表格加上边框，方便查看。测试页面：点这里。
  14. 下拉菜单转列表，测试页面：点这里。
  1. 谷歌以图搜图，点击需要搜索的图片后进行以图搜图。
  2. 天眼以图搜图，如上。
  3. 显示丢失图片，如题。
  4. 移除所有图片，如题。
  5. 显示所有图片，如题。
  6. 修改背景图片，需要图片的地址。
  7. 显示背景图片，如题。
  1. 繁体转为简体，如题。
  2. 简体转为繁体，如题。
  3. 文本翻译为中文，如果粘贴板上有内容则翻译粘贴板上的内容，没有的话则需要输入文字进行翻译。
  4. 文本翻译为英文，如上。
  5. 有道全文翻译，页内全文翻译，国内最好用的全文翻译。
  6. 谷歌全文翻译，可以会比较慢地才显示翻译工具栏。
  7. 百度全文翻译，如题。
  8. 谷歌全文翻译，如题。
  9. 谷歌选词翻译，选定文本进行翻译，默认翻译成中文。
  10. 必应划词翻译，如题。
  11. 海词划词翻译，如题。
  12. 小D划词翻译，如题。
  13. 汉典划词解释，中文词典。
  14. 词霸划词翻译，如题。
  1. 编辑当前页面，可以对当前网页进行编辑，按Ecs键退出，什么支付宝余额修改然后截图装逼这种事实在太Low了。
  2. 解除选择复制限制，如题。
  3. 解除右键菜单限制，如题。
  4. 解除复制和右键限制，测试网页 点这里 或者 这里，可能是中文网页上唯一能用的解除限制小书签。
  5. 查看JS变量与函数，如题。
  6. 查看当前窗口大小，如题。
  7. 查看当前网页信息，会显示当前网页所有的JS和CSS文件。
  8. 查看网页Meta元素，如题。
  9. ASCII码对照表，如题。
  10. 生成HTML表格，如题。
  11. FireBugLite，Firebug精简版。
  12. PrintWhatYouLike，对网页的内容进行删减，然后进行打印。
  13. 屏幕尺子，V系列Firefox用户需要暂时停用Grab and Drag拓展。
  14. 字体查询，速度可能比较慢，点击网页指定文本就会显示是什么字体了。
  15. 地形图查看，如题。
  16. 网页测量工具，如题。
  17. RGB to Hex，如题。
  18. Hex to RGB，如题。
  19. 216种标准色，如题。
  1. IP地址查询，如题。
  2. SEO查询，网站SEO情况综合查询。
  3. WOT查询，查询网站是否是可信赖。
  4. Alexa查询，网站流量全球综合排名。
  5. Whois查询，网站所有者信息查询。
  6. Buildwith查询，查询网站用什么程序和主题建成的。
  7. W3C Link查询，检查网站所有的链接。
  8. W3C CSS查询，检查网站CSS是否存在错误。
  9. W3C Html查询，检查网站HTML是否存在错误。
  10. 网站收录查询，如题。
  11. 反向链接查询，如题。
  12. 网站时光机，需要科学上网，想知道优酷网在2008年8月8日长什么样就需要这个功能了。
  13. 打开速度检测，如题。
  14. 正常访问检测，联接不稳定，可能需要科学上网。。。。
  15. 网站易用性评估，如题。
  16. 网站黑名单检测，如题。
  17. 网站安全评级，如题。
  18. 网站病毒扫描，如题。
  19. 网站SSL检测，如题。
  20. 头部信息检测，如题。
  1. 分享当前页面，见过最好的网页分享小书签，会根据网页的语言自动优先显示什么样的分享网站，支持网站搜索。
  2. 分享当前页面(中文)，如上，专注于中文网站的分享。
  3. 收藏到Evernote，如题。
  4. 收藏到Onenote，如题。
  5. 收藏到百度相册，如题。
  6. 收藏到百度云，如题。
  7. 收藏到云笔记，如题。
  1. 小书签生成器1，小书签制作生成器，如果你掌握了一些JS知识，制起来就很容易了。
  2. 小书签生成器2，如上。
  3. 小书签生成器3，如上。
  4. 小书签调试工具，如题。
  5. 小书签合并工具，如题。
  6. 小书签转chrome拓展，如题。
  7. Quix，超级小书签，功能很多。

    8. 值得一提：

    网站w-shadow.com是一个能提供小书签一键化合并的网站。假定我们已经知道了"解除选择复制限制" 和 "解除右键菜单限制"， 但实际操作过程中需要这两个小书签同时运行，借助网站的合并功能可以同到小书签"同时解除复制和右键限制"的小书签。(可能是目前网上唯一能用的解除复制和右键限制小书签。)
    使用方法：[参考这里] 。

    解除复制和右键限制小书签是否生效测试网站：测试网站1 测试网站2

    可能需要的Javascript知识：
    Core JavaScript 1.5 Guide
    JavaScript.com
    JavaScript FAQ
    W3CSchool

为什么在一些网页，点击小书签后没有反应？
在一些严格加密的https网页里，浏览器默认启用了 CSP （内容安全策略） ，禁用了跨站脚本，而小书签本身就是脚本，故而小书签不起作用了。解决方法是禁用 CSP，但这么做可能会引起一些安全隐患，如果你不是“高级玩家”，不建议这么做。

Firefox 的解决方法是在 about:config 中将 security.csp.enable 设置为 false，刷新后即可使用。启用小书签后可再将 security.csp.enable 设置为 true，重新启用CSP安全组策略。

三、如何制作小书签？

那小书签里像是乱码的符号倒底是什么呢？小书签里的 JavaScript 代码是经过编译转码的，所以看上去有很多符号，像乱码一样，我们可以借助转码工具来得到它原来的代码。以"谷歌站内搜索" 小书签为例，经过转码美化的代码便易于理解了。
各种骚操作，中文网最全 Bookmarklet 小书签

有了上面的理解，我们就可以编辑和制作小书签了， 小书签的实质其实就是一段JavaScript代码，其格式就是："javascript: + 一段JS代码"，好比这一段最简单的小书签代码：

javascript:alert('Bookmarklets!')

试试复制并粘贴到地址栏中或者 点击这里运行，下面我们再举多几个例子。

 

例1：生成当前网页二维码

api.qrserver.com提供了生成二维码的API ”http://qr.topscan.com/api.php?w=250&text="，在 "data=" 后加上文字或者网址就会生成一个二维码了。

文本二维码比如："http://qr.topscan.com/api.php?w=250&text=进来的是SB，哈哈哈哈"，你的朋友圈里是不是也经常有让你扫描二维码进群可以领红包，结果发现是恶搞的这样的戏码？

网址二维码比如："http://qr.topscan.com/api.php?w=250&text=https://www.runningcheese.com" 生成的二维码是奶酪的博客首页。这种形式非常地常见，比如地铁里的广告，海报里的手机购物等等。

文本二维码

各种骚操作，中文网最全 Bookmarklet 小书签

网址二维码

各种骚操作，中文网最全 Bookmarklet 小书签

1. 根据 jiathis.com 的二维码的API和JavaScript相关知识，我们可以得到这样的js代码：

window.open('https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=' + decodeURIComponent(gBrowser.currentURI.spec));

后面的decodeURIComponent(gBrowser.currentURI.spec) 是一个变量，意思是当前网页的地址。

2. 注意此时的代码是js代码，还并不是小书签的代码，经过小书签特有的以javascript:开头的格式转换后，可以得到：

javascript:window.open('https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=' + decodeURIComponent(location.href));void(0);

3. 如果小书签代码里有"#"或者空格等特殊字符时，传递参数时会被截断，小书签也有就不起作用了，因此我们需要借助URL转码工具对代码进行编码，得到：

javascript:window.open('https://api.qrserver.com/v1/create-qr-code/?size=300x300&data='%20+%20decodeURIComponent(location.href));void(0);

4. 将其保存到书签后就成功完成了小书签的制作。举一反三，再比如生成当前网页地址的短网址API是 "http://tinyurl.com/create.php?url="，我们只需要将上面的小书签代码稍稍改写一下就可以得到生成当前网页短网址小书签了：

javascript:window.open('http://tinyurl.com/create.php?url='%20+%20decodeURIComponent(location.href));void(0);

 

例2：当前网页中加载一条现成的.js文件

平时我们访问一些网站时，选中文字会自动触发"复制"，"搜索"或者"翻译"等功能，其原理是该网而加载了一条用于"复制"，"搜索"或者"翻译"的.js文件，根据这个思路，我们可以将这些功能移植到其他的网页上去。

1. 以沪江网划词翻译的js文件为例，在网页中加载一条.js文件的js代码是：

(function() {var element=document.createElement('script'); element.setAttribute('src', 'http://dict.hjenglish.com/app/js/dict_ajax.js'); document.body.appendChild(element);})

2. 把js代码转化为小书签代码后得到：

javascript:void((function() {var element=document.createElement('script'); element.setAttribute('src', 'http://dict.hjenglish.com/app/js/dict_ajax.js'); document.body.appendChild(element);})())

3. 将其保存到书签就完成了小书签的制作。

4. 举一反三，我们只需要更改 "http://www.某网站.com/某文件.js" 文件地址就可以了。比如同文堂简体转化为繁体的.js文件是 http://tongwen.openfoundry.org/src/bookmarklet/bookmarklet_tw.js，再比如有道全文翻译的.js文件是 http://fanyi.youdao.com/web2/seed.js

 

例3：如何小书签将繁体中文的网页全部自动变成简体中文？

如上面所说，有一些专门的翻译js文件做成小书签后，需要手动点击才会启用，那如何自动启用翻译js文件呢？我们可以利用“用户脚本”来实现，用户脚本拓展推荐使用 Violentmonkey。以在拓展中加入如下代码即可，原理就是自动加载这个js文件。

// ==UserScript==
// @name Auto Simplified Chinese
// @namespace no
// @description 自动将网页翻译为简体中文
// @run-at document-idle
// @require https://git.oschina.net/runningcheese/JiathisQR.js/raw/master/bookmarklet_cn.js
// @grant none
// @include https://www.runningcheese.com/*
// ==/UserScript==
(function() {
var s = document.createElement('script');
s.setAttribute('src', '@require');
document.body.appendChild(s);
})()

 

例4：如何让网页自动加载某个小书签？

小书签和用户脚本效果相同，但小书签是手动的，用户脚本是自动的，我们可以将小书签改写成用户脚本，方法是：

// ==UserScript==
// @name 从小书签改写到用户脚本
// @namespace none
// @description 从小书签改写到用户脚本
// @run-at document-idle
// @grant none
// @include https://www.runningcheese.com/*
// ==/UserScript==
location.href = "javascript:(function(){alert('Hello Cheese!');})();";

也就是把小书签的地址替换上面代码中双引号之间的内容，javascript:(function(){alert('Hello Cheese!');})(); 这一段。一些比较复杂的小书签无法直接用替换双引号之间内容的方法，因此我们还是需要借助URL转码工具对小书签的内容进行解码。

结尾

  1. 奶酪制作、修复和收集了可能是国内最全的小书签合集。同时为了方便识别，html文件也都已经添加上了icon图标。
  2. 关注 公众号（ID：runningcheese01）回复关键字“小书签”即可获取“HTML版小书签”。
  3. 最后更新：2019-08-07，第10次更新。
  4. 首次更新：2015-11-25，第1次更新。



注：本文由 奔跑中的奶酪 作者：奔跑中的奶酪 发表，其版权均为作者所有，如需转载，请注明作者名字以及文章来源。
♥赞95
avataravatar…

相关文章

评论：

85 条评论，访客：80 条，站长：0 条
  1. John
    John发布于： 
    回复

    文章写得真棒，学习到了很多东西

  2. Spencer
    Spencer发布于： 
    回复

    用上定制版浏览器了,真香!非常感谢!

  3. 一个平凡人
    一个平凡人发布于： 
    回复

    在微信公众号中获取的小书签合集打包，我刚刚试了一下，有很多已经失效了。请博主有空的时候更新一下，谢谢。

    • 小白
      小白发布于： 
      回复

      大大有的已经失效了，肯能是chrome更新的原因，比如翻译类的繁体转简体都没反应

  4. leet
    leet发布于： 
    回复

    自动滚屏按esc也不停

  5. 孙宇博客
    孙宇博客发布于： 
    回复

    来参观一下，欢迎回访

  6. jarkingas
    jarkingas发布于： 
    回复

    有没有 点击一下书签把自定义文本复制到剪切版的

  7. 社ge
    社ge发布于： 
    回复

    很棒。

  8. 奔跑中的奶酪
    奔跑中的奶酪发布于： 
    回复

    是不是用了 GreenChrome ? 要取消勾选“处理弹出菜单”选项，这个原因导致的。

  9. Shadowplay
    Shadowplay发布于： 
    回复

    把奶酪的小书签 放到自己javascript:void(0)的chrome浏览器上 一点就about:blank 没效果 求指导

  10. 独木桥
    独木桥发布于： 
    回复

    二维码分享只能分享文字或输入的内容。有时会遇到分享图片的内容怎么用二维码呢！

    • 奔跑中的奶酪
      奔跑中的奶酪发布于： 
      回复

      API + 图片链接。比如：https://api.qrserver.com/v1/create-qr-code/?size=图片链接，上传图片的方法参考：https://www.runningcheese.com/sharing

  11. 小黄葱
    小黄葱发布于： 
    回复

    最近发现某社区喜欢把文本(如邮箱等)信息用base64加密后分享,想到可以用小书签还原原本的信息;
    于是东拼西凑了一份替换选中文本为base64解密后的文字的小书签;
    迫于不懂js,仍有限制(如不能替换输入框中的文本,不支持中文),不知能否指导小弟,完成这个小书签
    替换函数出处:https://www.jianshu.com/p/991a1204660e
    小书签如下:
    varjavascript:(function()%7Bvar%20t%3D((window.getSelection%26%26window.getSelection())%7C%7C(document.getSelection%26%26document.getSelection())%7C%7C(document.selection%26%26document.selection.createRange%26%26document.selection.createRange().text))%3Bfunction%20boldSelection(text)%20%7B%20if%20(document.selection)%20%7B%20var%20selecter%20%3D%20document.selection.createRange()%3B%20selecter.select()%3B%20var%20selectStr%20%3D%20selecter.text%3B%20%20selecter.pasteHTML(text)%3B%20%7D%20else%20%7B%20var%20selecter%3B%20if%20(window.getSelection())%20%7B%20selecter%20%3D%20window.getSelection()%3B%20%7D%20else%20%7B%20selecter%20%3D%20document.getSelection()%3B%20%7D%20selecter%20%3D%20document.getSelection()%3B%20var%20selectStr%20%3D%20selecter.toString()%3B%20if%20(selectStr.trim()%20!%3D%20)%20%7B%20var%20rang%20%3D%20selecter.getRangeAt(0)%3B%20var%20temp%20%3D%20document.createElement(‘b’)%3B%20rang.surroundContents(temp)%3B%20rang.deleteContents()%3B%20rang.insertNode(document.createTextNode(text))%3B%20%7D%20%7D%20%7DboldSelection(atob(”%2Bt))%7D)()

  12. 奔跑中的奶酪
    奔跑中的奶酪发布于： 
    回复

    在javascript前面有一个前双引号，在小书签后面也有一个后双引号，系统给删除了。

    • 七寸
      七寸发布于： 
      回复

      没有用 , 提示 Error found in settings: SyntaxError: missing ) after argument list

      mapkey(‘D’, ”, function() { gBrowser.loadURI(javascript:for(nIx5Bs=0;nIx5Bs<document.all.length;nIx5Bs++)%7Bif(document.all%5BnIx5Bs%5D.tagName==’A’)%7Bwith(document.all%5BnIx5Bs%5D.style)%7Bif(backgroundColor==’yellow’)%7Bvoid(backgroundColor=document.bgColor)%7Delse%7Bvoid(backgroundColor=’yellow’)%7D%7D%7D%7D)};
      });

      • 奔跑中的奶酪
        奔跑中的奶酪发布于： 
        回复

        语法错误，少了一个小括号，按照我给出的格式写。记得在javascript前面有一个前双引号，在小书签后面也有一个后双引号，系统给删除了。

  13. 七寸
    七寸发布于： 
    回复

    帮忙转换成 mapkey(‘F’, ‘高亮显示链接’, function() {
    });

    “` js
    javascript:for(nIx5Bs=0;nIx5Bs<document.all.length;nIx5Bs++)%7Bif(document.all%5BnIx5Bs%5D.tagName==’A’)%7Bwith(document.all%5BnIx5Bs%5D.style)%7Bif(backgroundColor==’yellow’)%7Bvoid(backgroundColor=document.bgColor)%7Delse%7Bvoid(backgroundColor=’yellow’)%7D%7D%7D%7D
    “`

    • 奔跑中的奶酪
      奔跑中的奶酪发布于： 
      回复

      下载奶酪提供的小书签文件，里面就有高亮显示链接的选项。

      • 七寸
        七寸发布于： 
        回复

        恩, 我是说把小书签改成 mapkey(‘F’, ‘高亮显示链接’, function() {
        javascript:for(nIx5Bs=0;nIx5Bs<document.all.length;nIx5Bs++)%7Bif(document.all%5BnIx5Bs%5D.tagName==’A’)%7Bwith(document.all%5BnIx5Bs%5D.style)%7Bif(backgroundColor==’yellow’)%7Bvoid(backgroundColor=document.bgColor)%7Delse%7Bvoid(backgroundColor=’yellow’)%7D%7D%7D%7D
        });

        用作 Chrome Surfingkeys 扩展

        • 奔跑中的奶酪
          奔跑中的奶酪发布于： 
          回复

          function() { gBrowser.loadURI(javascript:小书签);};

发表评论