按照一般的教程,第一个程序都是使用最简单的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自有的那个结构是一致的。
这个URL包括四部分:
1) chrome:// - 即协议名,就像http://一样;
2) browser/ - 包名,即插件的包的ID;
3) content/ - 请求内容的类型;
4) browser.xul - 请求的文件名。
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字样时,说明我们的扩展已经安装成功了!
本文出自 “豆子空间
” 博客,请务必保留此出处http://devbean.blog.51cto.com/448512/160298
相关推荐
在本实例"Firefox扩展-HelloWorld"中,我们将探讨如何创建一个基础的Firefox扩展,以此来理解其基本架构和开发过程。 首先,"helloworld.xpi"文件是Firefox扩展的打包格式,类似于其他软件的安装程序。XPI...
"HelloWorld"项目就是一个典型的入门级教程,旨在帮助初学者了解如何开发自己的火狐扩展。 开发火狐扩展通常涉及以下几个关键知识点: 1. **XUL(XML User Interface Language)**:XUL是Mozilla使用的一种标记...
这份文档涵盖了从基础的插件开发到高级的浏览器扩展技术,为想要参与Firefox生态建设的开发者提供了详尽的指南。 首先,让我们从"Firefox 插件"开始。Firefox插件是一种轻量级的软件组件,它们可以增强浏览器的功能...
【火柴棍-Hello-World】是针对MatchStick设备的一个入门级应用程序,它展示了如何在基于Firefox OS的流媒体棒上开发和运行基本应用。MatchStick是一款以Firefox操作系统为平台的流媒体设备,类似于Google的...
开发Firefox扩展之前,需要搭建合适的开发环境。这包括: - **了解必要的技术**:如XML、CSS、JavaScript和DOM等。 - **安装必要的开发工具**:如DOM Inspector、Firebug和Chromebug等。 - **设置开发配置文件**:...
"你好,世界!"是编程领域的一个传统,用于初次接触新语言或平台时的简单示例。...通过深入研究和扩展这个基础应用,开发者可以逐步掌握Firefox OS应用开发的精髓,并创建出更加丰富和功能强大的应用程序。
通过在Firefox中安装这个扩展,你可以右键点击包含多个链接的页面,然后在释放右键后,所有选定的链接会同时被打开。为了避免与鼠标手势冲突,Multi Links 还允许你设置辅助按键(如Alt或Shift)来触发这一功能。 ...
此外,jQuery对浏览器的广泛兼容性也是其亮点,它支持包括Internet Explorer 6.0+、Firefox 1.5+、Safari 2.0+、Opera 9.0+在内的多种浏览器,消除了开发者在跨浏览器兼容性上的烦恼。 jQuery的使用使得DOM操作变得...
1. **浏览器开发者工具**:如Chrome DevTools或Firefox Developer Tools,用于调试JavaScript代码和查看元素样式。 2. **IDE/编辑器**:例如Visual Studio Code、WebStorm,提供代码补全、语法高亮等特性,提高开发...
在Firefox和IE中,这个属性都是可用的。 - `prototype`:这个属性用于扩展对象的功能,可以添加新的方法或者属性。 2. **方法**: - `anchor()`:创建一个HTML锚点,如`<a name="myanchor">Hello world!</a>`。 ...
Silverlight运行在Windows和Mac OS X操作系统上的主流浏览器,支持IE、Firefox和Safari等浏览器。它主要由XAML(可扩展应用程序标记语言)来描述用户界面,并且可以使用C#、***、JavaScript等多种编程语言来编写业务...
- **跨浏览器兼容性**:不同浏览器可能有不同的渲染规则,需要特别注意Chrome、Firefox、Internet Explorer、Safari等主流浏览器之间的差异。 - **Yahoo! UI Library (YUI)**:提供了YUI Reset CSS和YUI Fonts CSS来...
在JavaScript的世界里,跨浏览器的事件处理是个常见的挑战。...同时,通过`__defineGetter__`扩展原型,使得Firefox也能支持`window.event`,提高代码的可移植性。这对于编写跨平台的JavaScript应用来说是非常重要的。
2. 针对其他支持标准的浏览器,如Firefox、Chrome等,直接使用`XMLHttpRequest`构造函数。 代码中展示了如何在不同浏览器中创建`XMLHttpRequest`对象的兼容性写法,这是为了确保跨浏览器的兼容性。 ### 发起Ajax...
为了提高开发和调试的效率,文档建议安装React和Redux的开发者工具扩展,这些扩展对于Chrome和Firefox浏览器都是可用的。文档中给出了安装这些开发者工具的GitHub地址,并鼓励读者按照具体的安装指导完成安装。 在...
- **调试工具推荐**:推荐使用 Firefox + Firebug 的组合进行 ExtJS 开发调试。Firebug 提供了强大的 DOM 操作功能、控制台日志输出、AJAX 请求监控等功能,有助于快速定位问题并优化代码。 #### 四、入门示例详解 ...
- 大多数现代浏览器都支持书签脚本,包括Chrome、Firefox、Safari和Edge。 - 但某些高级特性可能在旧版本的浏览器中无法工作,因此编写时需要注意浏览器兼容性问题。 8. **自定义与扩展**: - 用户可以根据自己...
- **浏览器支持**: Knockout支持主流浏览器,包括Chrome、Firefox、Safari等。 - **寻求帮助**: 开发者可以通过Knockout的官方论坛、GitHub问题跟踪系统等方式寻求帮助。 - **更多教程和例子**: 官方网站提供了大量...
然而,随着现代浏览器的演进和安全性的提高,BHO的使用在近年来有所减少,被更安全、更现代的扩展机制所取代,如Chrome的扩展API和Firefox的WebExtensions。尽管如此,理解BHO的工作原理和技术细节,对于深入探索...