Firefox 扩展开发

实战Firefox扩展开发成富,软件工程师,IBM中国软件开发中心简介：Firefox浏览器自身提供良好的扩展结构，使得开发人员可以方便的扩展其行为。很多网站，比如del.icio.us，都提供Firefox扩展来提供更好的用户体验。学习这方面的知识不仅对于网站开发人员是有用的，其他人也可以通过开发扩展来解决一些使用Firefox中遇到的具体问题。本文以一个能够批量下载某个HTML页面上所有图片的Firefox扩展作为案例，详细的介绍了Firefox扩展的开发流程。这其中包括构建开发环境，使用XUL来描述用户界面，使用JavaScript来为扩展增加行为，扩展的打包、发布和更新等方面的内容。本文的标签：firefox,javascript,web,插件标记本文！发布日期：2008年2月28日级别：中级访问情况11625次浏览案例介绍本文中所要构建的是一个能够批量下载某个HTML页面上所有图片的Firefox扩展。通常我们在浏览包含许多图片的网页时，如果想要把自己感兴趣的图片全部下载下来，需要逐一在图片上点击右键，然后选择另存为，再选择文件存放的目录，最后才能把图片保存在本机上。另外一种做法是把整个网页都保存下来，不过这样会保存不需要的信息，包括JavaScript脚本和CSS文件等，会增加所需的磁盘空间，浏览起来也不方便。该扩展要做的事情就是把网页上所有的图片在一个新窗口中列出来，用户可以勾选其感兴趣的图片，并指定需要保存的目录。然后该扩展能够一次性把用户选择的图片都下载下来。用户以后浏览起来也更加方便。回页首构建开发环境在动手开发之前，首先需要构建扩展开发所需的环境。Firefox把用户的个人信息，包括设置、已安装的扩展等，都保存在一个概要文件中，默认是使用名为default的概要文件。通过创建一个专门为开发使用的概要文件，可以不影响正常的使用，也不会破坏个人信息。为了创建另外一个概要文件，运行firefox–P，在弹出的“选择概要文件”的对话框中，新建一个名为dev的概要文件，并使用此概要文件来运行Firefox。接下来需要安装几个帮助开发的扩展，分别是Venkman、ExtensionDeveloper'sExtension、Console2、ChromeList和Firebug。可以在参考资源部分找到这些扩展的下载地址。最后修改Firefox的设置使得调试更加容易。在地址栏输入about:config可以打开Firefox的参数设置页面。按照如下的设置修改参数：清单1.Firefox扩展开发环境参数设置至此，开发环境就构建完成了。当需要进行扩展开发时，运行firefox-Pdev启动Firefox即可。回页首javascript.options.showInConsole=true//把JavaScript的出错信息显示在错误控制台nglayout.debug.disable_xul_cache=true//禁用XUL缓存，使得对窗口和对话框的修改不需要重新加载XUL文件browser.dom.window.dump.enabled=true//允许使用dump()语句向标准控制台输出信息javascript.options.strict=true//在错误控制台中启用严格的JavaScript警告信息页码，1/10构建初始的扩展目录结构接下来正式进行扩展开发。首先介绍一下一个Firefox扩展的基本目录结构。图1.Firefox扩展目录结构在图1中，content目录下面存放的是扩展的描述界面的XUL文件和增加行为的JavaScript文件。locale目录存放的是本地化相关的文件。如果需要支持英文和中文，就可以在locale目录下面新建en-US和zh-CN目录来存放相应的本地化字符串。skin目录存放的是一些CSS文件，用来定义扩展的外观。chrome.manifest是Chrome注册的清单文件（参见侧栏）。install.rdf分别包含了扩展安装的信息。什么是Chrome？Chrome指的是应用程序窗口的内容区域之外的用户界面元素的集合，这些用户界面元素包括工具条，菜单，进度条和窗口的标题栏等。Chrome提供者能为特定的窗口类型（如浏览器窗口）提供chrome。有三种基本的chrome提供者：l内容（Content）：通常是XUL文件。l区域（Locale）：存放本地化信息。l皮肤（Skin）：描述chrome的外观。通常包含CSS和图像文件。在构建了初始的目录结构之后，需要让Firefox能够识别并加载该扩展。首先需要找到当前的概要文件所对应的目录。在MicrosoftWindows2000和XP的电脑上面，该目录是C:\DocumentsandSettings\您的登录用户名\ApplicationData\Mozilla\Firefox\Profiles。找到该目录之后，可以看到以dev结尾的目录，那就是我们之前构建的开发环境的概要文件所在的目录。在其下的extensions目录下面，新建一个文件，其文件名为install.rdf中指定的扩展的ID，此处为[e-mail]。该文件的内容就是扩展内容所在的实际目录，比如：C:\FirefoxExtDev\batchimagesdownloader。Firefox就能识别并加载我们添加的扩展了。在每次对扩展做了一定的修改之后，不需要重新启动Firefox，只需要安装之前介绍的ExtensionDeveloper'sExtension，并在Tools菜单中单击ExtensionDeveloperReloadallChrome即可。接下来就可以尝试为扩展添加功能了。回页首构建基本的用户界面我们首先从用户界面入手。如之前所述，我们希望在一个新的窗口中显示当前HTML页面中所有的图片，并可以让用户进行选择。Firefox扩展使用XUL来描述其用户界面。XUL提供了一套基于XML的描述方式，可以用来描述用户界面的各种组件，比如按钮、菜单和工具条等。最初始的界面包含显示图片的一个表格以及OK和Cancel两个按钮。清单2.基本用户界面的XUL描述?xmlversion=1.0?页码，2/10上面就是显示图片的新窗口的界面元素的声明。下面需要添加用户的交互行为。回页首添加菜单事件响应我们希望当用户点击Firefox上面的一个菜单项时，弹出刚才构建的新窗口。我们这里要做的是向Firefox自带的Tools菜单添加一个新的名为BatchImagesDownloader的菜单项。当用户点击此菜单项时，就会弹出代码清单2中定义的窗口。在扩展中可以使用覆盖（Overlay）来向已有的界面中添加元素。使用覆盖可以在运行时向一个XUL文档添加新的组件。我们在chrome.manifest中定义了名为overlay.xul的文件，会对Firefox已有的用户界面进行一定的修改。只需要在overlay.xul中添加下面的内容即可：清单3.增加菜单项的XUL描述上面定义了当点击菜单项时，会调用BatchImagesDownloader.show方法，这是在overlay.js中定义的一个JavaScript方?xml-stylesheethref=chrome://global/skin/type=text/css?windowid=batchimagesdownloader-mainwindowtitle=BatchImagesDownloaderorient=horizontalonload=mainWindowOnLoad();xmlns==1vboxflex=1labelvalue=Imagesonthiswebpage:/spacerstyle=height:5px/hboxheight=500width=750style=overflow:auto;gridcolumnscolumn/column/column//columnsrowsid=imagesContainer/rows!--显示图片的表格--/grid/hbox/vboxspacerstyle=height:10px/hboxspacerflex=1/buttonid=mainWindow-add-buttonlabel=OKdefault=trueoncommand=download();/buttonid=mainWindow-cancel-buttonlabel=Canceloncommand=close();//hboxspacerstyle=height:5px//vbox/windowmenupopupid=menu_ToolsPopupmenuitemid=batchimagesdownloader-showlabel=BatchImagesDownloaderoncommand=BatchImagesDownloader.show(event);//menupopup页码，3/10法，用来处理新窗口的弹出。overlay.js由overlay.xul包含进来。清单4.菜单项的事件响应方法添加上述的代码之后，可以通过点击Tools菜单项下来的BatchImagesDownloader菜单项来弹出新的窗口。回页首显示图片可以在BatchImagesDownloader.show方法中看到，当弹出新窗口的时候，会把当前页面上的所有img节点都作为参数传递给新打开的窗口。这些img节点就是需要展现给用户并供其选择的。接下来要做的就是在新窗口中显示这些图片。在JavaScript的方法中，可以像在HTML中的DOM操作一样，对XUL定义的DOM树进行修改。这其中包括使用document.createElementNS来创建新的XUL元素，同样也可以使用CSS来修改XUL元素的外观。清单5.显示图片的JavaScript方法varBatchImagesDownloader={show:function(){vardoc=window.getBrowser().selectedBrowser.contentDocument;varimageNodes=doc.getElementsByTagName(img);//获取所有的img节点varparams={imageNodes:imageNodes};this.openWindow(BatchImagesDownloader.mainWindow,chrome://batchimagesdownloader/content/mainWindow.xul,chrome=yes,centerscreen,params);},//打开一个新的窗口，或是使得已经创建的窗口获得焦点openWindow:function(windowName,url,flags,params){varwindowsMediator=Components.classes[@mozilla.org/appshell/window-mediator;1].getService(Components.interfaces.nsIWindowMediator);varaWindow=windowsMediator.getMostRecentWindow(windowName);if(aWindow){aWindow.focus();}else{aWindow=window.openDialog(url,windowName,flags,params);}returnaWindow;}};constCOLUMNS_PER_ROW=3;//每行显示3张图片functionm