firefox 扩展开发笔记（三）:高级ui交互编程

前言

前两篇链接

1:firefox 扩展开发笔记（一）:jpm 使用实践以及调试

2:firefox 扩展开发笔记（二）:进阶开发之移动设备模拟

最新版本的Firefox 终于舍弃了鸡肋的xul布局,可以使用原生的html用作ui交互,插件界面中可以引入 bootstrap jQuery等库,大大简便了布局和高度自定义化,本文以一个随机自定义referer 实例来记录jpm 高级ui交互编程。

界面布局

ui 控件

官方api中提供的ui控件如下

  1. ActionButton 动作按钮
  2. ToggleButton 切换按钮
  3. Frame 框架
  4. Toolbar 工具栏
  5. Sidebar 网站边栏

    具体可以参考官方文档 https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/ui

panel

面板为点击图标或者Toolbar 弹出的页面,声明代码如下

var panel = panels.Panel({

  width:420,

  height:420,

  contentURL: self.data.url("panel.html"),

  contentScriptFile : [ self.data.url("js/jquery.js"),self.data.url("../lib/panel.js")],

  onHide: handleHide

});

/data/panel.html 文件为布局内容

<!DOCTYPE html>

<html>

<head>

	<meta charset="utf-8">

	<link rel="stylesheet" href="css/bootstrap.min.css" >

	<style type="text/css">

		.group {

			margin-top:8px;

			text-align:center;

		}

	</style>

</head>

<body>

	<div class="container">

		<div class="group">

			<label>

				<input type="checkbox" id="toggle" />开启

			</label>

		</div>

		<span class="label label-info">referer 列表</span>

		<div class="group">

			<textarea class="form-control" rows="8" id="referer"></textarea>

		</div>

		<span class="label label-info">站点列表</span>

		<div class="group">

			<textarea class="form-control" rows="4" id="site"></textarea>

		</div>

		<div class="group">

			<button type="button" class="btn btn-default"  id="save" >保存</button>

		</div>

	</div>

</body>

</html>

效果如图

![panel_2.png](

)

tab 新页面

panel 界面只适合弹出小型对话框,功能繁琐的页面则需要一个新全浏览器页面。

var tabs = require("sdk/tabs");

tabs.open(data.url("option.html"));

效果

![tab_3.png](

)

事件响应

引入对应js文件之后就可以和网页一样写事件响应了,为了简便代码还可以引入jQuery库。

contentScriptFile : [ self.data.url("js/jquery.js"),self.data.url("../lib/panel.js")],

响应代码

$(function() {

    var btn_toggle = $("#toggle");

    var btn_save = $("#save");

    var text_data= $("#referer");

    var text_site= $("#site");

	 //初始化界面

    self.port.on("init", function(enable,referer,site) {

        btn_toggle.attr("checked", enable);

        text_data.val(referer);

        text_site.val(site);

    });

    //切换事件

    btn_toggle.click(function() {

        //prefs['enable']= this.checked;

        self.port.emit("toggle", this.checked);

    });

    //保存事件

    btn_save.click(function() {

        self.port.emit("save",text_data.val(),text_site.val());

    });

});

ui控件与插件代码交互需要通过一个port对象,提供消息发送和接收,事件交互。

官方文档

https://developer.mozilla.org/en-US/Add-ons/SDK/Guides/Content_Scripts/port

当点击切换按钮时,对应的交互代码为

panel.port.on("toggle", function(enable) {

  prefs['enable'] = enable ;

  if(enable){

    btn_enable();

    httpRequestObserver.register();

  }

  else{

    btn_disable();

    httpRequestObserver. unregister();

  }

});

又如 main.js 中调用panel.js

var  default_referer=[

'http://www.baidu.com',

'http://www.google.com',

'http://www.hao123.com'];

var default_site=['127.0.0.1'];

if (!ss.storage.referer){

  //赋值

  ss.storage.referer=default_referer;

}

if (!ss.storage.site){

  ss.storage.site=default_site;

}

//取值

var  strReferer=ss.storage.referer.join('\n');

var  strSite=ss.storage.site.join('\n');

panel.port.emit("init",prefs['enable'],strReferer,strSite);

数据储存

数据储存的api sdk/simple-storage,可以自由存取各种数据对象。

官方demo

var ss = require("sdk/simple-storage");

ss.storage.myArray = [1, 1, 2, 3, 5, 8, 13];

ss.storage.myBoolean = true;

ss.storage.myNull = null;

ss.storage.myNumber = 3.1337;

ss.storage.myObject = { a: "foo", b: { c: true }, d: null };

ss.storage.myString = "O frabjous day!";

随机referer 实现

var { ToggleButton } = require('sdk/ui/button/toggle');

var panels = require("sdk/panel");

var self = require("sdk/self");

var prefs = require("sdk/simple-prefs").prefs;

var ss = require("sdk/simple-storage");

var {Cc, Ci} = require("chrome");

var httpRequestObserver =

{

  observe: function(subject, topic, data)

  {

    if (topic == "http-on-modify-request") {

      var httpChannel = subject.QueryInterface(Ci.nsIHttpChannel);

      var host= httpChannel.originalURI.host;

      //判断是否在站点列表中

      if (ss.storage.site.indexOf(host) >= 0){

        httpChannel.setRequestHeader("Referer", read_referer(), false);

      }

    }

  },

  get observerService() {

    return Cc["@mozilla.org/observer-service;1"]

    .getService(Ci.nsIObserverService);

  },

	//注册监听器

  register: function()

  {

    this.observerService.addObserver(this, "http-on-modify-request", false);

  },

	//卸载

  unregister: function()

  {

    this.observerService.removeObserver(this, "http-on-modify-request");

  }

};

