Web上的萬能瑞士刀: Chickenfoot

喜歡用UNIX的人大都知道UNIX會是一個天然且高效率的工作平台不是沒有原因的,純文字的程式輸出入、輕巧又強大的shell、還有適合各種場合的script語言(像是Perl、Python等等)可以把許多小程式非常快速的結合起來完成許多複雜的工作。

但自從web開始蓬勃發展後,越來越多程式和系統開始移到web上。在剛開始的web 1.0時代,大部分網頁都是提供資料的靜態網頁,當時web app也都是用簡單的GET、POST參數接收資料後再到server side做處理。因為網頁是純文字的HTML寫的,所以在這個時代還有一些人會用scripting語言(像是Perl + WWW::Mechanize)來做網頁的自動化處理。但寫過這種程式的人都知道,要parse HTML並不是很容易的事,因為大部分HTML都沒照標準寫,於是只能用regular expression硬來,但無論如何都沒辦法應付一個最大的問題:只要人家的網頁一更新,script當場就變殘廢…。

到了web 2.0時代,問題變得更嚴重,因為web app不再是單純的server side程式;許多網站大量依賴在browser裡面執行的javascript,只是抓網頁回來而不執行javascript往往無法得到browser裡看到的網頁內容。

所幸我來MIT後發現我們group開發的一個超棒工具Chickenfoot,不但讓使用者能用很簡單的指令做到網頁自動化,它甚至還像是一個架在browser上的萬能shell scripting平台,可以輕易把不同網站的內容和功能連結在一起(就像UNIX shell的pipe一樣!)。

Chickenfoot是一個Firefox的extension,可以讓人在Firefox上寫script全自動操作網頁或是修改網頁的內容。Chickenfoot乍看之下很像另一個能讓人在client端另外插入javascript的Greasemonkey,但實際上Chickenfoot更像一個外掛在browser上的快速scripting平台。

Greasemonkey的目標使用者是會寫Javascript程式的網頁開發者,也因此它的進入門檻很高,如果是不會看HTML原始碼、不了解DOM或XPATH、不會寫Javascript的一般人是沒辦法用的。另外, Greasemonkey主要的功能偏重在單一網頁的客制化上,沒有針對網頁自動化做的設計,也很難做跨網頁的自動化操作。

相反地,Chickenfoot的設計是截然不同的方向:1. 使用者不需要看HTML原始碼,只要看網頁的畫面就能用關鍵字來鎖定畫面上的元件,並用簡單的指令(例如自動按按鈕的click、自動輸入文字的enter、自動選擇checkbox的check..等等)自動操作網頁;2. Chickenfoot是獨立於任何網頁之外的平台,可以輕易做到跨網頁的自動化操作,甚至可以從網頁中提取想要的資料,並帶到其他網頁中使用。3. Chickenfoot是browser的一部分,所以只要在browser中能看到的頁面就能自動操作,不用處理認證或cookie問題。

除了網頁的自動化和客製化外,Chickenfoot還有個很有趣的功能:可以把任何Chickenfoot script包裝成獨立的Firefox extension。也就是說,如果要把script分享給他人不需要請其他人事先安裝Chickenfoot,而是直接把「你的」extension給別人安裝就可以了。

我不打算寫詳細的tutorial,我建議可以從實例來學習,例如Google Icon Search就是一個很好的例子,包含了網頁內容的修改、跨網頁的自動化、還有基本命令的使用。最近釋出的Chickenfoot 1.0.5已經支援Firefox 3.5,並且也修正了中文網頁的支援問題,在中文網頁上也能正確執行。

另外附帶一提,我覺得Chickenfoot中有個很好用的小技巧,但在文件上其實不太容易找到XD 在Chickenfoot的script editor中寫script時,每寫一行就可以按ctrl-enter來執行「一行」指令。用這種方式就可以很容易一邊寫script,一邊測試並觀看每一行指令的結果,而不用一次寫一大堆後再一起測試。

有興趣更深入了解Chickenfoot的人可以參考官方網站上的Quick Start GuideExamples,或是直接看看paper: Michael Bolin, Matthew Webber, Philip Rha, Tom Wilson, and Robert C. Miller. “Automation and Customization of Rendered Web Pages”

2 thoughts on “Web上的萬能瑞士刀: Chickenfoot

  1. Pingback: 網站製作學習誌 » [Web] 連結分享

  2. Pingback: 米迦勒:几个有意思的编程语言 « 米迦勒的博客

Leave a Reply

Your email address will not be published. Required fields are marked *

*