用Add-on SDK來寫簡單的Firefox套件

之前用來解說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。