我的 Web 我做主: Greasemonkey 入門篇

當你在使用某個 Web 應用的時候，是否曾經為Web應用本身的設計缺陷或者靈活性的缺乏所帶來的不便而感到煩惱呢？是否有過給 Web 應用的開發人員寫封郵件讓他們做些改善的衝動呢？但很多時候，你不喜歡某個 Web 應用，也不是應用本身的問題，例如一些顏色和樣式不符合你的口味，正所謂“眾口難調”。有沒有想過自己動手將其他人開發出來的 Web 應用定製成自己需要的模式呢？Greasemonkey 正是這樣一款幫助你實現“個性化”需求的軟體。本文將帶你進入 Greasemonkey 的世界。

Greasemonkey 簡介

Greasemonkey 是一款 Firefox 的擴展。不同於其他 Firefox 擴展之處在於，Greasemonkey 並非提供某種特定的功能（例如“下載”或者“標籤”功能），而是提供一個可供用戶自己進行開發的平台。在 Greasemonkey 誕生之前，用戶只能“被動”地使用 Web 應用提供的特性，或者憑藉 Web 應用提供的有限的定製功能做一些個性化設置。Greasemonkey 的出現使用戶“主動”對 Web 應用進行個性化定製成為可能。所以，不得不說 Greasemonkey 的出現對改變人們使用 Web 的方式具有“革命性”的意義。

安裝 Greasemonkey 之後，必須要安裝 User Script 才能具備特定的功能。所謂 User Script ，是一個用 Javascript 語言編寫的以 user.js 為後綴的文件，例如“ helloworld.user.js ”。因此只要你會 Javascript ，你就有能力為 Greasemonkey 編寫 User Script。由於 Greasemonkey 運行於本地環境，而且它提供了一些自己的 API ，從而 User Script 所能做的事情遠遠超出 Javascript 的範圍，比如數據的的持久化、本地文件的訪問以及在 Firefox 菜單欄上增加命令等等。

Userscripts.org擁有數以千計的 User Script 。該網站為 Greasemonkey 的愛好者提供了一個很好的分享和交流的平台。

Greasemonkey 的安裝及使用

安裝 Greasemonkey

1. 打開該鏈接 https://addons.mozilla.org/en-US/firefox/addon/748，然後點擊“ Add to Firefox ”按鈕。
   
   圖 1. 點擊“ Add to Firefox ”按鈕
   
   
   
2. 在彈出窗口中，點擊“ Install Now ”按鈕。
   
   圖 2. 點擊“ Install Now ”按鈕
   
   
   
3. 點擊“ Restart Firefox ”按鈕。
   
   圖 3. 點擊“ Restart Firefox ”按鈕
   
   
   

安裝 User Script

• 網路安裝
  點擊任何一個鏈接到以 user.js 為後綴的文件的 URL 都會彈出如下的 User Script 安裝窗口。
  
  圖 4. User Script 安裝窗口
  
  
  接下來，您只要點擊“ Install ”按鈕安裝該 User Script。以Userscripts.org為例，當您搜索到需要的 User Script 后，點擊右上角的“ Install this script ”就可以安裝當前的 User Script 了。
  
  圖 5. 示例：安裝“ Gmail Addons ”
  
  
  
• 本地安裝
  如果您的 User Script 是本地文件，只要把它拖拽到 Firefox 窗口就可以了。此時，就會看到如下User Script安裝窗口。
  
  圖 6. Hello，Greasemonkey腳本安裝窗口
  
  
  之後的操作與“網路安裝”一致。

新建 User Script

Greasemonkey 提供了一個簡單的窗口幫助你新建 User Script。你可以通過“ Tools > Greasemonkey > New User Script ...”打開該窗口。

另外一種創建 User Script 的方式是直接在本地創建一個後綴為 user.js 文件，然後將其拖拽到 Firefox 中進行安裝（也就是前文中提到的“本地安裝”方法）。

管理 User Script

點擊“ Tools > Greasemonkey > Manage User Script...”打開 User Script 管理窗口。

在該窗口中，您可以：

• 改變 User Script 的“活動”狀態
• 配置 User Script 的 Included Pages 和 Excluded Pages 屬性
• 卸載 User Script
• 點擊“ Edit ”按鈕打開外部文本編輯器直接修改 User Script

教你編寫第一個 User Script

不知道你是否已經厭倦了 developerWorks 的白色背景？總是面對同樣的一種樣式，任何人都會厭倦的。好吧，讓我們來編寫一個可以改變 developerWorks 背景色的 User Script 。

第一步：新建一個 User Script
創建 User Script 的步驟請參見“新建 User Script ”部分。在“新建 User Script 窗口”輸入如下內容：
Name: dW Customizer
Namespace: http://www.ibm.com/developerworks/cn/
Description: 該腳本用於定製 developerWorks 中國網站文章的背景色
Includes: http://www.ibm.com/developerworks/cn/*

第二步：編寫腳本邏輯
完成第一步后，您應當已經用文本編輯器打開了 User Script 。請將下面的內容拷貝到您的腳本中（注意：從“// ==/UserScript==”以下開始粘貼）：

var myBgColor='beige'  //定製頁面背景色  addGlobalStyle('body {background-color:'+myBgColor+'}');  //修改左邊內容導航條背景色  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(      "//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);  }  		

