用Add-on Builder來寫第一個Firefox套件

Add-on Builder的線上編輯界面
Add-on Builder的線上編輯界面

之前Mozilla推出Jetpack的時候,號稱很簡單就能打造出Firefox的擴充套件,那時起就一直很有興趣要來動手試試看拿來寫自己的第一個套件。最近連線上編輯器都有了,就跳下去試看看寫起來的難度如何。

一開始就有這類套件都是用Javascript寫成的認知,自己對Javascript也算是稍微熟悉了,所以不成問題。
在架構的理解上,網站上也準備了文件可以看。翻了翻幾個範例,第一印象是看來拿addon-kit裡面提供的元件兜一兜應該就能用了,如果要寫成Library之類的還有更底層的api-utils可以用。

既然目的是熟悉跟練習,就挑個簡單的題目來做好了,我想把NOWnews上有分頁的文章,合併回一頁,才不想浪費時間再點下一頁。

首先用page-mod判斷在載入NOWnews.com時觸發content scripts,然後在content scripts做抓取其他頁內容跟修改頁面的動作,只用到一項元件就完成了!

接著丟上AMO送審,非常高效率,很快就有結果,被退回了,理由是我把其他頁面的內容抓回來沒有用nsIScriptableUnescapeHTML之類的消毒過就丟innerHTML變成DOM,可能會有script標籤之類的偷藏惡意程式碼,好吧,再努力改一下。

問題來了,因為content scripts只能用來跟頁面互動,XPCOM的東西不能在content scripts裡面用,所以抓到的內容要送去add-on scripts消毒,然後再送回來,但是nsIScriptableUnescapeHTML的parseFragment()方法傳回來的是DocumentFragment物件,要給它一個DOMElement讓它掛上去,不幸的是,跟剛剛提到的相反,add-on scripts只能碰瀏覽器這邊的東西,沒辦法碰document這些頁面上的內容,所以我要去哪生DOM給它掛啊Orz

幸好小犬幫我想到了,用api-uptils裡面的hidden-frame來作為消毒場所,然後再把處理完的字串傳回去。

這裡提一下,content scripts要和add-on scripts通訊,只有postMessageport兩種方法,為了安全隔離,所以只能互傳字串,而用port能方便自訂事件名稱來設定多個管道,不像postMessage只有一個能用。

檢查一下消毒過後的內容,有沒有少了什麼東西,發現文章裡面用來內嵌YouTube影片的iframe標籤被濾掉了,想了半天,用了一個把iframe都先替換成video標籤的神奇方法,兩者都有width、height、src屬性,這些重要的資訊都不會遺失,只要再重新把iframe建回來就跟原先的內容一樣了。另外,我也測試了一下,embed和object標籤並不會被濾掉。

這個套件全部少少的程式碼可以在Builder站上看到,請各位多加指導。採用MIT授權,要拿去改寫對付宅宅新聞之類的請隨意,後續的更新則改在Github上面維護。

最後總算是通過審核上架了,附加元件頁面在此,用了那麼奇怪的手法居然也過關了,還真是令人開心。

要不是堅持要用Jetpack以套件的形式完成它,不然不上架就不必管安全性規則,這功能只用UserScript寫起來多簡單愉快啊,UserScript版本在此,Chrome的使用者可以直接安裝。

最後我的感想是,線上編輯器到處都可以寫,也可以用來展示程式碼的確是很方便,但是反覆測試時要花時間等它載入套件實在是太麻煩,編輯上打字又不太流暢,下次寫套件我想還是抓SDK在本機端編輯比較好。

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *