紅塵一隅間拾得

要提 firefox 上這個 plugin: greasemonkey 俗稱「油猴」這個東西，就不能不先提及 javascript 。從開始遇到用 javascript 的網頁開始，一直就不是很喜歡。所以在 No script 這個 firefox plugin 還沒出現之前，瀏覽器的選項裡面一定都是 disable javascript，取消 javascript 的執行。可想而知， java 當然更是要關掉。

網頁設計者在你家養的小鬼: javascript

可是從 Mosaic 、Hotdog 一路以來，到數年前的 firefox 瀏覽器，使用者基本上一直處於被動、消極的狀態。許多網站就是非得要你打開 javascript 或是 java 才能看。我們更不用提說到現在還有購書的網站非得要 IE 才能用(這種網站我就不進去買了)。後來 No script 的出現，讓我們可以對網站過濾，設定哪些網站的 javascript 可以執行，哪些不行。就這個時候的 javascript 對我來說，我很清楚它是一個 client-side 也就是在我們自己電腦上執行的東西，但是它做的事情，卻是從為虎做倀到讓你自廢武功不等。換言之，它就像是網頁設計者用你的電腦資源養來監視你的小鬼，而你就活像隻被寄生的毛蟲一樣，面對寄生無力對抗。

要說 javascript ，本來它應該是用來輔助使用者能更容易瀏覽網頁的幫手，但是科技的本身並沒有辦法決定道德的議題，結果一些網站從讓你的滑鼠按鍵不能用到作惡意的釣魚動作，中間或多或少都利用了 javascript。

等著 AJAX 支援非同步透過HTTP傳輸資料的技術出現， javascript 可以說又跨了一大步，使用者可以比過去有更好的瀏覽經驗，使用者可以在滑鼠移到連結的時候，預先瀏覽該連結連過去的內容，或是把同一網站的不同網頁內容結合起來等等。儘管如此，使用者還是只能默默接受網頁設計者的安排。

一直到 greasemonkey 的出現，使用者終於有機會把電腦裡面的小鬼給整治一下了。因為使用者終於獲得了可以在自己的瀏覽器重新解讀網頁內容的權力。

greasemonkey: Here I come to save the day～

