Firefox(火狐)浏览器扩展开发初探

  1. 云栖社区>
  2. 博客>
  3. 正文

Firefox(火狐)浏览器扩展开发初探

aizher8860 2011-09-08 12:24:00 浏览1538
展开阅读全文

        最近开发一个FF的扩展,自动完成公司的订餐操作,主要完成的功能很简单:登陆网站,执行一个特定操作,并在ff的状态栏内显示执行的成功或者失败的状态。以前没有写过FF扩展,需要从头学习,在完成这个扩展过程中,有些收获记录下来,一方面自己记录,另一方面也方便有此需求的同学。在整个开发过程中碰到一些问题,也走了一些弯路,希望对其他同学有所帮助。
        由于是第一开发FF扩展,没什么经验,所以,第一步先去搜索些关于FF插件开发的文档。先几乎把所有关于FF插件开发的中文文档看个边,至少了解FF扩展和插件的基本信息,以及插件的基本结构,并在这个过程中在构建自己的开发环境。
        构建自己的开发环境
,构建自己的firefox开发环境,好处是你可以随便在这个开发环境中折腾,出现问题也不会影响你正常firefox的使用,当然使用这场模式也没问题。这一步主要做的事情有
                第一步,firefox启动时,添加-no-remote -P develop 参数,其中develop代表开发者,如果有多个开发者你可以改这个字段就可以。Windows系统修改方法,是右键Firefox图标,属性,在目录里面添加此项即可,如下图
       
                第二步
,为了更好的调试插件,修改Firefox某些项配置,具体方法:firefox的地址栏输入about:config回车,
                        参数:javascript.options.showInConsole= true
                        作用:将chrome文件中的错误显示在Console里。
                        参数:nglayout.debug.disable_xul_cache= true
                        作用:关闭XUL缓存,这允许不重启而改变窗口以及对话的内容。这里,可以使用目录而不是Jar。但是Overlay改变后,overlay文档必须重载(这一项非常有用,修改uxl后不用重启窗口)。
                        参数:browser.dom.window.dump.enabled= true
                        作用:这将允许dump()函数输出到stdout里。参考window.dump函数。特权应用也可用nsIConsoleService。
                        参数:javascript.options.strict= true
                        作用:启用严格JavaScript错误提示,js出错调试可用。
                        参数:extensions.logging.enabled= true
                        作用:这将给出更多关于安装以及更新插件的日志信息。
                        参数:nglayout.debug.disable_xul_fastload= true (仅限Gecko 2.0+ (Firefox 4.0+))
                        参数:dom.report_all_js_exceptions= true
            以上参数有些在你的配置项已经存在,可能设置的状态值不对,修改下即可。有些参数可能没有,需要你手动创建这些参数和值。只需要在list中右键-》新建-》布尔即可。
           了解FF扩展的基本文件结构


        了解ff扩展的基本结构,也对FF扩展相关的文档有所了解。现在最迫切的是想先创建一个自己的扩展,虽然我们现在还是很了解install.rdf,chrome.manifest文件内是什么东东,但是丝毫不妨碍我们创建一个FF的扩展,因为FF已经给我们提供了一个工具,可以生成自己的扩展,作为新手我强烈建议创建一个这样的扩展包,学习FF的扩展目录结构和文件内容。创建ff扩展的链接https://addons.mozilla.org/en-US/developers/tools/builder,访问这个页面,按上面说明每项参数填写即可,和其他网站一样,星号是必填的。填写完成后,点击底部按钮,就会创建你的第一个FF扩展,然后下载下这个zip包,把zip后者,修改成xpi,然后拖到你FF中去,安装,重启,看看你的第一个ff扩展吧,为了看到效果,建议你把这一串属性全都勾选上,这样你可以方便的看到插件所能展现的效果了。

没有写一行代码,第一个FF扩展已经完成了。接下来,我们仔细研究下FF扩展的文件吧
       Install.rdf文件,install.rdf文件是FF扩展的安装文件,在这个文件配置FF扩展相关的信息。
<?xmlversion="1.0" encoding="UTF-8"?>
<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"xmlns:em="http://www.mozilla.org/2004/em-rdf#">
  <Descriptionabout="urn:mozilla:install-manifest">
       <!—扩展的ID,之前的版本都是guid,现在流行方式是个email地址,要确保这个ID在你的电脑上唯一-->
       <em:id>ugg_xchj@hotmail.com </em:id>
       <!—2表示是ff扩展,这个数字不要变-->
       <em:type>2</em:type>
       <!—FF扩展的名字-->
       <em:name>u-mytest-name</em:name>
       <!—FF扩展的版本号-->
       <em:version>1</em:version>
       <!—FF扩展的创建者和贡献者->
       <em:creator>ugg</em:creator>
       <em:contributor>ugg </em:contributor>
       <!—FF扩展的描述->
       <em:description>u-description</em:description>
       <!—FF扩展的关于部分,可以是一个网址,也可以是扩展内的一个窗口个窗口->
       <em:aboutURL>chrome://u-packagename/content/about.xul</em:aboutURL>
       <!—FF扩展的选项部分,可以是一个网址,也可以是扩展内的一个窗口个窗口,选项部分和扩展内defaults\preferences下的文件有关系,可以通过这块设置一些变量的默认值->
       <em:optionsURL>chrome://u-packagename/content/options.xul</em:optionsURL>
       <em:targetApplication>
            <Description>
                <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <!—Firefox,这个guid不能变,表示的是FF-->
                <em:minVersion>0.3</em:minVersion> <!—最低的支持版本-->
                <em:maxVersion>8.0a1</em:maxVersion> <!—最高的支持版本-->
           </Description>
       </em:targetApplication>
  </Description>
