MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

显示弹出对话框

动手之前,必须先安装SDK并学习cfx基础知识.

T这篇教程使用动作按钮API需要Firefox 29或更新版本。

可以使用面板(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.pngicon-32.pngicon-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参考

学习关于按钮的更多内容,见动作按钮切换按钮API参考。

文档标签和贡献者

 此页面的贡献者: ziyunfei, magiclogy
 最后编辑者: ziyunfei,