今天尝试开发一个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

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>

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>
上面的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文件中有这么一段:
<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>
刚刚说了,<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字样时,说明我们的扩展已经安装成功了!

转载于:https://www.cnblogs.com/memaxiaofeng/archive/2013/04/02/3275500.html

Firefox扩展开发 Hello World!相关推荐

  1. firefox扩展开发(二):用XUL创建窗口控件

    firefox扩展开发(二):用XUL创建窗口控件 2008-06-11 16:57 1.创建一个简单的窗口 <?xml version="1.0"?> <?xm ...

  2. firefox扩展开发(四) : 更多的窗口控件

    firefox扩展开发(四) : 更多的窗口控件 2008-06-11 17:00 标签盒子 标签盒子是啥?大家都见过,就是分页标签: 对应的代码: <?xml version="1. ...

  3. firefox扩展开发(八) :控件激活

    firefox扩展开发(八) :控件激活 2008-06-11 17:01 当我们用鼠标点击一个控件,或者用TAB键移动到一个控件上时,我们说这个控件被激活 了(focus),离开这个控件时,我们说这 ...

  4. 提高firefox扩展开发效率

    本文介绍一些技巧和开发扩展中使用的工具,主要参考:https://developer.mozilla.org/En/Firefox_addons_developer_guide的第五章(Chapter ...

  5. Firefox 扩展开发 install.rdf和chrome.manifest

    现在我们以一个hello world扩展为例来说明Firefox 扩展的基本运行方式.先下载 Hello World extension,解压缩,下面假定路径是c:\helloworld. 设置fir ...

  6. Firefox扩展开发笔记 - 如何给扩展打包,xpi格式

    原创声明:     本文章为原创,欢迎转载,但请给出本文链接,多谢合作.     本文链接:http://blog.csdn.net/epinszteinic/archive/2009/11/13/4 ...

  7. firefox 扩展

    firefox 扩展 <table border="0" cellpadding="4"> <tbody><tr> < ...

  8. 基于Mozilla平台的扩展开发(续)----XPCOM组件篇

    源代码下载:HelloWorld示例.rar 在<浅谈基于Mozilla ThunderBird的扩展开发>这篇入门文章中简单介绍了基于Mozllia平台进行扩展开发的基础知识,但仍然欠缺 ...

  9. 于Mozilla平台的扩展开发

    [url]http://www.cnblogs.com/phinecos/archive/2008/04/25/1171614.html[/url] 于Mozilla平台的扩展开发(续)----XPC ...

最新文章

  1. Design Pattern: Observer Pattern
  2. 嫌微软要价“太狠” 东莞网吧巨头拒绝付费
  3. Back-Training: 用于问题生成和段落检索的全新领域自适应方法
  4. Sery送的书与网站短信解决方案
  5. C++ 实现无向图的最小生成树Kruskal算法(完整代码)
  6. C++基类指针指向派生类(指针)
  7. python模拟猫狗大战_tensorflow实现猫狗大战(分类算法)-阿里云开发者社区
  8. C++ I/O流 格式控制(下)
  9. jupyter 功能插件
  10. 【收藏】图解最常用的10个机器学习算法!
  11. linux c 库依赖
  12. 成也萧何,败也萧何---PIG JOIN 的replicated
  13. matlab改进中值滤波,求助中值滤波和自适应中值滤波算法错误修改
  14. svn和git版本管理
  15. 打蚊子表情包_打死蚊子表情包 - 打死蚊子微信表情包 - 打死蚊子QQ表情包 - 发表情 fabiaoqing.com...
  16. 如何只用电脑登录微信
  17. HDU 4422 The Little Girl who Picks Mushrooms
  18. 单片机c语言计算器,基于STC89C52单片机的计算器的设计.doc
  19. C++complex复数类
  20. 计算机三级数据库考试知识点及题库总结(最全)

热门文章

  1. Android开发:Kotlin下配置DataBinding
  2. Vuex 2.0 源码分析
  3. Linux修改终端显示前缀及环境变量
  4. 自定义图片字段调用的问题出现{dede:img ..}
  5. js调试控制台使用详解图解
  6. HTML5基础-Mark标签高亮显示文本
  7. Ubuntu下嵌入式Qt开发环境配置全攻略
  8. Java常见异常及解释
  9. Parallel 并发编程实例
  10. Numpy中矩阵对象