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. django 获取系统当前时间 和linux 系统当前时间不一致 问题处理。

    问题场景: 在django admin models 实体对象添加一个属性最后修改时间,用户在添加.修改是系统自动修改操作时间. UpdateTime自动获取系统时间.并且自动修改. 代码设置如下. ...

  2. StrictMode对SharedPreferences的检查出来的IO操作

    在使用StrictMode时,发现会爆出 StrictMode policy violation;~duration=1949 ms: android.os.StrictMode$StrictMode ...

  3. 共享池之六:shared pool latch/ library cache latch /lock pin 简介

    latch:library cache --desc v$librarycache; latch:library cache用于保护hash bucket.library cache lock保护HA ...

  4. QT5.3.2在ARM上的移植

    ubuntu10.04 准备移植phonon,4.5移植失败.播放声音就出错...没办法.转移到QtMutimedia 安装交叉编译工具这里就不提了... 1.下载QT5.3.2:http://dow ...

  5. Android:使用adb命令行导出[数据库db3]文件

    cmd->cd到:D:\tools\adt-bundle-windows-x86_64-20140321\adt-bundle-windows-x86_64-20140321\sdk\platf ...

  6. SDUT 3346 数据结构实验之二叉树七：叶子问题

    数据结构实验之二叉树七:叶子问题 Time Limit: 1000MS Memory Limit: 65536KB Submit Statistic Problem Description 已知一个按 ...

  7. Drupal常用开发工具（一）——Devel模块

    进行 Drupal 开发时有许多模块和工具可供使用,其中最常用的两项便是 Devel 及 Drupal for Firebug.本文和<Drupal常用开发工具(二)——Drupal for F ...

  8. Web 项目 中读取专用配置文件

    在 web 开发中,有时我们要为 业务逻辑处理 配置专用的 配置文件,也就是 xml 文件,这样可以极大的方便维护工作,但是读取 专用的配置文件还需要自己写一个方法,在这里,我封装了一个公用 的方法: ...

  9. 设置Eclipse的字体风格方式

    1:Eclipse版本号:3.7.0(汉化版) 假设eclipse已经打开 窗口--->首选项--->常规--->外观--->颜色和字体--->基本--->文字字体 ...

  10. python字典的常用操作方法

    Python字典是另一种可变容器模型(无序),且可存储任意类型对象,如字符串.数字.元组等其他容器模型.本文章主要介绍Python中字典(Dict)的详解操作方法,包含创建.访问.删除.其它操作等,需 ...