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. centos设置开机自启动

    编辑 /etc/rc.d/rc.local 将要开启的服务添加到该文件即可

  2. 问题：glGenBuffers()函数没有定义怎么办

    链接glew.lib库,#include <gl/glew.h>. glew是opengl 的扩展库

  3. 游戏设计模式系列（一）—— 单线逻辑&&数据驱动，搞定最容易卡死的结算界面

    从事游戏行业1年多了,个中心酸不知从何说起.抛开非技术的不说,一个开发者需要面对的最大问题,可能就是和策划频繁改变的需求做斗争了吧,这时候就体现了设计模式的重要性,抛开正式的设计方式不说,先讲讲我1年 ...

  4. VS集成Qt环境搭建

    环境:VS2010 + Qt5.2 关于VS的下载.安装,这里就不再做过多阐述. 一.下载Qt5.2安装包(qt-windows-opensource)与Qt插件(Visual Studio Add- ...

  5. BFPRT(线性查找算法)

    BFPRT算法解决的问题十分经典,即从某n个元素的序列中选出第k大(第k小)的元素,通过巧妙的分 析,BFPRT可以保证在最坏情况下仍为线性时间复杂度.该算法的思想与快速排序思想相似,当然,为使得算法 ...

  6. 洛谷P1984 SDOI2008烧水问题

    P1984 [SDOI2008]烧水问题 186通过 438提交 题目提供者lych 标签数论(数学相关)模拟各省省选 难度普及+/提高 提交该题 讨论 题解 记录 最新讨论 求助! 也是醉了... ...

  7. Andriod项目开发实战（1）——如何在Eclipse中的一个包下建新包

    最开始是想将各个类分门别类地存放在不同的包中,所以想在项目源码包中新建几个不同功能的包eg:utils.model.receiver等,最后的结果应该是下图左边这样的:   很明显建立项目后的架构是上 ...

  8. asp.net解决数据转换为DBNULL的问题

    if (string.IsNullOrEmpty(CookieHelper.GetCookie("DEPID", "theway").ToString()) = ...

  9. Android添加权限大讲解

    对于新手来说,最烦恼的不是如何从网上下载到安卓项目,而是下载到的安卓项目不知道如何添加权限和要添加哪些权限. 现在就针对安卓的权限来讲解这些权限应该具体用在什么地方 首先在项目下找到 AndroidM ...

  10. 在Windows程序中启用console输出-2016.01.04

    在某些时候,我们可能需要在Win32窗口应用程序中打开控制台窗口,打印一些消息,或者作为当前程序的另外一个人机交互界面,或者为了帮助调试程序.为了达到这种效果,需要了解函数AllocConsole和C ...