今天参考firefox的插件教程,写了一个helloworld的firefox插件,显示效果就是在firefox的右下角的状态栏中会有Hello, World字样的,下面我会按照我的学习顺序简单介绍一下整个的制作过程;
一、了解Extension到底是什么东东;
首先我们需要搞清楚firefox的插件到底是什么东东;我想大家也都安装过firefox的插件了吧?比如Tab增强扩展,Tab clicking options, 鼠标超级拖动增强扩展,Super DragAndGo, 以及处理Activx的多媒体扩展,MediaWrap等等;如果你的观察够仔细,你会发现这些扩展都是以xpi为结尾的,那么这些xpi文件又是什么文件呢?
想知道xpi到底是什么文件,只需要亲自实验一下就可以了。因此我们这里下载一个扩展文件用来作实验,就比如键盘操作扩展conkeror吧,下载下来后是一个conkeror-firefox-0.42.xpi的文件;
Linux环境下,使用file查看此文件——
# file conkeror
-
firefox
-
0.42
.xpi
conkeror
-
firefox
-
0.42
.xpi: Zip archive data, at least v1.
0
to extract
天阿,这个xpi文件尽然就是我们最熟悉的zip压缩文件!
赶紧解压开来看看:
#mkdir conkeror
#cd conkeror; unzip ..
/
conkeror;
#ls
总计 12
drwxr-xr-x 3 root root 4096 06-27 09:46 chrome
drwxr-xr-x 2 root root 4096 06-27 09:45 components
-rw-r--r-- 1 root root 1039 01-26 18:39 install.rdf
我们可以看到两个文件夹,一个rdf文件;
chrome是Mozilla规定扩展必须具备的目录;
components是约定俗成的可选目录,用于存放自定义的 XPCOM 组件文件。由于大多数的扩展根本没必要自己定义 XPCOM 组件,因此,在没有自定义 XPCOM 组件的情况下,此目录是不用存在的 ;
install.rdf, 它是一个 RDF/XML 格式的文件,用于描述当前扩展的注册信息和附加信息等。扩展在安装时,负责安装扩展的程序会自动分析此文件的信息,然后将这些信息注册到 Mozilla 系统下。此文件必须被命名为 install.rdf,并置于扩展压缩包的顶级目录下;
我们在分别进两个子目录看看:
#ls chrome
/
conkeror.jar
是一个jar文件,这个jar又是什么文件呢?先别急,一会儿我们就可以看到他的真面目拉。
看看components目录:
#ls components
/
nsCrank.js
这个js文件我想大家都能猜对的了,就是普通的javascript文件;
注意:这里有必要提一点的是firefox上层的很多东西都是使用javascript写的,因此在其扩展中也是处处都和javascript有着千丝万缕的联系的。
了解了一个扩展的大致目录结构,那么下面我们就来编写一个简单的初级的helloworld;
二、根据文件结构写出Helloworld的Extension;
首先说明,我们写的这个helloworld是在firefox的右下角的状态栏中会有Hello, World字样,这是最简单的helloworld,最为联系和理解Extension开发的过程,我们就用这个最简单的实例来向大家展示这个过程。
建立一个开发我们自己Extension的专用目录,比如my-extension;进入目录中后,首先需要搭建目录结构,建立必须的文件;具体过程如下:
#mkdir
-
p chrome
/
content
#touch chrome.manifest install.rdf chrome
/
content
/
my
-
extension.xul
ok,此时我们的文件结构已经建立完毕,下面简单介绍一下各目录和文件的作用。
content:用于存储负责描述扩展界面的 XUL 文件和完成实际逻辑功能的 JS 文件;
chrome.manifest:负责将扩展的各种包注册到 Mozilla 的 chrome 系统中。Gecko 1.8 内核新引入的机制,用来代替原有的 contents.rdf 文件;
install.rdf前面介绍过了,就是是一个 RDF/XML 格式的文件,用于描述当前扩展的注册信息和附加信息等。
my - extension.xul,这是插件的界面文件,其实就是一种xml格式的文本文件,使用xml方式描述界面图元信息和属性;
打开install.rdf文件,将下述内容贴到文件内,注意,没有前面的行号,那个是vi生成的,我懒得去掉了。
1
<?
xml version
=
"
1.0
"
?>
2
3
<
RDF xmlns
=
"
http://www.w3.org/1999/02/22-rdf-syntax-ns#
"
4
xmlns:em
=
"
http://www.mozilla.org/2004/em-rdf#
"
>
5
6
<
Description about
=
"
urn:mozilla:install-manifest
"
>
7
<
em:id
>
lsosa@lsosa
</
em:id
>
8
<
em:version
>
0.0
.
1
</
em:version
>
9
<
em:type
>
2
</
em:type
>
10
11
<!--
Target Application
this
extension can install into,
12
with minimum and maximum supported versions.
-->
13
<
em:targetApplication
>
14
<
Description
>
15
<
em:id
>
{ec8030f7-c20a-464f-9b0e-13a3a9e97384}
</
em:id
>
16
<
em:minVersion
>
1.5
</
em:minVersion
>
17
<
em:maxVersion
>
2.0
.
0
.
*</
em:maxVersion
>
18
</
Description
>
19
</
em:targetApplication
>
20
21
<!--
Front End MetaData
-->
22
<
em:name
>
my-extension
<
em:name
>
23
<
em:description
>
A test extension writen by lsosa;
</
em:description
>
24
<
em:creator
>
lsosa
</
em:creator
>
25
<
em:homepageURL
>
http:
//
blog.csdn.net/baymoon/</em:homepageURL>
26
</
Description
>
27
</
RDF
>
}
其中的em:id标签,它是用来唯一的标识某个扩展,此标记内容的要求在 Firefox 1.5 版本的前后还发生了变化。在 1.5 以前的版本中,em:id 标记的内容被要求必须以
GUID 格式进行表示;而在 1.5 及后续版本中,你还可以使用一种格式为
extension@domain 的 id。如下示例了两种不同的格式:我这里就采用了后一种方式;
<em:type>2</em:type>属性为2表明这是一个扩展,如果为4,则注册为theme文件;
{ec8030f7-c20a-464f-9b0e-13a3a9e97384} 这是firefox的应用程序ID;
上面这是一个注册文件,下面来看看界面文件是什么样子的。
前面其实已经提到了Extension的界面文件,就是xul文件,那么这个xul到底是什么文件呢?它又是起什么作用的呢?
这里很有必要提到的一点就是Firefox的界面就是由javascript和xul结合起来来完成显示的!
而前面已经题到了xul其实就是xml格式的描述文件,我想你应该已经猜到了,动态的javascript+静态的xul描述文件就是我们当前看到的Firefox界面,以及它的各种扩展界面。
在实际的Extension编写实现中,我们实际上是通过增加或者修改某个Widget来达到显示我们的Extension的目的。这里的Helloworld也是这个原理,它通过在statusbar中增加一个显示label来显示Helloworld,完成我们的这次入门程序的编写。
为了更好的理解Firefox界面也是xul文件描述的,我们来看看Firefox的xul文件吧。
它就是browser.xul,就在$FIREFOX_INSTALL_DIR/chrome/browser.jar文件中,这个jar也是zip压缩的文件,你可以用unzip打开他,就像你打开xpi扩展文件一样。里面你可以找到 browser.xul文件,在文件里面你可以看到 类似下面这几条语句:
<statusbar class="chromeclass-status" id="status-bar">
... <statusbarpanel>s ...
</statusbar>
其中的
<statusbar class="chromeclass-status" id="status-bar">就是Xul Overlay的一个合并入口。
Xul Overlay是一种在运行时将Widget附加到xul文档的方法。
下面我们编辑我们自己的xul文件, chrome / content / my - extension.xul,将下面的内容贴进去。
1
<?
xml version
=
"
1.0
"
?>
2
<
overlay id
=
"
my-extension
"
3
xmlns
=
"
http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul
"
>
4
<
statusbar id
=
"
status-bar
"
>
5
<
statusbarpanel id
=
"
lsosa-test-panel
"
label
=
"
Hello, World
"
/>
6
</
statusbar
>
7
</
overlay
>
将下面两句话放到chrome.manifest文件中;
1
content my-extension chrome
/
content
/
2
overlay chrome:
//
browser/content/browser.xul chrome:
//
my-extension/content/my-extension.xul
其中的对应关系这里不细讲,其中关键的就是需要理解一个chrome协议。
好了,下面我们可以测试了;
测试——
1、打开Profile文件夹;这些文件夹一般在这里:
Operating system Profile folder location(s)
Windows
95
/
98
/
Me C:WindowsApplication DataMozilla
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
C:WindowsProfiles
<
Windows login
/
user name
>
Application DataMozilla
Windows NT
4
.x C:WinntProfiles
<
Windows login
/
user name
>
Application DataMozilla
Windows
2000
and XP C:Documents and Settings
<
Windows login
/
user name
>
Application DataMozilla
Windows Vista C:Users
<
Windows login
/
user name
>
AppDataRoamingMozilla
Unix
~/
.mozilla
/
Mac OS X
~/
Library
/
Mozilla
/
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
~/
Library
/
Application Support
/
Linux下进入~/.mozilla/firefox/?????.default/extensions目录即可;
2、新建一个文本文件,名字就是你前面填写的那个<em:id>中的内容,我们这里是: lsosa@lsosa
3、重启Firefox,此时你可以看到右下角会有一个Hello,world的字样,表明注册扩展并测试成功!
三、书写Extension结构的简便方法,其实就是wizard;
推荐拿这个练手:
http://ted.mielczarek.org/code/mozilla/extensionwiz/
Reference:
http://developer.mozilla.org/en/docs/Building_an_Extension
http://www.lewislv.org/mozilla-ext/mozilla-ext.html#ch3_3_1_1
一、了解Extension到底是什么东东;
首先我们需要搞清楚firefox的插件到底是什么东东;我想大家也都安装过firefox的插件了吧?比如Tab增强扩展,Tab clicking options, 鼠标超级拖动增强扩展,Super DragAndGo, 以及处理Activx的多媒体扩展,MediaWrap等等;如果你的观察够仔细,你会发现这些扩展都是以xpi为结尾的,那么这些xpi文件又是什么文件呢?
想知道xpi到底是什么文件,只需要亲自实验一下就可以了。因此我们这里下载一个扩展文件用来作实验,就比如键盘操作扩展conkeror吧,下载下来后是一个conkeror-firefox-0.42.xpi的文件;
Linux环境下,使用file查看此文件——
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
赶紧解压开来看看:
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
总计 12
drwxr-xr-x 3 root root 4096 06-27 09:46 chrome
drwxr-xr-x 2 root root 4096 06-27 09:45 components
-rw-r--r-- 1 root root 1039 01-26 18:39 install.rdf
chrome是Mozilla规定扩展必须具备的目录;
components是约定俗成的可选目录,用于存放自定义的 XPCOM 组件文件。由于大多数的扩展根本没必要自己定义 XPCOM 组件,因此,在没有自定义 XPCOM 组件的情况下,此目录是不用存在的 ;
install.rdf, 它是一个 RDF/XML 格式的文件,用于描述当前扩展的注册信息和附加信息等。扩展在安装时,负责安装扩展的程序会自动分析此文件的信息,然后将这些信息注册到 Mozilla 系统下。此文件必须被命名为 install.rdf,并置于扩展压缩包的顶级目录下;
我们在分别进两个子目录看看:
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
conkeror.jar
看看components目录:
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
注意:这里有必要提一点的是firefox上层的很多东西都是使用javascript写的,因此在其扩展中也是处处都和javascript有着千丝万缕的联系的。
了解了一个扩展的大致目录结构,那么下面我们就来编写一个简单的初级的helloworld;
二、根据文件结构写出Helloworld的Extension;
首先说明,我们写的这个helloworld是在firefox的右下角的状态栏中会有Hello, World字样,这是最简单的helloworld,最为联系和理解Extension开发的过程,我们就用这个最简单的实例来向大家展示这个过程。
建立一个开发我们自己Extension的专用目录,比如my-extension;进入目录中后,首先需要搭建目录结构,建立必须的文件;具体过程如下:
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
content:用于存储负责描述扩展界面的 XUL 文件和完成实际逻辑功能的 JS 文件;
chrome.manifest:负责将扩展的各种包注册到 Mozilla 的 chrome 系统中。Gecko 1.8 内核新引入的机制,用来代替原有的 contents.rdf 文件;
install.rdf前面介绍过了,就是是一个 RDF/XML 格式的文件,用于描述当前扩展的注册信息和附加信息等。
my - extension.xul,这是插件的界面文件,其实就是一种xml格式的文本文件,使用xml方式描述界面图元信息和属性;
打开install.rdf文件,将下述内容贴到文件内,注意,没有前面的行号,那个是vi生成的,我懒得去掉了。
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
<em:type>2</em:type>属性为2表明这是一个扩展,如果为4,则注册为theme文件;
{ec8030f7-c20a-464f-9b0e-13a3a9e97384} 这是firefox的应用程序ID;
上面这是一个注册文件,下面来看看界面文件是什么样子的。
前面其实已经提到了Extension的界面文件,就是xul文件,那么这个xul到底是什么文件呢?它又是起什么作用的呢?
这里很有必要提到的一点就是Firefox的界面就是由javascript和xul结合起来来完成显示的!
而前面已经题到了xul其实就是xml格式的描述文件,我想你应该已经猜到了,动态的javascript+静态的xul描述文件就是我们当前看到的Firefox界面,以及它的各种扩展界面。
在实际的Extension编写实现中,我们实际上是通过增加或者修改某个Widget来达到显示我们的Extension的目的。这里的Helloworld也是这个原理,它通过在statusbar中增加一个显示label来显示Helloworld,完成我们的这次入门程序的编写。
为了更好的理解Firefox界面也是xul文件描述的,我们来看看Firefox的xul文件吧。
它就是browser.xul,就在$FIREFOX_INSTALL_DIR/chrome/browser.jar文件中,这个jar也是zip压缩的文件,你可以用unzip打开他,就像你打开xpi扩展文件一样。里面你可以找到 browser.xul文件,在文件里面你可以看到 类似下面这几条语句:
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
Xul Overlay是一种在运行时将Widget附加到xul文档的方法。
下面我们编辑我们自己的xul文件, chrome / content / my - extension.xul,将下面的内容贴进去。
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
好了,下面我们可以测试了;
测试——
1、打开Profile文件夹;这些文件夹一般在这里:
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
2、新建一个文本文件,名字就是你前面填写的那个<em:id>中的内容,我们这里是: lsosa@lsosa
3、重启Firefox,此时你可以看到右下角会有一个Hello,world的字样,表明注册扩展并测试成功!
三、书写Extension结构的简便方法,其实就是wizard;
推荐拿这个练手:
http://ted.mielczarek.org/code/mozilla/extensionwiz/
Reference:
http://developer.mozilla.org/en/docs/Building_an_Extension
http://www.lewislv.org/mozilla-ext/mozilla-ext.html#ch3_3_1_1