网站首页
手机版

Firefox插件开发-入门篇

更新时间:2022-04-03 16:57:24作者:佚名

 Firefox插件开发-入门篇

  今天尝试开发一个Firefox的扩展,把自己开发过程记录下来,以备不时之需,同时也为初学者提供一个参考。我是根据Mozilla官方教程开发的,有兴趣的朋友可以自己去看看。

  

  按照一般的教程,第一个程序都是使用最简单的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最高版本。这里是指4.0.x。结合minVersion,即是说本扩展只适用于1.5和4.0.x之间的版本。必填-->

  

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

  

  </Description>

  

  </em:targetApplication>

  

  <!-- 扩展的元数据。 -->

  

  <!-- 扩展名字。必填 -->

  

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

  

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

  

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

  

  <!-- 扩展作者。选填 -->

  

  <em:creator>zaniel</em:creator>

  

  <!-- 扩展主页的URL。选填 -->

  

  <em:homepageURL>http://www.china.alibaba.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,就是在运行一个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,将这个xpi拖到窗口中,Firefox将提示安装扩展,按照一般的过程安装之后,重启Firefox有时候在安装扩展时会有找不到安装脚本的错误,就是因为在压缩时根下面没有install.rdf那一层导致的。

  

  当我们在重启Firefox之后,右下角出现Hello, Word字样时,说明我们的扩展已经安装成功了!

  

  6、导常排查

  

  在安装时,FireFox总是报不是合法的安装包,具体的报错及解决方案如下所示:

  

  Firefox 无法将文件安装至

  

  file:///C:/extension/extension.xpi

  

  ,原因为: 不是合法的安装包

  

  -207

  

  解决方案:在生成extension压缩包的时候,采用zip的方式,而不是rar的方式。


本文标签: 插件  脚本  百科  标签  

为您推荐

word如何进行全文分栏和某段落分栏 word如何进行全文分栏和某段落分栏的区别

word如何进行全文分栏和某段落分栏 在Word2003中,我们可以对一篇文章进行分栏设置,分两栏,分三栏都可以自己设置.像我们平常看到的报纸.公告.卡片.海报

2024-09-12 00:09

word2010大纲怎么显示(word文档显示大纲从哪里按出来)

word2010大纲怎么显示(word2010如何使用大纲视图) 有些时候我们在网上下载的一些word文档太长了,我们其实可以显示大纲,看清楚每一节是否有自己需

2024-09-12 00:08

七种常见的Word打印设置技巧 七种常见的word打印设置技巧视频

七种常见的Word打印设置技巧 七种常见的Word打印设置技巧 1.打印指定页码 有些时候,我们只希望打印文档中的某些页码,只要点击菜单命令"文件→打印",在打

2024-09-12 00:08

四种方框内打钩符号的简易方法 四种方框内打钩符号的简易方法是什么

四种方框内打钩符号的简易方法 如何在Word方框里打钩? 四种方框内打钩符号的简易方法   如何在Word方框里打钩? 一.在方框里打钩的方法一 利用带圈数字来

2024-09-12 00:08

Word文档中对表格中数据进行计算的方法

Word文档中对表格中数据进行计算的方法 Word文档中对表格中数据进行计算的方法 1.在表格的最后一个单元格中单击放置插入点光标,然后在"表格工具-布局"选项

2024-09-12 00:07

怎么关闭Word文档中自动添加项目编号(怎么关闭word文档中自动添加项目编号显示)

怎么关闭Word文档中自动添加项目编号 怎么关闭Word文档中自动添加项目编号 1.启动Word 2013,打开"Word选项"对话框,在左侧选择"校对"选项,

2024-09-12 00:07