那么小书签里像是乱码的代码倒底是什么？小书签里的JS代码是经过编译转码的，所以看上去有很多符号像乱码一样，但是可以借助JS美化工具来得到其真实的代码。以"谷歌站内搜索" 小书签为例，经过美化的代码便易于理解了。

使用方法：将小书签拖入书签栏，点击即可使用。

javascript:alert('Bookmarklets!')

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


例1：生成当前网页二维码
api.qrserver.com提供了生成二维码的API ”https://api.qrserver.com/v1/create-qr-code/?size=300x300&data="，在 "=" 后加上文字或者网址就会生成一个二维码了。

文本二维码比如："https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=进来的是SB，哈哈哈哈"，你的朋友圈里是不是也经常有让你扫描二维码进群可以领红包，结果发现是恶搞的这样的戏码？
网址二维码比如："https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=https://www.runningcheese.com/" 生成的二维码是奶酪的博客首页。这种形式非常地常见，比如地铁里的广告，海报里的手机购物等等。

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. 最后更新：2017-02-07，第5次更新