入门篇

今天尝试开发一个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>[email protected]</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的方式。

转自：http://blog.csdn.net/zhaozheng7758/article/details/6307839

时间： 2024-10-09 22:26:04

入门篇的相关文章

《Java从入门到放弃》入门篇：springMVC数据校验

昨天我们扯完了数据传递,今天我们来聊聊数据校验的问题.来,跟着我一起读:计一噢叫,一按艳. 在springMVC中校验数据也非常简单,spring3.0拥有自己独立的数据校验框架,同时支持JSR303标准的校验框架. Spring的DataBinder在进行数据绑定时,会同时调用校验框架完成数据校验工作. 具体使用步骤如下: 1)导入数据校验的JAR包 2)在springmvc的配置文件中添加校验Bean 3)修改实体类,在属性上加上校验的注解 4)修改昨天的login4方法,加上校验的相关代码

Vue学习笔记入门篇——组件的使用

本文为转载,原文:Vue学习笔记入门篇--组件的使用 组件定义 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 组件使用 注册 注册一个全局组件,你可以使用 Vue.component(tagName, options).组件在注册之后,便可以在父实例的模块中以自定义元素 的形式使用.

Vue学习笔记入门篇——组件的内容分发(slot)

本文为转载,原文:Vue学习笔记入门篇--组件的内容分发(slot) 介绍 为了让组件可以组合,我们需要一种方式来混合父组件的内容与子组件自己的模板.这个过程被称为 内容分发 (或 "transclusion" 如果你熟悉 Angular).Vue.js 实现了一个内容分发 API,使用特殊的 'slot' 元素作为原始内容的插槽. 编译作用域 在深入内容分发 API 之前,我们先明确内容在哪个作用域里编译.假定模板为: <child-component> {{ messa

漫游Kafka入门篇之简单介绍

原文地址:http://blog.csdn.net/honglei915/article/details/37564521 介绍 Kafka是一个分布式的.可分区的.可复制的消息系统.它提供了普通消息系统的功能,但具有自己独特的设计.这个独特的设计是什么样的呢? 首先让我们看几个基本的消息系统术语: Kafka将消息以topic为单位进行归纳. 将向Kafka topic发布消息的程序成为producers. 将预订topics并消费消息的程序成为consumer. Kafka以集群的方式运行,

现代C++学习笔记之二入门篇2,数据转换

static_cast:    这种强制转换只会在编译时检查. 如果编译器检测到您尝试强制转换完全不兼容的类型,则static_cast会返回错误. 您还可以使用它在基类指针和派生类指针之间强制转换,但是,编译器在无法分辨此类转换在运行时是否是安全的. dynamic_cast: dynamic_cast在运行时检查基类指针和派生类指针之间的强制转换. dynamic_cast 是比 static_cast 更安全的强制类型转换,但运行时检查会带来一些开销. const_cast:    con

软件测试系列之入门篇

一.你知道软件测试有多重要吗? 在国际上,软件测试(软件质量控制)是一件非常重要的工程工作,测试也作为一个非常独立的职业.在IBM.Microsoft等开发大型系统软件公司,很多重要项目的开发测试人员的比例能够达到1:2甚至1:4. 在国内软件测试的地位还不够高,并且大多只停留在软件单元测试.集成测试和功能测试上.软件测试从业人员的数量同实际需求有不小差距,国内软件企业中开发人员与测试人员数量一般为5:1,因此,国内的软件测试产业化还有待开发和深掘. 说到这里不知道你反应是高兴还是失望?但是我却

hacker入门篇——相关书籍

1.<黑客大曝光:网络安全机密与解决方案(第7版)> 简介:这是一本老外写的书,比较适合入门看,内容包括一些基本的攻防流程,基本工具软件,网络安全的一些基本概念等,对整个网络安全和黑客入侵都有比较全面的介绍.对Windows和Unix系统做了分别得介绍,新版(第7版)还对现今新兴技术无线网.移动设备等方面的安全知识做了介绍.虽然关于具体细节的介绍比较少,但通过这本书可以让初学小白们对黑客有一个全面完整的认识.推荐作为第一本读物阅读. PDF: 第六版:http://pan.baidu.com/

微信支付－－入门篇

公众号支付有2种支付方式: JS API 支付:是指用户打开图文消息或者扫描二维码,在微信内置浏览器打开网页进行的支付.商户网页前端通过使用微信提供的 JS API,调用微信支付模块.这种方式,适合需要在商户网页进行选购下单的购买流程.  Native(原生)支付:是指商户组成符合 Native(原生)支付规则的 URL 链接,用户可通过点击该链接或者扫描对应的二维码直接进入微信支付模块(微信客户端界面),即可进行支付.这种方式,适合无需选购直接支付的购买流程. 以上两种方式最大的区别是:是否需

微信小程序入门篇

微信小程序入门篇: 准备工作 IDE搭建 就不多说了,没有内测码去下载个破解版吧,我用了一下,学习完全够了!IDE破解版+安装教程 图片发自简书App 知识准备 JavaScrip还是要看看的,推荐教程 廖雪峰大神的博客 HTML+CSS 大概知道是干啥的就行 从零开始 微信小程序中就四种类型的文件 js ---------- JavaScrip文件 json -------- 项目配置文件,负责窗口颜色等等 wxml ------- 类似HTML文件 wxss ------- 类似CSS文件

Spring Boot干货系列：（一）优雅的入门篇

Spring Boot干货系列:(一)优雅的入门篇http://www.cnblogs.com/zheting/p/6707032.html  全篇参考:http://www.cnblogs.com/zheting/category/966890.html 前言 Spring一直是很火的一个开源框架,在过去的一段时间里,Spring Boot在社区中热度一直很高,所以决定花时间来了解和学习,为自己做技术储备.   正文 首先声明,Spring Boot不是一门新技术,所以不用紧张.从本质上来说,