Firefox Add-on SDK（Display a Popup）

介紹

官方文件

請先看基本 Add-on 製作方法

要顯示一個跳出視窗介面，你要使用 panel 模組

panel

首先 index.js 程式碼如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
// data 物件表示 data 資料夾
var data = require("sdk/self").data;

// text_entry 是 Panel 物件
// 此物件內容為 data/text-entry.html
// 而 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")
});

// 建立 ActionButton
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();
}

// panel 顯示時，會產生一個 "show" 的事件
// 當我們發現有 "show" 事件發生時
// 送出一個 "show-happen" 事件給 panel 的 script
text_entry.on("show", function() {
  text_entry.port.emit("show-happen");
});

// 監聽 "text-entered" 訊息
// 使用者會打字到 panel 中
// 我們將這些字顯示在 console log 裡面
text_entry.port.on("text-entered", function (text) {
  console.log(text);
  text_entry.hide();
});

在 data 資料夾建立 get-text.js，程式碼如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 當使用者打完字按下 Enter, 將會送出 "text-entered" 訊息給 main.js.
// 取得 id 為 edit-box 的欄位
var textArea = document.getElementById("edit-box");

// 當按鍵如果是 Enter 時，取得文字並送出
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" 事件從 index.js 發生
// 如果有，將游標顯示在文字框中
self.port.on("show", function onShow() {
  textArea.focus();
});

最後在 data 中建立 text-entry.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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>