可以使用面板(panel)模块来显示弹出对话框。面板的内容通过HTML编写。你可以在面板上运行content script：尽管在面板里的脚本无法直接访问插件代码，但是你可以在面板脚本和插件代码间交换信息。
这里，我们做了一个会在单击时显示面板的动作按钮。面板上有一个<textarea>元素：用户按下return键时，<textarea>的内容会被发送给插件代码主程序。插件代码主程序会在控制台输出日志。.
The add-o插件由六个文件组成n consists of six files:
main.js：插件主程序，在这里创建按钮和面板get-text.js：与面板内容交互的content脚本text-entry.html：面板的内容，由HTML编写icon-16.png，icon-32.png和icon-64.png：三种不同大小的图标
"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();
}
// When the panel is displayed it generated an event called
// "show": we will listen for that event and when it happens,
// send our own "show" event to the panel's script, so the
// script can prepare the panel for display.
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();
});
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();
});
最后，"text-entry.html"文件定义了<textarea>元素：
<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>
最后，把这三个图标文件保存在"data"目录：
 |
icon-16.png |
 |
icon-32.png |
 |
icon-64.png |
试用以下：保存在lib目录，其他五个文件存放在插件的data目录：
my-addon/
data/
get-text.js
icon-16.png
icon-32.png
icon-64.png
text-entry.html
lib/
main.js
运行插件，点击按钮，你就会看见一个面板。输入几行文本，然后按下回车，你就会看见控制台里的输出。
自Firefox 30起，如果你使用切换按钮，就可以给它附加一个面板。
进一步学习
学习panel模块的更多内容，见panel API参考。