今天尝试开发一个Firefox的插件。虽然比较简单,网上也有很多教程,但是感觉一些教程写的比较麻烦,在初步的开发过程中并没有用到那些东西,于是自己把开发过程记录下来。我是根据Mozilla官方教程开发的,有兴趣的朋友可以自己去看看:https://developer.mozilla.org/en/Building_an_Extension。
按照一般的教程,第一个程序都是使用最简单的Hello World,现在我们就制作一个Firefox的Hello World插件。
开发Firefox插件并没有看上去的那样复杂,仅仅使用XML和JavaScript就可以完成。当然,这个意思是Firefox插件开发使用的技术是XML和JavaScript,要做出一个完善的插件涉及到很多方面。但是对于我们的Hello World就不需要那么多东西啦!
1. 准备目录结构
首先在硬盘上建立一个目录,名为extension。这个名字是随意取的。然后在里面建立chrome文件夹,再在chrome里面建立content文件夹。注意这两个文件夹的名字都是固定的,不能随意改动。然后在extension里面新建两个文本文件,并且取名为chrome.manifest和install.rdf。这样,就建立起如下

目录结构: extension

|--install.rdf

|--chrome.manifest

|--chrome     |--content      |--sample.xul

如图

2. 编写install.rdf
用文本编辑器打开install.rdf文件,输入以下内容:

<?xml version="1.0"?>

<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"

xmlns:em="http://www.mozilla.org/2004/em-rdf#">

<Description about="urn:mozilla:install-manifest">

<!-- 指出插件的ID。该ID应该是一个Email格式的字符串,或者是一个GUID。注意,使用Email的作用是保证该ID的唯一性,并不要求这个Email地址是有效的。必填。 -->

<em:id>sample@example.net</em:id>

<!-- 指出插件的版本号。必填。 -->

<em:version>1.0</em:version>

<!-- 在这里的值必须是2。该标签说明该应用的Firefox插件,而不是其他XUL应用程序。Firefox插件的代码是2,如果是Firefox主题则会是4。必填。 -->

<em:type>2</em:type>

<!-- 安装插件的目标应用程序以及最高版本和最低版本。必填。 -->

<em:targetApplication>

<Description>

<!-- Firefox的ID,这个值不能改变。必填。 -->

<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>

<!-- 指明能使用该插件的Firefox最低版本。这里是指1.5。必填。 -->

<em:minVersion>1.5</em:minVersion>

<!-- 指明能使用该插件的Firefox最高版本。这里是指3.0.x。结合minVersion,即是说本插件只适用于1.5和3.0.x之间的版本。必填。 -->

<em:maxVersion>3.0.*</em:maxVersion>

</Description>

</em:targetApplication>

<!-- 插件的元数据。 -->

<!-- 插件名字。必填。 -->

<em:name>sample</em:name>

<!-- 插件的描述。这里的描述将出现在Firefox的工具-附加组件的描述栏。选填。 -->

<em:description>A test extension</em:description>

<!-- 插件作者。选填。 -->

<em:creator>galaxy.org</em:creator>

<!-- 插件主页的URL。选填。 -->

<em:homepageURL>http://www.example.com/</em:homepageURL>

</Description>

</RDF>

<?xml version="1.0"?> 

<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <Description about="urn:mozilla:install-manifest">
<!-- 指出插件的ID。该ID应该是一个Email格式的字符串,或者是一个GUID。注意,使用Email的作用是保证该ID的唯一性,并不要求这个Email地址是有效的。必填。 -->
<em:id>sample@example.net</em:id>
<!-- 指出插件的版本号。必填。 -->
<em:version>1.0</em:version>
<!-- 在这里的值必须是2。该标签说明该应用的Firefox插件,而不是其他XUL应用程序。Firefox插件的代码是2,如果是Firefox主题则会是4。必填。 -->
<em:type>2</em:type> <!-- 安装插件的目标应用程序以及最高版本和最低版本。必填。 -->
<em:targetApplication>
<Description>
<!-- Firefox的ID,这个值不能改变。必填。 -->
<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
<!-- 指明能使用该插件的Firefox最低版本。这里是指1.5。必填。 -->
<em:minVersion>1.5</em:minVersion>
<!-- 指明能使用该插件的Firefox最高版本。这里是指3.0.x。结合minVersion,即是说本插件只适用于1.5和3.0.x之间的版本。必填。 -->
<em:maxVersion>3.0.*</em:maxVersion>
</Description>
</em:targetApplication> <!-- 插件的元数据。 -->
<!-- 插件名字。必填。 -->
<em:name>sample</em:name>
<!-- 插件的描述。这里的描述将出现在Firefox的工具-附加组件的描述栏。选填。 -->
<em:description>A test extension</em:description>
<!-- 插件作者。选填。 -->
<em:creator>galaxy.org</em:creator>
<!-- 插件主页的URL。选填。 -->
<em:homepageURL>http://www.example.com/</em:homepageURL>
</Description>
</RDF>

install.rdf文件是供具有插件管理功能的XUL应用程序使用的,XUL应用程序可以使用该文件识别正在安装的插件的信息。install.rdf文件具有下面的格式:

