德克云技术联盟

标题: 火狐扩展插件学习笔记1 [打印本页]

---

作者: 李昭    时间: 2015-3-11 18:02
标题: 火狐扩展插件学习笔记1
本文章分六部分：
    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程序加载入口：
   
[c-sharp] view plaincopy
<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文件来实现快速编译。
   
[c-sharp] view plaincopy
d:  
cd D:/workspace/ffDemo  
ant  
pause  

    (三)开发实例(自定义右键子菜单)
    现在想实现一个功能，在本站点的某个Iframe中，修改FF的ContextMenu。
    完成这样一个功能，我们需要开发两种代码：xul和js。
    添加右键菜单项的XUL:
   
[xhtml] view plaincopy
<popup id="contentAreaContextMenu" >  
        <menuitem id="context-zoiqtab" label="Open in ZOIQ" insertafter="context-openlinkintab"/>  
    </popup>  

    实现右键菜单自定义的JS:
   
[javascript] view plaincopy
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()方法：
   
[javascript] view plaincopy
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-c ... ent/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/

---

欢迎光临 德克云技术联盟 (http://www.decoclouds.com/)