:::

任意網頁載入jQuery:書籤小工具產生器 / Load jQuery from Bookmark: Bookmarklet Generator

簡報1

書籤小工具(bookmarklet)是一種可以在任意網頁上執行預先寫好的JavaScript程式碼的做法。舉例來說,當你想要用console來撰寫jQuery語法來調整資料顯示結果時,卻發現該網站並沒有載入jQuery函式庫,這時候就可以用書籤小工具來為這個網頁載入jQuery函式庫,讓網頁工程師更方便到處測試。

我把載入jQuery函式的書籤小工具做成了書籤小工具產生器。除了預設的「Load jQuery」書籤小工具之外,你也可以自訂書籤小工具的名稱與JavaScript程式腳本的內容。讓我們來看看怎麼使用這個書籤小工具吧。


書籤小工具產生器 / Bookmarklet Generator

書籤小工具產生器是JavaScript撰寫而成的網頁,可在瀏覽器上直接執行。全部程式碼都保存在GitHub保存庫裡面。書籤小工具的樣式使用了Semantic UI。JavaScript程式碼清理中加入了註解清理的設計,這段程式碼加入了JAMES PADOLSEY所寫的「Removing comments in JavaScript」,我把它整理過後獨立為removeComments.js,未來可供其他JavaScript程式碼整理時使用。


使用說明 / Instruction

以下說明書籤小工具的安裝與使用方法。如果你是JavaScript程式設計師,對於書籤小工具有點概念的話,也可以使用書籤小工具產生器來製作自己的書籤小工具。以下就來看看怎麼操作吧。

安裝書籤小工具 / Bookmarklet Installation

demo

書籤小工具的安裝方式,就是把書籤小工具的連結(長得像是按鈕一樣)拖曳到書籤列即可。書籤列是Google Chrome的用詞,Firefox稱之為書籤工作列、Internet Explorer稱之為我的最愛列、Safari稱之為書籤。如果你的瀏覽器沒有看到書籤列,可以看看各瀏覽器的操作說明來開啟書籤列:

使用書籤小工具 / Bookmarklet Usage

以下我以「Load jQuery」這個書籤小工具來介紹用法。

image

這個網頁有一張表格。如果我們想要取得表格中第二欄的電子信箱,把他存成一個字串陣列的話,那要怎麼做好呢?

image

如果你熟悉jQuery語法的話,一定知道你可以用jQuery輕鬆完成這個工作。但是當你打開console,試著執行$的時候,會發現Google Chrome給你的訊息是:

> $
ƒ $(selector, [startNode]) { [Command Line API] }

這個意思是,這個網頁裡面並沒有包含jQuery函式庫。這個$是指Google Chrome原生的簡單工具。

anime

這時候,「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已經順利載入的狀態。

image

這樣我們就能用jQuery輕鬆取出email囉。

自訂書籤小工具 / Customize Bookmarklet

如果你是網頁設計師,希望製作一個自己使用的書籤小工具,那可以用書籤小工具產生器下面的Configuration來做進階的設定。

image

例如我想要做一個可以讓網頁背景變成粉紅色的書籤小工具,那它的程式碼如下:

// 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」吧。

image

讓我們安裝好之後執行看看:

anime2

點下去過3秒後,網頁背景果然變成粉紅色了。這樣子自己做的書籤小工具就完成囉。


自動執行JavaScript的作法:擴充功能 / Customize JavaScript for the Website

書籤小工具的特色是使用者必須要手動安裝書籤小工具、手動按下書籤小工具,書籤小工具的程式才能執行。如果你想要讓特定網站執行特定的JavaScript,那就得仰賴瀏覽器的擴充套件了。

unnamed

在Google Chrome上有個好用的擴充套件:User JavaScript and CSS。它可以讓使用者自行為特定網址執行固定的JavaScript跟CSS。這部分僅給熟悉JavaScript跟CSS的人使用,詳細設定我就不介紹了。


結語 / Conclusion

我很久以前就已經在書籤上安裝了載入jQuery的書籤小工具,不過最近在用別人電腦時,赫然發現沒有這個書籤小工具真的很不方便。上網搜尋一下,介紹如何建立書籤小工具的教學很多,但是並沒有已經建好、能夠方便直接安裝的載入jQuery書籤小工具。所以最後我就乾脆自己做好了。


那麼這次的書籤小工具產生器的教學就到這裡了。你還知道其他好用的書籤小工具嗎?你都使用什麼書籤小工具呢?歡迎在下面的留言處跟我們分享你的想法。如果你覺得我這篇教學寫的不錯的話,請幫我在AddThis分享工具按讚、將這篇分享到Facebook等社群媒體吧!感謝你的耐心閱讀,讓我們下一篇見。

0 意見: