級(jí) 別： 中級(jí) 沈 銳 (shenrui@cn.ibm.com), 軟件工程師, IBM CSDL
2008 年 9 月 18 日 當(dāng)你在使用某個(gè) Web 應(yīng)用的時(shí)候，是否曾經(jīng)為Web應(yīng)用本身的設(shè)計(jì)缺陷或者靈活性的缺乏所帶來(lái)的不便而感到煩惱呢？是否有過(guò)給 Web 應(yīng)用的開發(fā)人員寫封郵件讓他們做些改善的沖動(dòng)呢？但很多時(shí)候，你不喜歡某個(gè) Web 應(yīng)用，也不是應(yīng)用本身的問題，例如一些顏色和樣式不符合你的口味，正所謂“眾口難調(diào)”。有沒有想過(guò)自己動(dòng)手將其他人開發(fā)出來(lái)的 Web 應(yīng)用定制成自己需要的模式呢？Greasemonkey 正是這樣一款幫助你實(shí)現(xiàn)“個(gè)性化”需求的軟件。本文將帶你進(jìn)入 Greasemonkey 的世界。 Greasemonkey 簡(jiǎn)介 Greasemonkey 是一款 Firefox 的擴(kuò)展。不同于其他 Firefox 擴(kuò)展之處在于，Greasemonkey 并非提供某種特定的功能（例如“下載”或者“標(biāo)簽”功能），而是提供一個(gè)可供用戶自己進(jìn)行開發(fā)的平臺(tái)。在 Greasemonkey 誕生之前，用戶只能“被動(dòng)”地使用 Web 應(yīng)用提供的特性，或者憑借 Web 應(yīng)用提供的有限的定制功能做一些個(gè)性化設(shè)置。Greasemonkey 的出現(xiàn)使用戶“主動(dòng)”對(duì) Web 應(yīng)用進(jìn)行個(gè)性化定制成為可能。所以，不得不說(shuō) Greasemonkey 的出現(xiàn)對(duì)改變?nèi)藗兪褂?Web 的方式具有“革命性”的意義。 安裝 Greasemonkey 之后，必須要安裝 User Script 才能具備特定的功能。所謂 User Script ，是一個(gè)用 Javascript 語(yǔ)言編寫的以 user.js 為后綴的文件，例如“ helloworld.user.js ”。因此只要你會(huì) Javascript ，你就有能力為 Greasemonkey 編寫 User Script。由于 Greasemonkey 運(yùn)行于本地環(huán)境，而且它提供了一些自己的 API ，從而 User Script 所能做的事情遠(yuǎn)遠(yuǎn)超出 Javascript 的范圍，比如數(shù)據(jù)的的持久化、本地文件的訪問以及在 Firefox 菜單欄上增加命令等等。 Userscripts.org擁有數(shù)以千計(jì)的 User Script 。該網(wǎng)站為 Greasemonkey 的愛好者提供了一個(gè)很好的分享和交流的平臺(tái)。 Greasemonkey 的安裝及使用 安裝 Greasemonkey - 打開該鏈接 https://addons.mozilla.org/en-US/firefox/addon/748， 然后點(diǎn)擊“ Add to Firefox ”按鈕。
圖 1. 點(diǎn)擊“ Add to Firefox ”按鈕
- 在彈出窗口中，點(diǎn)擊“ Install Now ”按鈕。
圖 2. 點(diǎn)擊“ Install Now ”按鈕
- 點(diǎn)擊“ Restart Firefox ”按鈕。
圖 3. 點(diǎn)擊“ Restart Firefox ”按鈕
此時(shí)，在您的 Firefox 右下角會(huì)出現(xiàn)一個(gè)小猴子圖標(biāo) ， 這表明 Greasemonkey 已經(jīng)安裝成功，并且處于“激活”狀態(tài)。點(diǎn)擊該圖標(biāo)，圖標(biāo)變成灰色 ， 此時(shí)，Greasemonkey 處于“非激活”狀態(tài)。 安裝 User Script 新建 User Script Greasemonkey 提供了一個(gè)簡(jiǎn)單的窗口幫助你新建 User Script。你可以通過(guò)“ Tools > Greasemonkey > New User Script ...”打開該窗口。
圖 7. 新建 User Script 窗口
該窗口中的輸入，只有 Name 和 Namespace 是必填的（關(guān)于每個(gè)輸入的含義，詳見“教你編寫第一個(gè) User Script”部分）。填寫完畢后，點(diǎn)擊“ OK ”按鈕，F(xiàn)irefox 會(huì)用外部文本編輯器打開如下文件（如果是第一次，Greasemonkey 會(huì)讓你指定文本編輯器程序），接著您就可以在已經(jīng)生成好的元數(shù)據(jù)基礎(chǔ)上繼續(xù)編輯了。
圖 8. samplescript.user.js
此時(shí)，打開 User Script 管理窗口（Tools > Greasemonkey > Manage User Script ...），“sample script”已被創(chuàng)建。 另外一種創(chuàng)建 User Script 的方式是直接在本地創(chuàng)建一個(gè)后綴為 user.js 文件，然后將其拖拽到 Firefox 中進(jìn)行安裝（也就是前文中提到的“本地安裝”方法）。 管理 User Script 點(diǎn)擊“ Tools > Greasemonkey > Manage User Script...”打開 User Script 管理窗口。
圖 9. User Script 管理窗口
在該窗口中，您可以： - 改變 User Script 的“活動(dòng)”狀態(tài)
- 配置 User Script 的 Included Pages 和 Excluded Pages 屬性
- 卸載 User Script
- 點(diǎn)擊“ Edit ”按鈕打開外部文本編輯器直接修改 User Script
教你編寫第一個(gè) User Script 不知道你是否已經(jīng)厭倦了 developerWorks 的白色背景？總是面對(duì)同樣的一種樣式，任何人都會(huì)厭倦的。好吧，讓我們來(lái)編寫一個(gè)可以改變 developerWorks 背景色的 User Script 。 第一步：新建一個(gè) User Script
創(chuàng)建 User Script 的步驟請(qǐng)參見“新建 User Script ”部分。在“新建 User Script 窗口”輸入如下內(nèi)容：
Name: dW Customizer
Namespace: http://www.ibm.com/developerworks/cn/
Description: 該腳本用于定制 developerWorks 中國(guó)網(wǎng)站文章的背景色
Includes: http://www.ibm.com/developerworks/cn/*
第二步：編寫腳本邏輯
完成第一步后，您應(yīng)當(dāng)已經(jīng)用文本編輯器打開了 User Script 。請(qǐng)將下面的內(nèi)容拷貝到您的腳本中（注意：從“// ==/UserScript==”以下開始粘貼）：
var myBgColor='beige'
//定制頁(yè)面背景色
addGlobalStyle('body {background-color:'+myBgColor+'}');
//修改左邊內(nèi)容導(dǎo)航條背景色
addGlobalStyle('td.left-nav-highlight, tr.left-nav-child-highlight td
{background:'+myBgColor+' none repeat scroll 0%;vertical-align:top;}');
//修改“反饋意見”按鈕下TD的背景色
var tds = document.evaluate(
"http://td[@bgcolor='#ffffff']",
document,
null,
XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
null);
for (var i = 0; i < tds.snapshotLength; i++) {
td = tds.snapshotItem(i);
td.style.backgroundColor=myBgColor;
}
// 在head中添加style
function addGlobalStyle(css) {
var head, style;
head = document.getElementsByTagName('head')[0];
if (!head) { return; }
style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = css;
head.appendChild(style);
}
|
第三步：驗(yàn)證結(jié)果
點(diǎn)擊該鏈接《使用 AppFuse 快速構(gòu)建 J2EE 應(yīng)用》，您將看到此時(shí)文章的背景色已經(jīng)是米色，而不再是一貫的白色。如果您沒有看到所述的效果，可以到本文 “下載”部分下載安裝完整的dw_customizer.user.js以核對(duì)檢查是否您的 User Script 有什么錯(cuò)誤。 下面對(duì)該 User Script 做些解釋。
User Script 開頭的部分是對(duì)元數(shù)據(jù)的定義。它告訴 Greasemonkey 該 User Script 的名字、命名空間、描述以及何時(shí)應(yīng)該運(yùn)行該 User Script 。下面我們一一對(duì)它們做詳細(xì)講解。 | 如何調(diào)試 User Script?
簡(jiǎn)單的答案是您如何調(diào)試 Javascript，就如何調(diào)試 User Script，因?yàn)楸旧?User Script 就是 Javascript 編寫的。我常用的方法是： - Firebug
相信有經(jīng)驗(yàn)的 Javascript 開發(fā)者都不會(huì)對(duì) Firebug 感到陌生。Firebug 是一款 Firefox 的擴(kuò)展，通過(guò)它您可以監(jiān)視、編輯、調(diào)試網(wǎng)頁(yè)中的CSS、HTML已經(jīng)Javascript代碼。對(duì)于 User Script 開發(fā)，F(xiàn)irebug是一個(gè)必不可少的工具。 - GM_log
這是一個(gè) Greasemonkey 提供的記錄日志的方法。您只需要寫“GM_log('my message');”，就會(huì)在 Firefox 的 Javascript 控制臺(tái)中看到日志信息“my message”。它比 alert 函數(shù)要好，因?yàn)槟粫?huì)總要去點(diǎn)“確定”按鈕關(guān)閉 alert 窗口。但有時(shí)，對(duì)于一些簡(jiǎn)單應(yīng)用，用 alert 函數(shù)也不失為一種簡(jiǎn)單有效快速的方法。 當(dāng)然，除此之外，還有其他的一些 Javascript 測(cè)試工具，例如 JSUnit，也可以用來(lái)調(diào)試 User Script 。 | | - @name
顧名思義，這是 User Script 的名字。它會(huì)出現(xiàn)在 Greasemonkey 的窗口中，包括安裝和管理的窗口。
可選，如果不指定，默認(rèn)為 User Script 的文件名（不包含后綴 .user.js）。 - @namespace
User Script 的命名空間，它用于區(qū)別同名但卻是“不同”的 User Script 。通常它的值是一個(gè)URL。
可選，如果不指定，默認(rèn)為下載該 User Script 的網(wǎng)站域名。 - @description
User Script 的描述信息，告訴使用者該 User Script 會(huì)做些什么事情。
可選，如果不指定，默認(rèn)為空。但是處于從方便管理 User Script 的角度出發(fā)，建議填寫 User Script 描述。 - @include
@include 告訴 Greasemonkey 該 User Script 應(yīng)當(dāng)在哪些 URL 對(duì)應(yīng)的網(wǎng)頁(yè)上運(yùn)行?！?”的意思是匹配所有字符。例如，“http://www.ibm.com/developerworks/cn/*”指該 User Script 會(huì)在所有 developerWorks 中國(guó)的網(wǎng)頁(yè)中運(yùn)行。如果您將本例中的 @include 改成“http://www.ibm.com/developerworks/cn/java/*”，那么它將只對(duì) Java 專區(qū)的文章生效。
可選，如果不指定，默認(rèn)值為“*”，也就是所有站點(diǎn)。 - @exclude
@exclude 則是告訴 Greasemonkey 要排除哪些網(wǎng)頁(yè)。您可以嘗試著將本例的元數(shù)據(jù)改成如下： // ==UserScript==
// @name dW Customizer
// @namespace http://www.ibm.com/developerworks/cn/
// @description 該腳本用于定制 developerWorks 中國(guó)網(wǎng)站文章的背景色
// @include http://www.ibm.com/developerworks/cn/*
// @exclude http://www.ibm.com/developerworks/cn/java/*
// ==/UserScript==
|
那么，該 User Script 將會(huì)在所有除了 Java 專區(qū)以外的 developerWorks 中國(guó)的網(wǎng)頁(yè)中運(yùn)行。從該例中，您也可以看出，@exclude 優(yōu)先于 @include。另外，@include 和 @exclude 都可以被聲明多次（一個(gè)聲明是單獨(dú)的一行）。Greasemonkey 將根據(jù)所有的聲明確定該 User Script 運(yùn)行范圍。
可選，如果不指定，默認(rèn)為不排除任何網(wǎng)頁(yè)。 至于元數(shù)據(jù)定義之后的代碼則是純粹的 Javascript ，不過(guò)這里我們還是簡(jiǎn)單地解釋一下。
addGlobalStyle 是一個(gè)用于向 head 中添加樣式定義的函數(shù)。第一個(gè)對(duì) addGlobalStyle 函數(shù)的調(diào)用添加了對(duì) body 背景色的樣式定義。該語(yǔ)句運(yùn)行后，頁(yè)面背景已經(jīng)變成我們指定的顏色：米色。但是你會(huì)發(fā)現(xiàn)左邊的內(nèi)容導(dǎo)航欄的背景色仍然是白色 － 這讓整個(gè)頁(yè)面很不協(xié)調(diào)。所以，在指定 body 背景色的語(yǔ)句之后，又添加了一個(gè) addGlobalStyle 語(yǔ)句用于覆蓋內(nèi)容導(dǎo)航欄的樣式定義。
圖 10. 左邊的內(nèi)容導(dǎo)航條
解決了這個(gè)問題后，把頁(yè)面滾動(dòng)到最后，我發(fā)現(xiàn)“反饋意見”按鈕下面仍然有一行白條。用 Firebug 看了一下，原來(lái)那個(gè) td 的 bgcolor 屬性被設(shè)置成白色了。于是，我添加了剩下的代碼來(lái)修改這個(gè) td 的背景色設(shè)置。這里，我用到了 Greasemonkey 的 evaluate 方法，該方法非常有用，它可以根據(jù)指定的 XPath 查詢方便地找到您想要的頁(yè)面元素，而無(wú)需找到所有的標(biāo)簽后一一對(duì)屬性值進(jìn)行判斷。
圖 11. “反饋意見”按鈕下的白條
其他瀏覽器上的“Greasemonkey” 不只在 Firefox 上有 Greasemonkey，在其他瀏覽器上也有類似的擴(kuò)展。 - Safari
Creammonkey 能夠讓 Safari 運(yùn)行絕大多數(shù)為 Greasemonkey 創(chuàng)建的 User Script。 - IE
Greasemonkey for IE 是一個(gè)提供 Greasemonkey 類似功能的 IE 擴(kuò)展。Greasemonkey for IE 腳本由兩部分組成：一個(gè) js 文件（用于編寫腳本邏輯）和一個(gè) gm4ie 文件（用于安裝腳本）。
Trixie 類似于 Creammonkey，它能夠直接運(yùn)行 Greasemonkey 創(chuàng)建的 User Script。但是，由于瀏覽器的差異，并不是所有的 User Script 能夠同時(shí)運(yùn)行于 Greasemonkey 和 Trixie。
IE7Pro 為 IE 提供很多附加的功能，其中也包含類似于 Greasemonkey 的特性。
結(jié)束語(yǔ) 本文向大家介紹了 Greasemonkey 的安裝使用以及如何編寫一個(gè)簡(jiǎn)單的 User Script ，并且為 Safari 和 IE 用戶列舉了一些可選的等價(jià)軟件。希望這些能使大家的網(wǎng)絡(luò)生活的變得更加“豐富多采”。在隨后的“進(jìn)階篇”中，將會(huì)涉及一些 Greasemonkey 的高級(jí)特性和 User Script 編程技巧。 | 
