之前用來解說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。
變更的比較厲害,有些舊的知識已經不能再適用了。