本文出自 “豆子空间” 博客,请务必保留此出处http://devbean.blog.51cto.com/448512/160298
按照一般的教程,第一个程序都是使用最简单的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文件,输入以下内容:
<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>
<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>
<!--?... <statusbarpanel>s ...?-->?
</statusbar>
<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>
详细解决方案
Firefox扩张开发: Hello World
热度:945 发布时间:2012-11-23 00:03:43.0
Firefox扩展开发: Hello World!
<?xml?version="1.0"?>?
?
install.rdf文件是供具有扩展管理功能的XUL应用程序使用的,XUL应用程序可以使用该文件识别正在安装的扩展的信息。install.rdf文件具有下面的格式:
?
<?xml?version="1.0"?>?
?
上面的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">?
?
这里的这个<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"?>?
?
刚刚说了,<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字样时,说明我们的扩展已经安装成功了!
相关解决方案
- IE firefox 跟chrome执行js的区别
- java窗口helloworld程序为什么窗口中未显示“hello world program"文字
- 又是HELLO WORLD 大家帮小弟我看看
- 关于图片下传前预览的有关问题-Firefox 8.0.1
- FireFox 上传文件,该如何处理
- firefox 中iframe 调用父窗口自定义函数如何写
- 在 本地计算机 无法启动 World Wide Web Publishing服务。异常127 找不到指定的程序
- window.location.href 在 FireFox 3.0.3 下却不管用,有什么好的解决方法没有
- ie6 点击链接 不能形成下载,小弟我用ie7就可以,firefox 也可以
- hello world 有关问题
- FireFox <a title="title过长有有关问题">123</a> 的有关问题 title内容过长给切断用.替换
- firefox IE7 布局有关问题
- 怎么将自己的程序下传到app world
- 注册后登录不了怎么处理? (申请成为黑莓软件商店(BlackBerry App World)的开发商
- 怎么写QT“hello world”程序
- HELLO WORLD 程序运行模拟器无显示.该如何解决
- HELLO WORLD 程序运作模拟器无显示.
- 元芳,你如何看此 Hello world
- 关于string db 'hello world!','$'中的$,该怎么处理
- 罗云彬的32位hello world,出有关问题了
- 请问RadASM的Hello world
- 有哪位朋友能告诉小弟我,如何样在abap编辑器里面新建立一个简单的"hello world"程序呢
- firefox 插件开发,javascript Number转NPVariant有关问题
- Firefox “上拉菜单”右键没有菜单
- Software Engineer, Browser Applications (Firefox),该怎么解决
- Firefox “下拉菜单”右键没有菜单?解决方案
- firefox 启动带参数程序解决方案
- Firefox 中 TABLE 元素百分比宽度属性的有关问题
- 哪位高手能给个 win 下 firefox 3 的插件开发 sdk
- Firefox 访问故障解决方法