<?xml version="1.0"?>

<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"

xmlns:em="http://www.mozilla.org/2004/em-rdf#">

<Description about="urn:mozilla:install-manifest">

<!-- properties -->

</Description>

</RDF>

<?xml version="1.0"?> 

<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:em="http://www.mozilla.org/2004/em-rdf#">
<Description about="urn:mozilla:install-manifest">
<!-- properties -->
</Description>
</RDF>

上面的install.rdf的注释很多,实际应用中就不需要那么多注释了。
3. 编写XUL文件
Firefox的界面使用XUL和JavaScript进行描述。XUL即XML User Interface Language,是Mozilla开发的一种使用XML进行用户界面描述的语言。XUL只用来定义用户界面,其组件的功能由JavaScript进行定义。
Firefox的整个界面都使用XUL进行定义。可以在%FIREFOX_INSTALL_DIR%/chrome/browser.jar里面找到content/browser/browser.xul文件。(说明一下,jar文件可以用WinRAR或其他一些压缩工具解压缩,这是一个使用zip算法压缩的压缩包)在这个XUL文件中有这么一段:

  1. <statusbar id="status-bar">
  2. <!-- ... <statusbarpanel>s ... -->
  3. </statusbar>
<statusbar id="status-bar">
<!-- ... <statusbarpanel>s ... -->
</statusbar>

这里的这个<statusbar id="status-bar">称为“覆盖点(Overlay,我不知道官方的翻译是什么,自己把它翻译成了这个词,想想还算是准确,不过为了不引起混淆,下面还是使用Overlay这个单词吧 :-) )”。所谓Overlay,就是在运行一个XUL文档的时候可以附加其他的XUL文件的方式。就是说,我们本来的XUL是a.xul,这里面有一个Overlay定义为overlay-point,那么我们可以在另外一个b.xul中对这个Overlay进行追加,从而在执行a.xul的时候可以自动的把b.xul的内容附加到overlay-point并运行出来。这么说有些抽象,来看我们的代码:

<?xml version="1.0"?>

<overlay id="sample"

xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<statusbar id="status-bar">

<statusbarpanel id="my-panel" label="Hello, World"    />

</statusbar>

</overlay>

<?xml version="1.0"?>
<overlay id="sample"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<statusbar id="status-bar">
<statusbarpanel id="my-panel" label="Hello, World" />
</statusbar>
</overlay>

刚刚说了,<statusbar id="status-bar">就是一个Overlay,那么在我们的插件的XUL文档就是基于这个Overlay进行扩展。在这里,我们在statusbar上面定义了一个statusbarpanel,它的id是my-panel,label是Hello, World。这段代码比较清晰,就是在原有的statusbar上追加一个statusbarpanel,这个statusbarpanel显示Hello, World。
明白了这段代码之后,我们把这个文件定义成sample.xul,保存在chrome/content下面。可以看到这个文件夹结构和Firefox自有的那个结构是一致的。
在写完了XUL文件之后,我们要定义其chrome.manifest。XUL文档需要通过chrome://协议进行请求。chrome://类似http://协议,只不过是用来请求XUL文档的。在Firefox的地址栏中输入chrome://browser/content/browser.xul,看看有什么反应,就会知道XUL文档的作用了。
这个URL包括四部分: 1) chrome:// - 即协议名,就像http://一样; 2) browser/ - 包名,即插件的包的ID; 3) content/ - 请求内容的类型; 4) browser.xul - 请求的文件名。 所以,chrome://foo/skin/bar.png就是请求一个在foo包下面的skin里面的bar.png文件。
4. 编写chrome.manifest
在chrome.manifest中添加下面一句:
content         sample        chrome/content/
这里指明,请求类型时content,包名是sample,位置是相对于chrome.manifest文件的chrome/content/。注意,这里的最后面一个/是不能缺少的!
然后需要告诉Firefox我们的扩展Overlay,在chrome.manifest里面再添加一句:
overlay chrome://browser/content/browser.xul chrome://sample/content/sample.xul
这句是告诉Firefox,需要在chrome://browser/content/browser.xul加载的时候将chrome://sample/content/sample.xul扩展进来。
5. 测试
至此,我们已经完成了这个Hello World的插件。下面我们测试一下。
使用压缩工具将extension文件夹压缩成zip文件,注意有些工具会将本文件夹加入压缩包,这里要求压缩包解开之后应该是extension下面的两个文件和一个文件夹,而不是extension文件夹。然后将后缀名改为xpi。然后打开Firefox(我测试的版本是3.0.10),将这个xpi拖到窗口中,Firefox将提示安装插件,按照一般的过程安装之后,重启Firefox有时候在安装插件时会有找不到安装脚本的错误,就是因为在压缩时根下面没有install.rdf那一层导致的。
当我们在重启Firefox之后,右下角出现Hello, Word字样时,说明我们的插件已经安装成功了!

