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. Flask + Gunicorn + Nginx 部署

    最近很多朋友都在问我关于 Flask 部署的问题,说实在的我很乐意看到和回答这样的问题,至少证明了越来越多人开始用 Flask 了. 之前我曾发表过一篇在 Ubuntu 上用 uwsgi + ngin ...

  2. esriSRProjCS4Type Constants

    ArcGIS Developer Help  (Geometry)   esriSRProjCS4Type Constants See Also esriSRProjCSType Constants ...

  3. [ASP.NET]动态绑定树控件：

    public void BindTree(TreeView tview, TreeNode tn_main, string parentId,string sql) { TreeNode tn=nul ...

  4. 判断Windows操作系统的版本

    private void Form1_Load(object sender, EventArgs e) { if (!IsWin7()) { Application.Exit(); } } bool ...

  5. (easy)LeetCode 235.Lowest Common Ancestor of a Binary Search Tree

    Given a binary search tree (BST), find the lowest common ancestor (LCA) of two given nodes in the BS ...

  6. (转）卸载SQLServer2008 数据库

    1 卸载Microsoft SQL Server 2008主程序 1.1,控制面板-程序中找到“Microsoft SQL Server 2008”,双击卸载 1.2,弹出管理界面中选择“”删除“ 1 ...

  7. wmware10安装ghost win7问题处理

    随便找到了ghostwin7.iso, 先建立空的虚拟机, 加载iso, 按F2, 设置启动从光盘启动, 启动进去后点直安装Ghost镜像到C盘, 失盘, 直接跳到dos界面了. 忘记先要分区了, 使 ...

  8. MATLAB 实用函数

    MATLAB个人工具箱(MATLAB) mymail.m 可以利用MATLAB发送邮件(支持附件和群发),非常实用的函数,适用于:耗时很长的脚本完成后通知作者:外加定时器后用于信息推送:家庭监视器紧急 ...

  9. bootstrap风格的multiselect插件——类似邮箱收件人样式

    在开发颗粒云邮箱的过程中,遇到了一个前端的问题,就是邮箱收件人的那个multiselect的input输入框.不仅能够多选,还要能够支持ajax搜索,把联系人搜索出来.就是类似下面的这个东西: 网上找 ...

  10. python基础set

    1.set set是一个无序的不重复的集合 li=[11,22,33,11] s=set(li) print(s) {11,22,33}  set提供的方法 1.add(self, *args, ** ...