没有合适的资源?快使用搜索试试~ 我知道了~
首页我的Firefox插件开发之旅——从零开始
资源详情
资源评论
资源推荐

转自:
http://www.cppblog.com/epubcn/archive/2008/11/07/66206.html
我的
Firefox
插件开发之旅
( 1 )——从零开始
准备做一个
Firefox
插件,用来接收从
WEB
页面传递的参数,根据这些参数从服务器上下载一
些文件到本地,并调起本地的一个应用程序。
以前在
IE
中是使用一个
ActiveX
来实现的。
FF
的插件从来没有做过,不知道将来会遇到多少困
难。
在网上发现一个页面:
http://ted.mielczarek.org/code/mozilla/extensionwiz/
,它提供了
一个
FF
扩展的生成向导,填写完必要信息后,会生成一个
zip
文件。之后我改名为
xpi
后,丢
到我的
FF 3.0
中,提示不正确的安装包。看来这个向导针对
FF3
还有些问题。具体问题是什么?
现在还不清楚。让我来继续寻找资料……
在
Mozilla
网站上了解到,
FF
的
Extension
和
Plugin
是两种概念的东西:
Extension
就是一个
zip
包,里面有规定的一些必要文件。这个可以下载几个插件看一下他们的
目录结构就好了。我下载了一个
QuickNote
,看了一下,主要包括一个
install.rdf
(安装包相
关信息和文件资源路径等配置)、
chrome.manifest
(设置各种
XUL
文件路径以及其他的一些
资源文件路径)、
chrome
文件夹(里面放着插件的所有源文件),不过
chrome
文件夹里面
的文件我还没有过多研究。
Plugin
好像是另外一码事了,在
Mozilla Developer Center
的
Plugin
开发介绍文中有这么
一句:
Plugins are different from extensions, which modify or enhance the
functionality of the browser itself. Plugins are also different from search plugins,
which plug additional search engines in the search bar.
(插件与扩展不同,它更改或
者改善了浏览器自身的功能。插件与搜索插件又不同,搜索插件在搜索工具栏上添加了额外的搜
索引擎。)
我的理解,插件可以让你在
FF
中使用自己的
View
来展示、用自己编写的二进制文件来做某些
事情,不仅仅是利用
FF
自身支持的一些特性和功能。而扩展相对来说就不需要这些东西,只利
用
FF
的开发
API
就好了。

这样看来,要实现我开始提到的需求,似乎可以开发一个
Extension
就可以了。
Foxmarks
Bookmark Synchronizer
(
FBS
)也差不多是我的需求这种感觉:将本地某些数据上传至服
务器,从服务器同步下载一些数据到本地。
FBS
既然是一个扩展能够实现,那么看来我暂时不
用研究
Plugin
了,呵呵。
OK
,有了大概的目标。下面开始制订学习计划!
通过研究别人写的
Extension
,里面有很多
js
、
css
、
images
、
html
,这些应该还好理解,但是
多了一些后缀名为
xul
的文件。这是什么东西?看来想开发
Extension
,这个文件需要好好研究
一下。
因此,我的第一个学习计划就是搞清楚
XUL
是什么,什么地方要用
XUL
,以及怎么写
XUL
?
先说到这里,下一小节我来写一些
XUL
的学习历程。
(
2
)——
XUL
是什么?
What is XUL
?这个页面给出了详细的介绍:
http://www.xulplanet.com/tutorials/whyxul.html
。
看完后,了解了
XUL
原来是一个支持多种
WEB
技术的、基于
XML
的界面开发语言。它既可以
在远程执行,也可以安装到本地执行。
在
XUL
中内置了很多界面元素,如菜单、按钮、分页等等,这样就不需要自己编写很多
JS
来维
护和控制很多界面元素了。而且,这些界面是按照当时的
OS
外观来展现的,比如同一个按钮,
在
MacOS
上和
Windows
上看起来就不一样。另外
XUL
也允许自己使用
JS
和
CSS
来定制自己
的个性化界面。总之一句话,
XUL
的主要作用就是用来展现
Extension
的用户交互界面的。
OK
,知道了
XUL
是什么以后,那么怎么学习它的用法呢?文章最下方适时地给出了一个连接:
begin the XUL tutorial
,还挺人性化
:)
我点
~~~
教程很多,很强大。看来一时半会儿全搞清楚是不可能的了。慢慢来吧。
哦对了,还发现一个在线的
XUL
编辑器,把
XUL
代码粘进去,下面可以实时地显示界面。不过
不能引用外部脚本,否则就出错。链接是:
http://ted.mielczarek.org/code/mozilla/xuledit/xuledit.xul
。
(
3
)——我的第一个扩展