</RDF>

除了这些参数外,install.rdf还有其他的参数,详细的可以从https://developer.mozilla.org/en/install_manifests了解

chrome.manifest文件
      content   u-na                 chrome/content/
      overlay   chrome://browser/content/browser.xul   chrome://u-na/content/ff-overlay.xul
      定义u-na包的content路径,使用插件中的ff-overlay.xul覆盖浏览器中browser.xul。
      Chrome.manifest作用不仅仅如此,还可以定义很多内容,关于这个文件的详细描述可以参考https://developer.mozilla.org/en/chrome_registration

Xul文件
XUL(XML用户界面语言)是Mozilla的基于XML的语言,可以快速构建应用程序的界面。Mozilla的界面元素有很多比如状态栏,工具栏,按钮等等,需要设置xul才能更改或者控制FF的界面,关于xul的详细介绍参考https://developer.mozilla.org/en/xul。我们可以参考下状态栏的xul控制
<statusbarid="status-bar">
                  <statusbarpanelid="dcdingcan"
                   label="登陆中...."  右下角状态栏显示信息
                   context="stockmenu"
                   onclick="DingCan.disPlay('')"点击后触发事件,这个事件有js控制
         />
</statusbar>

        以上都是最简单的内容,如果要做出花哨需要详细查看MDN文档。有了这些基本知识后,我们回到我之前的需求上。我希望做一个FF扩展,在这个扩展中可以设置登录用户的账号和密码,当打开FF后,按给定的用户名和密码登录公司订餐网站,执行成功或者失败后在状态下给出提示。最终实现,设置域账号密码



打开ff后的状态显示

代码下载,点击此处

实现功能很简单,代码也比较简单,就不做详细介绍了,大概说下我开发过过程碰到的一些问题。

       Q:开发过程中的插件如何在FF中调试?
       A:还记得install.rdf中的<em:id>ugg_xchj@hotmail.com</em:id>字段嘛?在你的电脑C:\Documentsand Settings\用户名\Application Data\Mozilla\Firefox\Profiles\dqfrxoai.default\extensions的目录内创建名字为ugg.xchj@hotmail.com的文件,文件内容为正在开发这个FF扩展的绝对路径,比如D:\m\ffex\myffex\helloword。然后重启FF即可工具-》附件组件管理器中看到你的插件。

       Q:为什么我创建的扩展不能加载到FF中
       A:主要有几方面,1:确保install.rdf,chrome.manifest文件格式正确,最好的办法是直接修改已有的FF扩展包的install.rdf,chrome.manifest文件,一般这两个文件出错,FF在加载扩展过程会中断,不能再加载其他的组件。2:编码问题,一旦你的文件中出现中文,一定要确保采用utf-8格式保存文件,否则会加载失败,扩展不显示,建议所有的文件都采用utf-8格式。

      Q:如果打包xpi文件?
       A:使用winrar或者winzip打包zip,修改成xpi格式即可。注意,要在包含有install.rdf的文件目录打包,否则会提示xpi包已损坏,不能安装,另外压缩方式选择为存储。

      Q:js代码在FF扩展开发有何用处?
      A:FF扩展开发过程中,使用xul开发FF的扩展的界面,而使用js开发扩展的处理逻辑,在我提供的订餐插件中,使用js登陆网站,执行操作。Js处理逻辑很重要,我使用已经写好的js文件,很容易开发出google的扩展插件,IE的扩展插件。所以,浏览器扩展的开发,更多的是js逻辑的开发。
      学习FF扩展,最佳的方式是多看看别人写的FF扩展,下载下别人的扩展,把xpi修改成zip,直接解压看里面的结构,开发就可以,学习过程很快。另外一个好出去是FF的开发社区,多看下MDN文档,比如下面的就是官方创建一个FF扩展的过程。https://developer.mozilla.org/en/Building_an_Extension

参考资料:

开发你的第一个FF插件 http://blog.osqdu.org/develop-your-first-firefox-plugin_129.shtml
Install,manifest文件字段说明https://developer.mozilla.org/en/install_manifests
创建一个FF插件 https://developer.mozilla.org/en/Building_an_Extension

网友评论

登录后评论
0/500
评论
aizher8860
+ 关注