Firefox中使用面板(panel)模块来显示弹出对话框，面板的内容通过HTML编写。你可以在面板上运行content script，尽管在面板里的脚本无法直接访问插件代码，但是你可以在面板脚本和插件代码间交换信息。这次，我们做了一个会在单击时显示面板的动作按钮。面板上有一个<textarea>元素，用户按下return键时，<textarea>的内容会被发送给插件代码主程序。插件代码主程序会在控制台输出日志。

开发步骤

1.初始化项目,终端窗口运行以下命令。

mkdir Dialog

cd Dialog

cfx 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.弹出对话框的更多相关文章

  1. 推荐一些我所用的firefox 附加组件。

    firefox之所以强大,很大程度上是因为它有着超多的扩展组件,来实现许多有趣的功能.这几天把我装的firefox附加组件整理下,个人认为是一般上网常用或者可以说是必备的组件,o(∩_∩)o ,晒晒. ...

  2. SharePoint 2010 Pop-Up Dialogs SharePoint 2010 弹出对话框

    SharePoint 2010 Pop-Up Dialogs SharePoint 2010 弹出对话框         SharePoint 2010 使得往你的站点加入对话框内容变得出乎意料的简单 ...

  3. 10.JAVA之GUI编程弹出对话框Dialog

    在上节基础上添加对话框显示错误信息. 代码如下: /*弹出对话框显示错误信息,对话框一般不单独出现,一般依赖于窗体.*/ /*练习-列出指定目录内容*/ import java.awt.Button; ...

  4. 【Telerik】弹出对话框RadWindow，确认删除信息

    要做一个删除功能,但是删除前正常都要弹出对话框确认一下是否删除信息,防止误删信息.

  5. Response.Write("<script>alert('弹出对话框！')</script>") 后跟Response.Redirect("page.aspx");不能弹出对话框，直接跳转页面了 如何解？

    Response.Write和Response.Redirect一起用的时候就会这样,write脚本和redirect脚本不能同时使用,这样不会执行脚本,最好使用ClientScript 改进方法: ...

  6. selenium移动div里面的滚动条，操作弹出对话框

    还是使用js来移动 首先要定位到这个元素 倾向于使用js来定位元素,输入下面的脚本,按下回车键,即可在调试页面看到对应的div块$("div.table-responsive") ...

  7. java selenium (十一) 操作弹出对话框

    Web 开发人员通常需要利用JavaScript弹出对话框来给用户一些信息提示, 包括以下几种类型 阅读目录 对话框类型 1.  警告框: 用于提示用户相关信息的验证结果, 错误或警告等 2. 提示框 ...

  8. 如何给Firefox附加组件签名

    如何给Firefox附加组件签名 https://developer.mozilla.org/zh-CN/Add-ons/Distribution 2.打开https://addons.mozilla ...

  9. ABAP 弹出对话框

    一组有用的用户交互窗口函数 显示多条消息 SAP系统用的是这个函数:C14Z_MESSAGES_SHOW_AS_POPUP POPUP_TO_CONFIRM_LOSS_OF_DATA 显示有YES/N ...

随机推荐

  1. 一个简单的wed服务器SHTTPD（4）————SHTTPD支持CGI的实现

    //start from the very beginning,and to create greatness //@author: Chuangwei Lin //@E-mail:979951191 ...

  2. （Lineup the Dominoes筛子）三维状压

    传送门 描述:\(一堆筛子,每个筛子两个面,上面有1-6之间的数字.后一个筛子与前一个筛子的接触面的点数必须相等.\) \(求,有多少种方案堆完筛子.(方案只关心筛子的位置,不关心是否翻转)\) \( ...

  3. LateX公式表

    转载自xkgjfl 话说为什么LateX公式这么难记 markdown最全数学公式 我们在用markdown写文档时有时候少不了需要插入一些公式,然而markdown公式输入远没有word这么直观,有 ...

  4. STL下<algorithm>下的reverse函数

    定义: reverse用于C++中,对给定区间所有元素进行排序,是一种反向函数,不具备排序功能.sort函数包含在头文件为#include<algorithm>的C++标准库中. 语法: ...

  5. 新书《OpenShift云原生架构：原理与实践》第一章第三节：企业级PaaS平台OpenShift

    近十年来,信息技术领域在经历一场技术大变革,这场变革正将我们由传统IT架构及其所支撑的臃肿应用系统时代,迁移至云原生架构及其所支撑的敏捷应用系统时代.在这场变革中,新技术的出现.更新和淘汰之迅速,以及 ...

  6. Day_09【常用API】扩展案例4_将字符串变为字符数组，并将大写字母改为小写，首尾内容不同互换，并将索引为偶数的元素替换

    分析以下需求,并用代码实现 1.键盘录入一个字符串 2.将该字符串变成字符数组(不能使用toCharArray()方法) 3.将字符数组中的所有大写字母变成小写字母(不能使用toLowerCase() ...

  7. [hdu2119]二分图最小覆盖，最大匹配

    题意:给一个01矩阵,每次可以选一行或一列,打掉上面所有的1,求打掉所有的1所需的最小次数. 思路:经典的模型了,二分图最小覆盖=最大匹配.所谓最小覆盖是指选最少的点关联所有的边.容易得到将行和列看成 ...

  8. [zoj3623]背包模型

    给定n种物品,每种物品需要ti时间生产出来,生产出来以后,每单位时间可以创造wi个价值.如果需要创造至少W个价值,求最少时间. 思路:dp[j]表示用时间j所能创造的最大价值,则有转移方程:dp[j ...

  9. python 基础应用5-简单购物车

    1.列表去重 #列表去重 li = [1,2,33,33,2,1,4,5,6,6] set1 = set(li)# 转为集合 li = list(set1)# 转为列表 print(li)#[1, 2 ...

  10. layui编辑商品时，怎么使用下拉菜单显示商品默认分类的问题

    //加载商品默认的分类$.get('/admin/category/selec/' + {$simple.0.first_pid},function(msg){ $("#two_cate&q ...