简单知道了
XUL
,迫不及待地想立即编写一个插件,哪怕什么事情都不做也好。
O(
∩
_
∩
)O
通过这个页面
https://developer.mozilla.org/en/Building_an_Extension
,可以找到编写
一个插件必须要做得一些事情,写的很清楚。最后产生的目录和文件结构是这个样子:
install.rdf
chrome.manifest
chrome
|--content
|--overlay.xul
(我准备在这里编写代码,在
FF
的工具栏上添加一个按钮)
|--locale
|--en-US
|--sample.dtd
|--zh-CN
|--sample.dtd
|--zh-TW
|--sample.dtd
|--skin
|--classic
|--sampleicon.png
|--smallicon.png
|--default.css
(界面显示的样式表,今后可能会用到)
上面文件中的
install.rdf
、
chrome.manifest
基本上用例子中的就好了,
dtd
文件里面是界面
文字,这个可以模仿其他插件编写。
overlay.xul
我准备添加一段代码,用来在
FF
工具栏上添加一个按钮。
skin
下面的
png
是准备
在工具栏上添加的按钮的图标。
OK
,把上面整个目录用
zip
打个包,改后缀名为
xpi
,拖放到
FF3
中,提示尚未验证作者、是
否继续安装。这个先不管它,以后再研究。安装以后,重启
FF3
,哈哈,写的第一个
Extension
成功安装了!只不过
overlay.xul
里面什么都没写,所以还没有视觉上的成就感。下面开始添加
overlay.xul
中的代码。
怎么在工具栏上添加按钮呢?感谢
Mozilla
提供的文档,专门有一篇文章是讲这个地:
https://developer.mozilla.org/en/Creating_toolbar_buttons
。文章里面讲的非常清楚,我
这里就不废话了。不过有两点需要注意一下:
1
、样式表中的
ID
和
toolbarbutton
的
id
一定要保持一致;
2
、按钮的
label
和
tooltiptext
可以直接添加文字,但如果使用了中文,有可能会显示乱码
(至少在我的
FF3
上是这样);
3
、按钮的图标一定要大小两种(
24x24
、
16x16
)都提供;
4
、
label
和
tooltiptext
可以使用
dtd
中定义的文字,但必须注意:
dtd
文件必须存为
UTF-8
编码,否则会导致按钮显示不出来!

在
FF3
的定制工具栏中,有图标,但下方没有文字,好像是我哪里忘记添加文字了,一会儿看
看去……
好了,我的第一个
FF
插件就写好了,不过现在只是在工具栏上添加了一个按钮而已,什么事
情都没做,下一次我们添加一些行为给它。
以下附上几个关键文件的内容:
一、
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">
<em:id>{859606AC-AFFE-4691-82C5-FA0148A7E2D4}</em:id>
<em:version>1.0</em:version>
<em:type>2</em:type>
<em:name>MeetMePlus</em:name>
<em:description>Anywhere, anytime to starting a
conferencing</em:description>
<em:creator>G-NET</em:creator>
<em:iconURL>chrome://meetmeplus/skin/gnet_32.png</em:iconURL>
<em:homepageURL>http://www.meetmeplus.com/</em:homepageURL>
<em:targetApplication>
<Description>
<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
<em:minVersion>1.5</em:minVersion>
<em:maxVersion>3.0.*</em:maxVersion>
</Description>
</em:targetApplication>
</Description>
</RDF>
二、
chrome.manifest
overlay chrome://browser/content/browser.xul
chrome://meetmeplus/content/overlay.xul
content meetmeplus chrome/content/
style chrome://global/content/customizeToolbar.xul
chrome://meetmeplus/skin/default.css
剩余17页未读,继续阅读


















weixin_38669628
- 粉丝: 380
- 资源: 6万+
上传资源 快速赚钱
我的内容管理 收起
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助

会员权益专享
安全验证
文档复制为VIP权益,开通VIP直接复制

评论0