用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

“用Add-on SDK來寫簡單的Firefox套件” 有 1 則迴響

發表迴響

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