Firefox extension开发实战

    开始写文章之前，先自我检讨一下自己的无知。

    Firefox是开源的，地球人都知道。在接触现在的项目中FF扩展的开发之前，我居然一直都认为FF是Java开发的(以前一直都把java和开源划上等号了)。现在终于明白，有很多开源项目像FF一样，都是C/C++开发的，有大家熟知的Mysql、PHP等。真是一个等级错误啊，宛如当年我认为移动存储设备只有U盘和移动硬盘一样，其实还有SD卡、MINI-SD卡、TF卡、CF卡、MMC卡等，愚昧啊。。。

 

    OK，废话到此为止，让我们进入正题吧。本文章分六部分：

    1.FF extension总体认知

    2.开发环境搭建

    3.开发实例(自定义右键子菜单)

    4.程序发布

    5.开发心得

    6.技术参考

 

    (一)FF extension总体认知

    FF是基于mozilla内核的，其浏览器引擎功能主要由C语言实现，但其浏览器界面及其界面上的相关操作都是由JS和XUL完成的，这就是FF的强大之处，同时它也为大家提供了很好的扩展机制。

    FF扩展的开发目录结构：

    --content

       --[main JS&XUL files]

    --locale

       --en-US

          --[some dtd or properties files]

       --[other languages]

    --skin

       --[some css files or pictures]

    --defaults

       --preferences

    --components[可选]

    --chrome.manifest

    --install.rdf

    --install.js[可选]

 

 

    FF的工作方式：

    对于任何一种新的开发语言或环境，大家通常都试图去寻找程序的入口点。可以很负责任地跟大家说，任何编译型(解释型程序)开发语言的程序都有类似C中的Main函数、Java中的主类(public static void main函数)、C#中的入口函数(static void/int Main)等作为程序入口。

 

    本实例中的JS程序加载入口：

    <mce:script type="application/x-javascript"><!-- if (window.onLoadRegistry) onLoadRegistry.push(zoiq.iframe.onLoad); else window.addEventListener("load", zoiq.iframe.onLoad, false); window.addEventListener("unload", zoiq.iframe.onUnload, false);// --></mce:script>

 

    XPCOM简介：

 

    (二)开发环境搭建

    如果大家对FF extension的文件目录结构非常熟悉，我们当然可以不使用任何IDE，一样可以完成火狐扩展的开发工作。不管是否使用IDE，都建议大家使用ant(对，就是传说中的Java编译工具)来编译管理FF扩展工程。

    下面跟大家介绍两种常用的FF extension IDE。二者各有优缺点，大家可以根据自己的爱好来选择。

    1.Foxbeans(NetBeans)

 

    2.Spket

    这是官方推荐的FF extension开发工具，之所以将它放在第二位，是因为它的开发方式是半自动化的：它有良好的函数提示功能，但需要借助Venkman等调试工具进行调试，需要手动打包部署。

 

    关于Spket的破解方法，请参照我的前一篇文章:

    http://blog.csdn.net/wirror800/archive/2010/05/29/5633172.aspx

 

    好在Spket新建的FF extension工程中提供了一个基本的build.xml文件。我们可以修改这个build.xml文件，然后使用ant来编译整个项目。另外，开发过程中可能需要频繁编译工程，我们可以写一个简单的bat文件来实现快速编译。

    d:cd D:/workspace/ffDemoantpause

    (三)开发实例(自定义右键子菜单)

    现在想实现一个功能，在本站点的某个Iframe中，修改FF的ContextMenu。

    完成这样一个功能，我们需要开发两种代码：xul和js。

    添加右键菜单项的XUL:

    <popup id="contentAreaContextMenu" > <menuitem id="context-zoiqtab" label="Open in ZOIQ" oncommand="zoiqTab.onMenuItemCommand(event);" insertafter="context-openlinkintab"/> </popup>

    实现右键菜单自定义的JS:

    var zoiqTab = {getZoiqIframe: function(){var iframeWin = null;var iframeParent = gBrowser.selectedBrowser.contentDocument.getElementById(zoiq.iframe.getConst("PopupModalId")); var iframeTarget = null; if(iframeParent){ iframeTarget = iframeParent.contentWindow.document.getElementById(zoiq.iframe.getConst("TargetFrameId")); if(iframeTarget){ iframeWin = iframeTarget; } } return iframeWin;},initOverlay: function() {var menu = document.getElementById("contentAreaContextMenu");menu.addEventListener("popupshowing", zoiqTab.contextPopupShowing, false);},contextPopupShowing: function() {var menuitem = document.getElementById("context-zoiqtab");var inZoiqIframe = (zoiqTab.getZoiqIframe()==null) ? false : true;if(menuitem){menuitem.hidden = !gContextMenu.onLink || !inZoiqIframe;}if(inZoiqIframe){gContextMenu.showItem("context-openlink",false);gContextMenu.showItem("context-openlinkintab",false);}},onMenuItemCommand: function() {//gContextMenu.openLinkInTab();//gBrowser.selectedBrowser.loadURI('getLinkURL' in gContextMenu ? gContextMenu.getLinkURL() : gContextMenu.linkURL());var iframeTarget = zoiqTab.getZoiqIframe();if(iframeTarget){ iframeTarget.contentWindow.location = ('getLinkURL' in gContextMenu ? gContextMenu.getLinkURL() : gContextMenu.linkURL()); }}}; 

    然后在程序载入的时候，调用zoiqTab.initOverlay()方法：

    onLoad : function(){ zoiqTab.initOverlay(); var appcontent = document.getElementById("appcontent"); if(appcontent){ appcontent.addEventListener("DOMContentLoaded", zoiq.iframe.onPageLoad, true); } }

    (四)程序发布

    如果大家对FF extension的文件目录结构非常熟悉，我们当然可以不使用任何IDE，一样可以完成火狐扩展的开发工作。不管是否使用IDE，都建议大家使用ant(对，就是传说中的Java编译工具)来编译管理FF扩展工程。

    程序发布目录结构：

    --chrome

        --ffDemo.jar

       {

        --content

           --[main JS&XUL files]

        --locale

            --en-US

               --[some dtd or properties files]

            --[other languages]

        --skin

            --[some css files or pictures]

        }

    --defaults

       --preferences

    --components[可选]

    --chrome.manifest

    --install.rdf

    --install.js[可选]

 

 

    (五)开发心得

    1.阅读在线MDC文档

    2.尽量利用已有的FF内建函数来完成一些功能，这样可以减少出错的机会。内建函数，可以参照chrome://browser/content/brower.js、chrome://browser/content/brower.xul等文件(将FF安装目录下的jar文件解压，或者通过浏览器中view-source，或者在线的FF源码http://mxr.mozilla.org/mozilla-central/source/browser/base/content/browser.js#1000来查看)。在这里，你可以找到gBrowser、gContextMenu等全局变量的定义，以及一些不为人知的隐藏API。

    3.尽量使用oo的思想来书写JS程序，这样可以增强程序的可读性和可复用性。

    4.借鉴FF Add-ons网站上，其它高手发布的一些扩展源码。

    (六)技术参考

    1.MDC在线文档

     https://developer.mozilla.org/en/DOM/window

     https://developer.mozilla.org/en/DOM/document

     https://developer.mozilla.org/en/Code_snippets/Tabbed_browser

     view-source:chrome://browser/content/browser.js
     view-source:chrome://browser/content/nsContextMenu.js

     ……

    2.技术论坛/聊天室

 

    3.Add-ons for Firefox

    https://addons.mozilla.org/en-US/firefox/