[Firefox附加組件]0003.彈出對話方塊

標籤：

Firefox中使用面板(panel)模組來顯示彈出對話方塊，面板的內容通過HTML編寫。你可以在面板上運行content script，儘管在面板裡的指令碼無法直接存取外掛程式代碼，但是你可以在面板指令碼和外掛程式代碼間交換資訊。這次，我們做了一個會在單擊時顯示面板的動作按鈕。面板上有一個<textarea>元素，使用者按下return鍵時，<textarea>的內容會被發送給外掛程式代碼主程式。外掛程式代碼主程式會在控制台輸出日誌。

開發步驟

1.初始化項目,終端視窗運行以下命令。

mkdir Dialogcd Dialogcfx init

2.編輯Dialog項目lib目錄下的 main.js 檔案。　　

var data = require("sdk/self").data;// 構造面板，從"data"目錄的"text-entry.html"載入// 內容，然後載入"get-text.js"指令碼。var text_entry = require("sdk/panel").Panel({  contentURL: data.url("text-entry.html"),  contentScriptFile: data.url("get-text.js")});// 建立按鈕require("sdk/ui/button/action").ActionButton({  id: "show-panel",  label: "Show Panel",  icon: {    "16": "./icon-16.png",    "32": "./icon-32.png",    "64": "./icon-64.png"  },  onClick: handleClick});// 在使用者點擊按鈕時顯示面板。function handleClick(state) {  text_entry.show();}text_entry.on("show", function() {  text_entry.port.emit("show");});// 監聽來自content指令碼的text-entered訊息。訊息主體L是使用者輸入的文本。// 此實現，我們只在控制台顯示日誌。text_entry.port.on("text-entered", function (text) {  console.log(text);  text_entry.hide();});

 

3.在Dialog項目data目錄下建立content指令碼 get-text.js檔案　　

// 使用者按下斷行符號，發送text-entered訊息給main.js。// 訊息主體是編輯框的內容。var textArea = document.getElementById("edit-box");textArea.addEventListener(‘keyup‘, function onkeyup(event) {  if (event.keyCode == 13) {    // Remove the newline.    text = textArea.value.replace(/(\r\n|\n|\r)/gm,"");    self.port.emit("text-entered", text);    textArea.value = ‘‘;  }}, false);// 監聽由外掛程式主程式發送的show事件。表示面板將要顯示。//// 焦點放在textarea上，這樣使用者可以直接開始輸入。self.port.on("show", function onShow() {  textArea.focus();});

 

4.在Dialog項目data目錄下建立text-entry.html檔案

<html><head>    <style type="text/css" media="all">      textarea {        margin: 10px;      }      body {        background-color: gray;      }    </style>  </head><body>    <textarea rows="13" cols="33" id="edit-box"></textarea>  </body></html>

  

5.儲存下面圖片到data目錄中

　　

6.進入Dialog項目運行命令

cfx run

7.點擊按鈕，輸入Hello Firefox,斷行符號。

 

8.查看終端視窗，這邊就接受到我們在Firefox 彈出對話方塊中得內容了。


至此就完美的結束了。

• main.js：外掛程式主程式，在這裡建立按鈕和面板
• get-text.js：與面板內容互動的content指令碼
• text-entry.html：面板的內容，由HTML編寫
• icon-16.png，icon-32.png和icon-64.png：三種不同大小的表徵圖
  

 

參考連結

 動作按鈕: https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action
 面板: https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/panel 
 切換按鈕: https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_toggle 

 

 

本站文章為 寶寶巴士 SD.Team 原創，轉載務必在明顯處註明：（作者官方網站： 寶寶巴士 ) 
轉載自【寶寶巴士SuperDo團隊】 原文連結: http://www.cnblogs.com/superdo/p/4843217.html

 

 

[Firefox附加組件]0003.彈出對話方塊