2012年8月28日

摩茲動手做（二）用 Add-on SDK 寫簡單的 Firefox 套件

文章標籤： , ,

摩茲動手做系列是 Mozilla Links 中文版的特別企劃，本專題中將會有一系列如何貢獻 Mozilla 與開放網路的心得分享，歡迎大家在閱讀後按部就班，與我們一起動手實作，加入貢獻開放網路的行列！

第二集的分享者為 Browser Pairs（瀏覽器翻牌）遊戲的作者 WM，他將與大家分享如何透過 Add-on SDK 動手撰寫一個簡單的 Firefox 套件。

編按：本文著動在擴充套件本身的程式邏輯，關於可線上擴充套件開發網站 Mozilla Add-on Builder 及用來離線開發擴充套件的 Add-on SDK 使用方法，可先參考 WM 的以下兩篇文章，及本文末的介紹影片：

之前用來解說 Firefox Add-on SDK 的範例 NOWnews Onepage 雖然很有挑戰性，但用到了底層 API 好像有些太複雜了，其實 SDK 作者群也有提供簡單的範例放在 Builder，不過這次我要分享的是 SDK 開發文件在改版前的示範套件，並加上一些修改讓它實用化。

這次打算做一個直接在頁面上顯示字典查詢結果的功能。

首先在 Add-on Bar 上用 Widget 模組顯示圖示按鈕：

var widget = require("widget").Widget({
   id: "kimo",
   label: "奇摩字典",
   contentURL: data.url("kimo.ico"),
   panel: panel,
   onClick: function() {
  panel.contentURL = "http://tw.dictionary.yahoo.com/";
   }
});

指定當觸發點擊事件時，在彈出的 Panel 中載入字典首頁，而 Panel 模組的宣告則是：

var panel = require("panel").Panel({
 width: 680,
 height: 550,
 contentURL: data.url("loading.html"),
 onHide: function() {
  panel.contentURL = data.url("loading.html");
 }
});

當 Panel 隱藏時，把內容改為顯示載入中的頁面，這樣在目前的查詢結果還沒載入完成前，使用者就不會看到上一次的查詢結果。

最後一個用到的模組 Context Menu，就是最重要的文字選取後右鍵查詢選項：

var menuItem = contextMenu.Item({
 label: "奇摩字典",
 image: data.url("kimo.ico"),
 // Show this item when a selection exists.
 context: contextMenu.SelectionContext(),
 // When this item is clicked, post a message back with the selection
 contentScript: 'self.on("click", function () {' +
  '  var text = window.getSelection().toString();' +
  '  self.postMessage(text);' +
  '});' + 
  'self.on("context", function () {' +
  '  var text = window.getSelection().toString();' +
  '  if (text.length > 20)' +
  '    text = text.substr(0, 20) + "...";' +
  '  return "奇摩字典: " + text;' +
  '});',
 // When we receive a message, look up the item
 onMessage: function (item) {
  panel.contentURL = "http://tw.dictionary.yahoo.com/dictionary?p=" + item;
  panel.show();
 }
});

設定 context 為當選取文字時才顯示，並在 contentScript 中描述當有文字被選取時改變選項文字，還有選項點擊後的查詢動作。

就是這麼簡單，這樣就完成了一個實用的擴充套件！

原本還想把字典顯示頁面清理一下，但目前要對 Panel 裡面的外來頁面調樣式還挺費工的，不過可以參考之前的這篇 Yahoo!奇摩字典去廣告稍作處理。

由於是簡單的實作，未來有機會再加上自訂與新增字典種類的功能。
這次的成果原始碼一樣放在 Github，想直接安裝來試試的，也可以在附加元件裡找到：Dictionary Panel。

以下是兩部 Mozilla 針對 Add-on Builder 的簡介影片及 Step-by-step 套件製作教學：


Firefox 的最大特色就是五花八門的套件，讓每個人的 Firefox 功能都很獨特。
如果您也有撰寫套件的經驗，歡迎在留言中與我們分享你的作品！

φ 原文 / WM 撰寫，Irvin 編輯

1 則留言:

訂閱： 張貼留言 (Atom)