2013年8月21日 星期三

使用SDK開發Firefox Add-on

本來標題是想要下成「第一次開發Firefox Add-on就上手」,不過我今天是想來寫使用Add-on的SDK來開發,要簡單上手應該用Add-on Builder就真的很簡單了吧。

Firefox Add-on 開發者交流中心
趁著這次颱風假的機會,剛好看到了 g0v新聞小幫手,想說試著用Add-on SDK來寫個Firefox版本的好了(寫好之後發現 racklin 大大已經寫好了功能強大的 Firefox 版新聞小幫手這年頭連做公益(?)都要動作快一點 :p)。下午又看到強者學弟們寫的課程評價整合插件Courgle,所以趁著手感正熱,又寫了一個 Firefox 版

剛好前幾天有人網誌瀏覽人數破萬,表示「樂勝 qcl, lol」,所以我只好來努力加字元,筆記一下我的第一次使用Add-on SDK開發Firefox Add-on就上手的過程囉。在此前我開發QCLean for Firefox其實都是用Add-on Builder,有點不男子漢的感覺,雖然所有的程式碼確實如宣稱般都是純手工精工打造。有了Add-on SDK,我就可以用vim來寫Add-on了哈哈!


Download & Setup Add-on SDK

正所謂「工欲善其事,必先利其器」,要用Add-on SDK來開發Add-on,當然要先取得Add-on SDK。首先,先到開發者交流中心去按一下「下載Add-on SDK」,接著就會得到一包.zip,想當然爾,解開就出現了神奇的SDK。

再來便是進入開發環境,只要source一下bin/activate,這邊看來應該是用了Python的virtualenv,之後便進入了開發環境。
$ unzip addon-sdk.zip
$ cd addon-sdk
$ source bin/active
(addon-sdk)$ 
那麼,要怎麼離開開發環境呢?這樣就可以了:
(addon-sdk)$ deactivate
$

開始開發Add-on

進入開發環境後,只要在一個我們想要寫code的資料夾下初始化指令(cfx init),在此資料夾下便會建立出一個空的Add-on
(addon-sdk)$ mkdir my-addon
(addon-sdk)$ cd my-addon
(addon-sdk)$ cfx init
* lib directory created
* data directory created
* test directory created
* doc directory created
* README.md written
* generated jID automatically: [ID]
* package.json written
* test/test-main.js written
* lib/main.js written
* doc/main.md written

Your sample add-on is now ready.
Do "cfx test" to test it and "cfx run" to try it.  Have fun!
初始化指令之後資料夾內出現了lib、data、doc、test等資料夾。

  • Add-on的進入點(?)是 lib/main.js 這隻javascript。
  • 其他相關的scripts或是圖片、CSS之類的放在 data 資料夾下。
  • test 資料夾內是一些跑測試的js,這個部份我還在研究:p
  • doc當然是文件
  • package.json 是以json格式表示這一個Add-on的基本資訊。
    • name, description, version, author等
當我們要跑測試script的時候就執行
(addon-sdk) $ cfx test
如果要看在Firefox中執行測測看,讓他跑起來就是了
(addon-sdk) $ cfx run

這樣會開啟一個乾乾淨淨的Firefox,如果有用console.log噴訊息的話會在終端機中噴出來。

一個簡單的Add-on

打包

當我們覺得我們開發到一個段落,可以上傳附加元件中心或是讓朋友測試一下,那麼就得打包起來,變成一個.xpi檔,打包的方法真的很簡單:
(addon-sdk) $ cfx xpi
Exporting extension to my-addon.xpi.
以上就是一個非常簡單的使用Add-on SDK開發Firefox Add-on的介紹,接下來可以參考Firefox Add-on 的API文件,進一步開發Firefox Add-on了 (dance)

下一次我會來筆記一下我把一些Chrome上的Extension試著移到Firefox上的小小經驗與心得 :)