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. WayPoint寻路

    寻路在游戏开发中的重要性,不用多说了.从大型ARPG游戏到小规模体验游戏,都会不同程度的用到寻路功能. 塔防类游戏,战棋类游戏经常用到waypoint(路径)寻路. 下面我们来介绍一下waypoint ...

  2. (转）读取XML数据到treeView中

    原文地址,只为收藏:http://www.cnblogs.com/ylwn817/archive/2011/12/15/2288512.html /// <summary>        ...

  3. 如何在IIS7上配置 FTP7并使用IIS管理凭据方式进行验证？

    如何在IIS7上配置 FTP7并使用IIS管理凭据方式进行验证? 在 Windows Server 2008 R2 发布后,gOxiA 就开始着手于相关的测试和评估.IIS 是重点测试和评估之一!而今 ...

  4. tomcat下部署可以访问的文件夹

    项目名#文件夹名#文件夹名.xml <Context docBase="D:\文件夹名\r文件夹名"/> 例如: test#zhang#test1.xml <Co ...

  5. OpenGL ES学习笔记（一）——基本用法、绘制流程与着色器编译

    首先声明下,本文为笔者学习<OpenGL ES应用开发实践指南(Android卷)>的笔记,涉及的代码均出自原书,如有需要,请到原书指定源码地址下载. 在Android.iOS等移动平台上 ...

  6. Card objects

    There are fifty-two cards in a deck, each of which belongs to one of four suits and one of thirteen ...

  7. oracle误删除恢复

    create table first_fill_20151207 as -- 生成到临时表select * from first_fillas of timestamp to_timestamp('2 ...

  8. Oracle自增ID实现

    首先,创建一张表: CREATE TABLE example( ID Number(4) NOT NULL PRIMARY KEY, NAME VARCHAR(25)); 然后,自定义一个序列(seq ...

  9. PAT1013

    #include<cstdio>#include<cstring>#include<vector>using namespace std;const int max ...

  10. WWF3常用类 <第十一篇>

    一.WorkflowRuntime类 System.Workflow.Runtime.WorkflowRuntime是工作流的运行引擎.WorkflowRuntime在宿主中以自己独立的线程运行,它可 ...