第三步：驗證結果
點擊該鏈接《使用 AppFuse 快速構建 J2EE 應用》，您將看到此時文章的背景色已經是米色，而不再是一貫的白色。如果您沒有看到所述的效果，可以到本文“下載”部分下載安裝完整的dw_customizer.user.js以核對檢查是否您的 User Script 有什麼錯誤。

下面對該 User Script 做些解釋。
User Script 開頭的部分是對元數據的定義。它告訴 Greasemonkey 該 User Script 的名字、命名空間、描述以及何時應該運行該 User Script 。下面我們一一對它們做詳細講解。

如何調試 User Script? 簡單的答案是您如何調試 Javascript，就如何調試 User Script，因為本身 User Script 就是 Javascript 編寫的。我常用的方法是： Firebug 相信有經驗的 Javascript 開發者都不會對 Firebug 感到陌生。Firebug 是一款 Firefox 的擴展，通過它您可以監視、編輯、調試網頁中的CSS、HTML已經Javascript代碼。對於 User Script 開發，Firebug是一個必不可少的工具。 GM_log 這是一個 Greasemonkey 提供的記錄日誌的方法。您只需要寫“GM_log('my message');”，就會在 Firefox 的 Javascript 控制台中看到日誌信息“my message”。它比 alert 函數要好，因為您不會總要去點“確定”按鈕關閉 alert 窗口。但有時，對於一些簡單應用，用 alert 函數也不失為一種簡單有效快速的方法。 當然，除此之外，還有其他的一些 Javascript 測試工具，例如 JSUnit，也可以用來調試 User Script 。

• @name
  顧名思義，這是 User Script 的名字。它會出現在 Greasemonkey 的窗口中，包括安裝和管理的窗口。
  可選，如果不指定，默認為 User Script 的文件名（不包含後綴 .user.js）。
• @namespace
  User Script 的命名空間，它用於區別同名但卻是“不同”的 User Script 。通常它的值是一個URL。
  可選，如果不指定，默認為下載該 User Script 的網站域名。
• @description
  User Script 的描述信息，告訴使用者該 User Script 會做些什麼事情。
  可選，如果不指定，默認為空。但是處於從方便管理 User Script 的角度出發，建議填寫 User Script 描述。
• @include
  @include 告訴 Greasemonkey 該 User Script 應當在哪些 URL 對應的網頁上運行。“*”的意思是匹配所有字元。例如，“http://www.ibm.com/developerworks/cn/*”指該 User Script 會在所有 developerWorks 中國的網頁中運行。如果您將本例中的 @include 改成“http://www.ibm.com/developerworks/cn/java/*”，那麼它將只對 Java 專區的文章生效。
  可選，如果不指定，默認值為“*”，也就是所有站點。
• @exclude
  @exclude 則是告訴 Greasemonkey 要排除哪些網頁。您可以嘗試著將本例的元數據改成如下：

  // ==UserScript== // @name dW Customizer // @namespace http://www.ibm.com/developerworks/cn/ // @description 該腳本用於定製 developerWorks 中國網站文章的背景色 // @include http://www.ibm.com/developerworks/cn/* // @exclude http://www.ibm.com/developerworks/cn/java/* // ==/UserScript==

  
  那麼，該 User Script 將會在所有除了 Java 專區以外的 developerWorks 中國的網頁中運行。從該例中，您也可以看出，@exclude 優先於 @include。另外，@include 和 @exclude 都可以被聲明多次（一個聲明是單獨的一行）。Greasemonkey 將根據所有的聲明確定該 User Script 運行範圍。
  可選，如果不指定，默認為不排除任何網頁。

至於元數據定義之後的代碼則是純粹的 Javascript ，不過這裡我們還是簡單地解釋一下。
addGlobalStyle 是一個用於向 head 中添加樣式定義的函數。第一個對 addGlobalStyle 函數的調用添加了對 body 背景色的樣式定義。該語句運行后，頁面背景已經變成我們指定的顏色：米色。但是你會發現左邊的內容導航欄的背景色仍然是白色 － 這讓整個頁面很不協調。所以，在指定 body 背景色的語句之後，又添加了一個 addGlobalStyle 語句用於覆蓋內容導航欄的樣式定義。

其他瀏覽器上的“Greasemonkey”

不只在 Firefox 上有 Greasemonkey，在其他瀏覽器上也有類似的擴展。

• Safari
  Creammonkey 能夠讓 Safari 運行絕大多數為 Greasemonkey 創建的 User Script。
• IE
  Greasemonkey for IE 是一個提供 Greasemonkey 類似功能的 IE 擴展。Greasemonkey for IE 腳本由兩部分組成：一個 js 文件（用於編寫腳本邏輯）和一個 gm4ie 文件（用於安裝腳本）。
  Trixie 類似於 Creammonkey，它能夠直接運行 Greasemonkey 創建的 User Script。但是，由於瀏覽器的差異，並不是所有的 User Script 能夠同時運行於 Greasemonkey 和 Trixie。
  IE7Pro 為 IE 提供很多附加的功能，其中也包含類似於 Greasemonkey 的特性。

結束語

本文向大家介紹了 Greasemonkey 的安裝使用以及如何編寫一個簡單的 User Script ，並且為 Safari 和 IE 用戶列舉了一些可選的等價軟體。希望這些能使大家的網路生活的變得更加“豐富多采”。在隨後的“進階篇”中，將會涉及一些 Greasemonkey 的高級特性和 User Script 編程技巧。（責任編輯：A6）