任意網頁載入jQuery：書籤小工具產生器 / Load jQuery from Bookmark: Bookmarklet Generator
書籤小工具(bookmarklet)是一種可以在任意網頁上執行預先寫好的JavaScript程式碼的做法。舉例來說，當你想要用console來撰寫jQuery語法來調整資料顯示結果時，卻發現該網站並沒有載入jQuery函式庫，這時候就可以用書籤小工具來為這個網頁載入jQuery函式庫，讓網頁工程師更方便到處測試。
我把載入jQuery函式的書籤小工具做成了書籤小工具產生器。除了預設的「Load jQuery」書籤小工具之外，你也可以自訂書籤小工具的名稱與JavaScript程式腳本的內容。讓我們來看看怎麼使用這個書籤小工具吧。
書籤小工具產生器 / Bookmarklet Generator
- 開啟新視窗
- GitHub保存庫：HTML5 Bookmarklet Generator
書籤小工具產生器是JavaScript撰寫而成的網頁，可在瀏覽器上直接執行。全部程式碼都保存在GitHub保存庫裡面。書籤小工具的樣式使用了Semantic UI。JavaScript程式碼清理中加入了註解清理的設計，這段程式碼加入了JAMES PADOLSEY所寫的「Removing comments in JavaScript」，我把它整理過後獨立為removeComments.js，未來可供其他JavaScript程式碼整理時使用。
使用說明 / Instruction
以下說明書籤小工具的安裝與使用方法。如果你是JavaScript程式設計師，對於書籤小工具有點概念的話，也可以使用書籤小工具產生器來製作自己的書籤小工具。以下就來看看怎麼操作吧。
安裝書籤小工具 / Bookmarklet Installation
書籤小工具的安裝方式，就是把書籤小工具的連結(長得像是按鈕一樣)拖曳到書籤列即可。書籤列是Google Chrome的用詞，Firefox稱之為書籤工作列、Internet Explorer稱之為我的最愛列、Safari稱之為書籤。如果你的瀏覽器沒有看到書籤列，可以看看各瀏覽器的操作說明來開啟書籤列：
使用書籤小工具 / Bookmarklet Usage
以下我以「Load jQuery」這個書籤小工具來介紹用法。
這個網頁有一張表格。如果我們想要取得表格中第二欄的電子信箱，把他存成一個字串陣列的話，那要怎麼做好呢？
如果你熟悉jQuery語法的話，一定知道你可以用jQuery輕鬆完成這個工作。但是當你打開console，試著執行$的時候，會發現Google Chrome給你的訊息是：
> $
ƒ $(selector, [startNode]) { [Command Line API] }這個意思是，這個網頁裡面並沒有包含jQuery函式庫。這個$是指Google Chrome原生的簡單工具。
這時候，「Load jQuery」書籤小工具就派上用上了。請點一下書籤列上的「Load jQuery」書籤小工具，然後你就會發現console中執行$的訊息改變了：
> $
ƒ ( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
// Need init if jQuery is called (just allow error to be thrown if not included)
return new jQuery.…這就是jQuery已經順利載入的狀態。
這樣我們就能用jQuery輕鬆取出email囉。
自訂書籤小工具 / Customize Bookmarklet
如果你是網頁設計師，希望製作一個自己使用的書籤小工具，那可以用書籤小工具產生器下面的Configuration來做進階的設定。
例如我想要做一個可以讓網頁背景變成粉紅色的書籤小工具，那它的程式碼如下：
// Load jQuery
var s=document.createElement('script');
s.setAttribute('src','//code.jquery.com/jquery.js');
document.getElementsByTagName('body')[0].appendChild(s);
// Wait for loading jQuery
setTimeout(function() {
// Set <body> background color pink
$("body").css("background-color", "pink")
}, 3000)然後書籤小工具的名稱就命名為「Pink Background」吧。
讓我們安裝好之後執行看看：
點下去過3秒後，網頁背景果然變成粉紅色了。這樣子自己做的書籤小工具就完成囉。
自動執行JavaScript的作法：擴充功能 / Customize JavaScript for the Website
書籤小工具的特色是使用者必須要手動安裝書籤小工具、手動按下書籤小工具，書籤小工具的程式才能執行。如果你想要讓特定網站執行特定的JavaScript，那就得仰賴瀏覽器的擴充套件了。
在Google Chrome上有個好用的擴充套件：User JavaScript and CSS。它可以讓使用者自行為特定網址執行固定的JavaScript跟CSS。這部分僅給熟悉JavaScript跟CSS的人使用，詳細設定我就不介紹了。
結語 / Conclusion
我很久以前就已經在書籤上安裝了載入jQuery的書籤小工具，不過最近在用別人電腦時，赫然發現沒有這個書籤小工具真的很不方便。上網搜尋一下，介紹如何建立書籤小工具的教學很多，但是並沒有已經建好、能夠方便直接安裝的載入jQuery書籤小工具。所以最後我就乾脆自己做好了。
那麼這次的書籤小工具產生器的教學就到這裡了。你還知道其他好用的書籤小工具嗎？你都使用什麼書籤小工具呢？歡迎在下面的留言處跟我們分享你的想法。如果你覺得我這篇教學寫的不錯的話，請幫我在AddThis分享工具按讚、將這篇分享到Facebook等社群媒體吧！感謝你的耐心閱讀，讓我們下一篇見。