关于Firefox浏览器如何支持ActiveX控件,一个小的Hellow World的更多相关文章

  1. 基于MFC的ActiveX控件开发教程------------浏览器插件之ActiveX开发

    浏览器插件之ActiveX开发(一) 一般的Web应用对于浏览器插件能不使用的建议尽量不使用,因为其涉及到安全问题以及影响用户安装(或自动下载注册安装)体验问题.在有特殊需求(如涉及数据安全的金融业务 ...

  2. 最全的基于MFC的ActiveX控件开发教程

    浏览器插件之ActiveX开发(一) 一般的Web应用对于浏览器插件能不使用的建议尽量不使用,因为其涉及到安全问题以及影响用户安装(或自动下载注册安装)体验问题.在有特殊需求(如涉及数据安全的金融业务 ...

  3. ActiveX控件之ActiveXObject is not defined

    ActiveX控件方便用户在网页中插入各种效果,但是并不是所有浏览器都支持该控件. ActiveX是微软独有的,只有基于IE内核的浏览器才能使用. 当出现如上错误,可以将通过该控件创建的对象定义为本地 ...

  4. 浏览器使用ActiveX控件

    在IE中使用ActiveX控件,需要使用HTML中的标志是<OBJECT>,该标记几个重要的参数特性有:1.ID:为控件提供一个标识名称,为HTML代码提供一种访问该控件的入口.2.CLA ...

  5. 非IE内核浏览器如何支持activex插件

    原文地址:https://blog.csdn.net/johnson2008t/article/details/46126605 之前在一个B/S项目中遇到一个需求,就是客户需要在页面上对报表的布局以 ...

  6. 使用C#开发ActiveX控件(新)

    前言 ActiveX控件以前也叫做OLE控件,它是微软IE支持的一种软件组件或对象,可以将其插入到Web页面中,实现在浏览器端执行动态程序功能,以增强浏览器端的动态处理能力.通常ActiveX控件都是 ...

  7. 使用C#开发ActiveX控件(新) 转 http://www.cnblogs.com/yilin/p/csharp-activex.html

    前言 ActiveX控件以前也叫做OLE控件,它是微软IE支持的一种软件组件或对象,可以将其插入到Web页面中,实现在浏览器端执行动态程序功能,以增强浏览器端的动态处理能力.通常ActiveX控件都是 ...

  8. C#制作ActiveX控件及部署升级(摘自网络)

    使用C#开发ActiveX控件 控件开发.制作CAB包.签名.部署 ActiveX控件以前也叫做OLE控件,它是微软IE支持的一种软件组件或对象,可以将其插入到Web页面中,实现在浏览器端执行动态程序 ...

  9. 使用C#开发ActiveX控件

    使用C#开发ActiveX控件(新) 前言 ActiveX控件以前也叫做OLE控件,它是微软IE支持的一种软件组件或对象,可以将其插入到Web页面中,实现在浏览器端执行动态程序功能,以增强浏览器端的动 ...

随机推荐

  1. PHP的基础计算器

    设计一个计算的功能,该功能能够完成运算并且能够对不合理的数据进行验证并且给出错误提示. 规则: 第一个数,第二个数不能够为空 如果操作符是/,第二个数数不能够为0. <?php header(' ...

  2. 解决DB2事物日志满、扩充表字段长度和表空间的命令

    解决DB2事物日志满.扩充表字段长度和表空间的命令 转:http://blog.sina.com.cn/s/blog_4c0137d10100bb5r.html 一.通常我们在使用db2导入数据或进行 ...

  3. 【转】 c++拷贝构造函数(深拷贝,浅拷贝)详解

     c++拷贝构造函数(深拷贝,浅拷贝)详解 2013-11-05 20:30:29 分类: C/C++ 原文地址:http://blog.chinaunix.net/uid-28977986-id-3 ...

  4. javascript学习笔记(5

    1.string Array Date Math 内置对象的属性和方法? 答案: ①String 字符串 属性 :length  获取字符串长度 方法: indexOf()  从左到右检索子字符串在原 ...

  5. Beaglebone Back学习二(功能测试)

    开发板测试 买到开发板后,首先要测试一下板子的功能,这个可以参考官方的步骤(Getting Started)进行. 1 首先下载最新的镜像文件http://beagleboard.org/latest ...

  6. hdu 4622 Reincarnation SAM模板题

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4622 题意:给定一个长度不超过2000的字符串,之后有Q次区间查询(Q <= 10000),问区 ...

  7. Python for 循环 失效

    昨天发现一个负责处理观察者模式的基类工作失败,默认的N个观察者负责处理 发送的一些东西, 其中提供一个内置接口移除观察者: def removeObserver(self, observer): if ...

  8. Eclipse中propedit插件安装(解决property中文问题)

    Eclipse Help--Install New Software... Add... propedit   -- http://propedit.sourceforge.jp/eclipse/up ...

  9. 【linQ】DataContext 入门 , 和 hql , jpql 一样好用

    DataContext 和 LINQ结合后会有巨大的能量 public class UserDataContext : DataContext { public Table<User> U ...

  10. Spring Aop实例之xml配置

    AOP的配置方式有2种方式:xml配置和AspectJ注解方式.今天我们就来实践一下xml配置方式. 我采用的jdk代理,所以首先将接口和实现类代码附上 package com.tgb.aop; pu ...