greasemonkey 是一個 firefox plugin，它允許使用者重新安排收進來的網頁內容，你大可以使用 NO script 之後，再用油猴重新解讀原來的網頁。更重要的，油猴允許你可以把不同網頁的內容結合在一起，而這是在原來的 javascript 利用 XMLHTTPRequest() 所作不到的事情。這是什麼意思呢？也就是說我今天可以連到一個網頁，遇到看不懂的字，透過油猴把字丟進 google, yahoo, 或是其它一些搜尋網站，然後把結果整合在一起。或者你可以在購書網站上面，透過油猴幫你把其他購書網站上面同樣這本書的價錢做個比較(當然我們現在有 findbook.tw 這樣的比價網站了)。不過因為這樣的事情，存在安全上的問題，所以油猴在這方面相對來說就對使用上做了一些限制，像是不能使用 responseXML，而只能用 responseText。不過這也是小事情，因為 firefox 另外提供 DOMParser()，還有 parseFromString(’string’,'format’) 能夠把 responseText 透過 format 設定成 ‘text/xml’ 轉成 XML 的格式。或是也可以考慮用 XPATH 的方式，用 document.evaluate() 來抓取想要的資料，像這個從 gladiatusarena.user.js 抄下來的範例：

function getStats(code, id, num, stat)
{
	var ex = ".//span[@id='"+id+"']";
	tag = document.evaluate(
  	ex,
    	code,
    	null,
    	XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
    	null);

	if (tag.snapshotLength) {
  return(tag.snapshotItem(0).innerHTML)

  }
}

那至於前面提到的那些小鬼呢？當然可以啦，我們可以重新定義滑鼠的控制，使得那些會阻礙你滑鼠控制的小鬼通通無用武之地。也可以把煩人的廣告，設計不良的介面重新編排。比方說有些網站美其名用個框框跟在你的滑鼠旁邊是為了方便你搜尋或是告訴現在的時間，但是它就是會一直擋住你想要瀏覽的內容，很煩，對吧？把油猴搬出來，抓到那個框的物件(如果用 firefox 可以裝 web developer ，然後用 ctrl-shift-F 進入「結界」，就可以使用滑鼠點到你想知道的物件上面，抓出物件的名稱)。比方說下面的 script:

var delch=document.getElementById(‘ymodupdate’);
for(var i=delch.childNodes.length-1;i>=0;i–)
  {
  delch.removeChild(delch.childNodes[i]);
  }
var delch=document.getElementById(‘ymodsearch’);
for(var i=delch.childNodes.length-1;i>=0;i–)
  {
  delch.removeChild(delch.childNodes[i]);
  }

就可以把 ymodupdate, ymodsearch 這兩個物件移除，也就是把那些煩人的框框拿掉。

不過油猴並不是說沒有限制，一些好用的像是滑鼠控制的方式並不能使用一般寫作 javascript 的方式來運行，而是會像下面這個例子，透過 addEventListener() 來控制滑鼠引發的事件，像是滑鼠按鍵彈起來 mouseup 或是雙擊 dblclick：

  window.addEventListener(‘mouseup’,
                            function()
			    {
			    var ch=document.getSelection();
			    if(ch.length)
			      {
			      GM_xmlhttpRequest(
			        {
				method: ‘GET’,
				url: ‘http://www.google.com.tw/search?q=’+encodeURIComponent(ch),
				onload: function(req)
				        {
					pulled=document.createElement(’div’);
					pulled.innerHTML=req.responseText;
					document.body.appendChild(pulled);
					}
				});
			      }
			    },
			    true);

  window.addEventListener(‘dblclick’,
                           function()
                           {
			   document.body.removeChild(pulled);
			   },
			   true);

解讀權力的轉移：使用者作主

我們大概可以說油猴的地位比較像是使用者自己養的閱聽過濾器。因為不管網頁上面做了些什麼(我們暫時把不同瀏覽器對javascript 解讀不同的問題先擱在一邊)，因為現在的使用者要的不光是內容，他們要的更多，他們還想要擁有對內容解讀、解釋的權力。從好的方面來說，油猴腳本(script)的出現，可以說讓網站/網頁的設計者明確的知道使用他們網站的人到底想要什麼，而不再是一種模糊、抽象的敘述（只要下載針對他們網站的油猴腳本就知道了）。加上 javascript 的本質， 一個必須在使用者端執行，所以必須被看到的東西，無論怎麼樣，這隻小鬼已經藉由油猴的出現無法再胡作非為了。

油猴看起來似乎很美好。但是，無可諱言的，你還必須懂一點 javascript 。如果不懂，也不是完全就對這些小鬼無可奈何。網路上有許多人針對不同需求、不同網站寫好了許多不錯的 userscript (我個人懷疑，如果一個網站要到使用者寫油猴腳本來讀取的時候，那這個網站一定有對使用者不便的地方)。舉凡 Gmail，bloglines，twitter 等等這些知名網站，甚至是比較無名的網站等，都有油猴腳本可以幫助使用者愉快地使用網站。

油猴的出現當然對霸道、不貼心的網站/網頁的設計者來說肯定是個不太好的消息，因為它讓解釋的權力從設計者過渡到使用者。使用者不喜歡的廣告，不喜歡的網頁安排，不喜歡的功能，通通可以利用油猴把這些障礙掃乾淨，甚至油猴還可以幫助使用者增加本來不屬於這個網站的資料，增添使用者比對資訊。雖然這些設計者可能為了重新拿回過去像神一樣的地位，而向 flash 靠攏。使得使用者還是得繼續面對設計糟糕、霸道的網頁。像看過最糟糕的、只能用 flash 來操縱的網站，莫過於 M 食品的網站。要的東西找不到，只有一堆花俏的東西。這一切似乎暗示著，使用者和網頁設計者之間的拉鋸還有得打。對這個情況我倒不覺得需要擔心，因為未來說不定又會有另外一隻猴子來拯救我們。

【進一步閱讀】
關於油猴有一份文件 《Dive Into GreaseMonkey》 寫得頗不錯，可以從這份文件入手。

另外，O’reilly 公司網站上有一份 《Avoid Common Pitfalls in Greasemonkey》 解釋了一些基於安全性的理由油猴為什麼要這樣做的理由，以及一些油猴和當 javascript 嵌在網頁時不同的寫法，例如前面的滑鼠按鍵控制等。

而同樣在 O’reilly 公司的網站上有另外一份文件 《Greasemonkey Hacks》，則有更多的圖文說明油猴的功能。