前一段日子，我寫了兩個Bookmarklet----"短網址生成"和"短網址還原"。
它們用起來很方便，除了我本人之外，其他朋友也在用。第一次釋出Bookmarklet，就能有使用者，我挺滿意的。
下面就是我整理的《Bookmarklet編寫指南》，供自己和需要的朋友參考。
====================================================
Bookmarklet編寫指南
阮一峰 編寫
一、什麼是Bookmarklet？
Bookmarklet是一個複合詞，由Bookmark（書籤）和-let（小的）構成，中文可以譯成"書籤工具"。
它在形式上與"書籤"一樣，都儲存在瀏覽器收藏夾裡。但是，它不是一個以"http://"開頭的網址，而是一段Javascript程式碼，以"javascript:"開頭。點選之後，會對當前頁面執行某種操作。
它通常在網頁中以連結的形式出現，就像下面這樣：
<a href="javascript:alert('hi');">xxx</a>
使用者直接把這個連結拖到位址列或收藏夾就可以用了。
二、Bookmarklet的優點
它有幾個很顯著的優點，其他技術難以取代：
1. 安裝快速
Bookmarklet的安裝，就是在收藏夾中儲存一段程式碼，一步就能完成。所有瀏覽器都原生支援。
2. 使用方便
用的時候，點一下這個連結就行了。
3. 開發容易
一段Javascript程式碼就是Bookmarklet的所有內容，不需要用到其他技術，比開發一個瀏覽器外掛簡單多了。
4. 跨瀏覽器
所有瀏覽器都支援Bookmarklet。如果寫的正確，同樣一個Bookmarklet在各種瀏覽器上都能正常使用。
三、Bookmarklet的編寫規則
1. 必須以"javascript:"開頭
瀏覽器把"javascript:"當做協議看待。有了它，瀏覽器才知道要用javascript解釋後面的程式碼。它的作用等同於將程式碼放在<script></script>之間執行。
2. 所有程式碼必須在同一行
因為瀏覽器把Bookmarklet當做網址儲存，而網址是不能分行的，所以Bookmarklet也不能分行。
另一方面，網址是有長度限制的。IE的最長網址不能超過2083個字元（IE6不能超過508個字元），這也就是Bookmarklet的最長長度。壓縮工具可以幫忙減少長度，但是使用下面提到的連線外部程式碼的方法，可以避開這個限制。
3. 使用單引號
根據Javascript的語法，單引號（'xxx'）和雙引號（"xxx"）都能使用。但是由於html語言主要使用雙引號，所以Bookmarklet優先使用單引號。萬一遇到必須使用雙引號的情況，就採用它的URL編碼形式"%22"。
4. 不要汙染全域性變數
Bookmarklet最好不要生成新的全域性變數，可以採用直接執行匿名函式的方式：
javascript: (function(){...})();
上面式子的第一個括號，定義了一個匿名函式；最後一個括號表示立即執行這個匿名函式。所有的變數都是匿名函式的內部變數，不會生成任何新的全域性變數。
如果必須設定全域性變數，就取罕見的變數名（比如hd8ki2），防止與已經存在的全域性變數同名。
5. 對文字和URL進行編碼
為了防止出現非法字元，程式碼以外的文字都應該使用encodeURIComponent()函式進行編碼，比如把空格變成%20。
四、Bookmarklet的編寫技巧
1. 獲取網頁資訊
獲取當前頁面的標題：document.title。
獲取當前頁面的URL： location.href。
獲取當前選中的文字：
var t;
t = (function(){
if (window.getSelection){
return window.getSelection().toString();
}else if(document.getSelection){
return document.getSelection();
}else if (document.selection){
return document.selection.createRange().text;
}
return '';
})();
2. 防止重新整理頁面
如果程式碼對頁面有改動（比如使用了document.write），瀏覽器就會用一個新頁面替換原有頁面。所以最好用void()命令，把語句放在裡面。
舉例來說，下面這個Bookmarklet會導致原頁面被一個新頁面替代：
javascript:document.links[0].href='http://www.ibm.com/';
加上void以後，頁面就不會跳轉了：
javascript:void(document.links[0].href='http://www.ibm.com/');
3. 框架（frameset）
對於使用"框架"（frameset）的網頁，那些需要操作頁面的Bookmarklet一般不起作用。所以，如果發現網頁使用了框架，就告訴使用者Bookmarklet無法使用。
if(frames.length > 0)
alert('對不起，不適用於框架。');
else{
/* 正常情況的程式碼 */
}
但是，上面的程式碼有一個問題，那就是行內框架iframe也包含在frames.length之中，所以必須排除iframe的影響。
if(frames.length >
document.getElementsByTagName('iframe').length)alert('對不起，不適用於框架。');
else{
/* 正常情況的程式碼 */
}
4. 連線外部javascript程式碼
有時，Bookmarklet必須再引入外部的Javascript程式碼，這就需要為當前頁面新增一個script標籤。
javascript:(function(){
var script=document.createElement('script');
script.setAttribute('src',
'http://path/to/external/file.js');document.getElementsByTagName('head')[0]
.appendChild(script);})();
5. 新增外部函式庫
如果Bookmarklet需要用到外部函式庫，就必須把它也加進來。但是，前提是必須先檢查一下，看看原頁面是否已經載入了這個函式庫。
下面以載入jQuery為例：
if (!window.jQuery) {
script=document.createElement( 'script' );
script.src='http://ajax.googleapis.com/
ajax/libs/jquery/1/jquery.min.js';script.onload=foo;
document.body.appendChild(script);
} else {
foo();}
function foo() {/* ... */
}
五、延伸閱讀
* Kalid Azad, How To Make a Bookmarklet For Your Web Application
* Troels Jakobsen, Rules for Bookmarklets
* Troels Jakobsen, Tips for Writing Bookmarklets
* Siddharth, Create Bookmarklets - The Right Way
* 2ality, Implementing bookmarklets in JavaScript
（完）