引用

1.https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/ui

2. https://developer.mozilla.org/en-US/Add-ons/SDK/Guides/Content_Scripts/port

3. https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/tabs

4. https://developer.mozilla.org/en-US/Add-ons/SDK/Guides/Content_Scripts/using_port

5. https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/simple-storage

6. https://developer.mozilla.org/en-US/docs/Setting_HTTP_request_headers

firefox 扩展开发笔记（三）:高级ui交互编程的更多相关文章

  1. Firefox扩展开发

    Firefox扩展开发 (插件开发) Extension开发 入门教程 5步走 五步走   首先需要知道什么是"Firefox插件".这里说的"插件"只是一个通 ...

  2. Django开发笔记三

    Django开发笔记一 Django开发笔记二 Django开发笔记三 Django开发笔记四 Django开发笔记五 Django开发笔记六 1.基于类的方式重写登录:views.py: from ...

  3. firefox扩展开发(二)：用XUL创建窗口控件

    firefox扩展开发(二):用XUL创建窗口控件 2008-06-11 16:57 1.创建一个简单的窗口 <?xml version="1.0"?> <?xm ...

  4. 学习笔记(三)--->《Java 8编程官方参考教程（第9版）.pdf》:第十章到十二章学习笔记

    回到顶部 注:本文声明事项. 本博文整理者:刘军 本博文出自于: <Java8 编程官方参考教程>一书 声明:1:转载请标注出处.本文不得作为商业活动.若有违本之,则本人不负法律责任.违法 ...

  5. 常见浏览器扩展开发笔记(chrome firefox 360 baidu qq sougou liebao uc opera)

    浏览器扩展开发貌似时下很冷门啊,但是不少企业还是有类似的应用,360的抢票插件啊,笔者最近在做的网页翻译扩展之类的.笔者在开发的过程中,遇到了不少坑,说是坑,说白了就是各个厂商支持的API不统一导致的 ...

  6. firefox扩展开发(一) ： 扩展的基本结构

    用过firefox的人肯定要安装firefox的扩展,这样才能发挥火狐的全部实力.一般扩展是一个后缀为.xpi的文件,其实这个文件就是zip格式的压缩包,压缩了一个扩展所需要的所有目录和文件,基本的目 ...

  7. RBL开发笔记三

    2014-08-26 20:06:24 今天就是在开发这个EPOLL来处理网络事件 封装较为健壮的EPOLL模型来处理基本的网络IO 1) 超时这个主题先没有弄 在开发EPOLL包括select/po ...

  8. php扩展开发笔记（2）多个源代码文件的配置和编译

    我们在开发过程中,为了代码得可读性和易维护性,肯定是须要多个代码文件的,而不不过通过 ext_skel 生成得骨架文件. 这篇文章主要介绍下.多个代码文件的时候.我们须要注意什么,以及怎么做. 我的代 ...

  9. python3精简笔记(三)——高级特性

    Python中 1行代码能实现的功能,决不写5行代码.请始终牢记,代码越少,开发效率越高. 切片 取一个list或tuple的部分元素是非常常见的操作.Python提供了切片(Slice)操作符 L ...

随机推荐

  1. Mingyang.net：java.lang.NoSuchMethodError: javax.el.ExpressionFactory.newInstance()

    使用hibernate-validator校验数据模型时报出如下异常: java.lang.NoSuchMethodError: javax.el.ExpressionFactory.newInsta ...

  2. POJ 2096 【期望DP】

    题意: 有n种选择,每种选择对应m种状态.每种选择发生的概率相等,每种选择中对应的每种状态发生的概率相等. 求n种选择和m种状态中每种至少发生一次的期望. 期望DP好别扭啊.要用倒推的方法. dp[i ...

  3. C++primer 练习13.36

    #pragma once #include<string> #include<set> using namespace std; class Message { friend ...

  4. JAXB注解【转】

    http://blog.csdn.net/lw371496536/article/details/6942045 JAXB(Java API for XML Binding),提供了一个快速便捷的方式 ...

  5. junit适配器模式应用

    适配器模式 定义: 将一个类的接口转换成客户希望的另外一个接口.Adapter模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作: 构成: 目标抽象角色(Target):定义客户要用的特定领 ...

  6. lua绑定c++的时候常见得错误

    1 Error parsing reanslation unit 这种情况,首先来说你的python 2.7以及他的插件安装是完整的,最可能的原因就是自己写的ini文件,header路径错误,可以把这 ...

  7. docker 1.12设置非https访问registry

    升级docker到1.12后,发现使用原来的/etc/sysconfig/docker文件中设置--insecure-registry的方式,访问registry失败,提示"http: se ...

  8. PMP-产品范围与项目范围区别

    如果你对项目管理.系统架构有兴趣,请加微信订阅号"softjg",加入这个PM.架构师的大家庭 1.产品范围--某项产品.服务或成果所具有的特性和功能. 2.项目范围--为交付具有 ...

  9. EXTJS 表单提交

    EXTJS框架中,在提交表单时,可有3种方式: 方法一: 普通的 Form 提交方式, 主要使用 form.submit() 方法来将表单提交到后台,在后台是根据表单的 name 属性来获取表单中元素 ...

  10. javascript设计模式-享元模式

    享元模式采用一个共享来有效的支持大量细小粒度的对象,避免大量有相同内容的类的开销(如内存耗费),共享一个元类. 应用场景:页面存在大量的资源密集型对象:他们具备一些共性,可以分离出公共操作的数据. 一 ...