奔跑中的奶酪

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

奔跑中的奶酪奔跑中的奶酪 2018/10/26
298054 77

导读

bookmarklets
很多时候，我们为了一个很小的功能而不得不安装一个拓展，但我们也知道，过多的拓展就会导致浏览器变慢，而且拓展的开发是开发者们的事，一般用户没办法自定义拓展的功能，只能有什么就用什么。

有一种叫「小书签 Bookmarklet」的书签应用正好弥补了拓展的不足。它无需安装，不会对浏览器速度造成任何的影响。它和普通的书签一样被放到书签栏里，只需要点击一下就可以实现各式各样的功能，比如生成二维码，生成短链接，阅读模式等等功能，算得上是“屠龙宝刀，点击就送”。

一、如何使用小书签？

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

1、在 Firefox 浏览器上使用小书签

以「B站视频解析」为例，除了打开书签栏点击小书签外，我们可以为小书签设置一个关键词，在浏览器地址栏输入关键词 bbd（bbd 表示 bilibili download），回车，就可以解析下载 Bilibili 视频了。同理，将「网页另外为PDF」设置关键字为 "pdf"，就可以快速调用小书签了。

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

2、在 Chrome 浏览器上使用小书签

因为 Chrome 浏览器不支持书签设置关键词，所以在 Chrome 上使用小书签，除了在书签栏上点击小书签外，我们还可以在 chrome://settings/searchEngines 上手动添加，设置关键字后就可以调用小书签了。

各种骚操作，中文网最全 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次更新。



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

相关文章

评论：

77 条评论，访客：72 条，站长：0 条
  2. 奔跑中的奶酪
    奔跑中的奶酪发布于： 
    回复 ♥赞1

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

  3. Shadowplay
    Shadowplay发布于： 
    回复 ♥赞5

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

  4. 独木桥
    独木桥发布于： 
    回复 ♥赞7

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

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

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

  5. 小黄葱
    小黄葱发布于： 
    回复 ♥赞3

    最近发现某社区喜欢把文本(如邮箱等)信息用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)()

  6. 奔跑中的奶酪
    奔跑中的奶酪发布于： 
    回复 ♥赞5

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

    • 七寸
      七寸发布于： 
      回复 ♥赞3

      没有用 , 提示 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)};
      });

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

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

  7. 七寸
    七寸发布于： 
    回复 ♥赞4

    帮忙转换成 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
    “`

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

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

      • 七寸
        七寸发布于： 
        回复 ♥赞3

        恩, 我是说把小书签改成 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 扩展

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

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

发表评论