【Firefox扩展】简单扩展之1——overlay statusbar

 简单扩展之1——overlay statusbar
         对于overlay，我的理解很简单：如果把firefox浏览器想成一个基本的界面，那么overlay就是在这个基本界面上的各种元素的位置上，以自定义的方式做出一个新的界面元素，然后像胶布一样贴上去，覆盖到原来元素的位置，使之显示新的界面信息。      
        那么都有什么样的界面元素可以被覆盖呢？通过两周的学习，我大概明白了4中最基本的元素，状态栏statusbar，工具条toolbar，菜单中“工具”的下拉菜单menupopup，还有一个是定制工具栏toolbarpalette。当然肯定还有其他的扩展位置，像ScrapBook扩展中修改菜单，迅雷的扩展修改邮件弹出等。做完这4篇blog后，我会去研究一下迅雷扩展的xpi，然后是功能强大的web developer。

       上一篇blog介绍了一个扩展的基本目录结构，我们扩展状态栏的基本目录结构如下：
                /chrome
                      ---/content
                                 ---/sample.xul
                /install.rdf
                /chrome.manifest
        很简单，一共三个文件就搞定了，呵呵，首先介绍一下安装文件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 > sample@foo.net </ em:id >
     < em:version > 1.0 </ em:version >
     < em:type > 2 </ em:type >
   
     <!--  Target Application this extension can install into, 
         with minimum and maximum supported versions.  -->  
     < em:targetApplication >
       < Description >
         < em:id > {ec8030f7-c20a-464f-9b0e-13a3a9e97384} </ em:id >
         < em:minVersion > 1.0+ </ em:minVersion >
         < em:maxVersion > 2.0.0.5 </ em:maxVersion >
       </ Description >
     </ em:targetApplication >
   
     <!--  Front End MetaData  -->
     < em:name > Sample! </ em:name >
     < em:description > A test extension </ em:description >
     < em:creator > Hotcat</em:creator>
     < em:homepageURL > http://www.foo.com/ </ em:homepageURL >
   </ Description >       
</ 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#" >      
       这三行相对固定——本例中用于引入RDF的命名空间。
       <Description about="urn:mozilla:install-manifest">
       Description 标记下的内容是文件内容的实质性描述，下面的标签各具意义：
       <em:id>用于标示唯一的扩展，此标记的内容在1.5以前的版本中要求GUID格式，1.5以后是extension@domain形式，到现在为止firefox已经出到了2.0.0.5，firefox3的beta版本已经出来了，所以知道后一种格式就ok了，本例中填了一个简单的内容sample@foo.net。
       <em:version>标示当前扩展的版本，本例中为1.0
       <em:type>标示当前这个xpi安装包的类型，2表示扩展，4表示主题，8表示本体化，16标示Plugin。本例是一个扩展，所以选2。
        <em:targetApplication>这个标记用来标示当前的安装所包适用的Mozilla平台，访问一下Mozilla的主页，你会发现很多基于Mozilla的软件，而这个标签下的子标记id则标示了哪个软件可以安装但前的这个xpi，他是GUID形式的。 <em:minVersion>和<em:maxVersion>这对标签用于标示当前安装包的适用版本范围，如果我们把一个最大支持到2.0.0.4的xpi安装到.5版本中，就会提示不兼容。
        我从网上找了些基于Mozilla软件的id列在了下边：

Firefox                   {ec8030f7 - c20a - 464f - 9b0e - 13a3a9e97384}
Thunderbird          {3550f703 - e582 - 4d05 - 9a08 - 453d09bdfdc6}
Nvu                  {136c295a - 4a5a - 41cf - bf24 - 5cee526720d5}
Mozilla Suite           {86c18b42 - e466 - 45a9 - ae7a - 9b95ba6f5640}
SeaMonkey        {92650c4d - 4b8e - 4d2a - b7eb - 24ecf4f6b63a}
Sunbird                 {718e30fb - e89b - 41dd - 9da7 - e25a45638b28}
Netscape Browser     {3db10fab - e461 - 4c80 - 8b97 - 957ad5f8ea47}
Flock Browser        {a463f10c - 3994 - 11da - 9945 - 000d60ca027b}

         <em:name>标签标示xpi的名字。
         以上的几项标签都是必选的，每一个install.rdf中都必须存在，当然顺序无所谓。
         以下的三个标签是可选的，<em:description>是对这个xpi的简单描述；<em:creator>是作者名；<em:homepageURL>是主页。还有其他可选标记，没什么大用，先不列出来了。
        
         接下来，是负责注册的文件chrome.manifest，代码如下：        

content     sample    chrome / content /
overlay chrome: // browser/content/browser.xul chrome: // sample/content/sample.xul

        不知道Mozilla为什么用chrome这么一个让人摸不着头脑的词做这么重要的部分的名字。文章开头提到的那些界面元素都是chrome的一部分，这段代码中的chrome://browser/content/browser.xul ，是chrome的一个重要特性——chromeURL，即标准的界面元素和我们自定义的界面，都可以通过chrome://的方式访问，可以把这中方式理解为地址映射，Mozilla本身及其扩展都是通过这种方式访问的，这样做的好处在于他可适用于多种文件格式的平台，你在windows平台下编写的xpi可运行，也可以不经修改应用到linux平台下。
       chromeURL的格式如下：

chrome: // <package name>/<part>/<filename>

       package name表示访问扩展的名称，本例中是sample；part表示访问chrome的包类型（content、skin、locale）；filename就是文件名。当然如果part还有子目录，可以加上。
       下面列出了firefox本身的界面元素和位置：

主窗口 chrome: // browser/content/browser.xul 
选项窗口 chrome: // browser/content/pref/pref.xul 
私有选项窗口 chrome: // browser/content/pref/pref-privacy.xul 
书签管理器 chrome: // browser/content/bookmarks/bookmarksManager.xul 
书签面板 chrome: // browser/content/bookmarks/bookmarksPanel.xul 
历史记录面板 chrome: // browser/content/history/history-panel.xul 
Javascript 控制台 chrome: // global/content/console.xul 
管理员密码  chrome: // pippki/content/pref-masterpass.xul 
下载管理器 chrome: // mozapps/content/downloads/downloads.xul

        在了解了chromeURL后，我们来看chrome.manifest这个文件的内容：
        content     sample    chrome/content/
        这是资源注册，本例中注册了一个content包，名字为sample，后面的chrome/content/表示一个路径，这个简单的例子中没有用到chrome下的jar包，所以你会发现和以后的注册方式略有不同。
         overlay chrome://browser/content/browser.xul chrome://sample/content/sample.xul
         表示一个覆盖，格式也很简单，overlay 标准资源 自定义资源。本例中用sample中的元素覆盖browser.xul中的元素。
        当然，注册还有skin和locale的注册，而且除了overlay覆盖，还有style和override覆盖，本例中尚未用到，以后用到了再做介绍。

        最后介绍sample.xul这个文件，代码如下：

<? xml version="1.0" ?>

< overlay  id ="sample"  
         xmlns ="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" >

          < statusbar  id ="status-bar" >
                < statusbarpanel  id ="my-panel"  label ="XP Forever" />
           </ statusbar >

</ overlay >

         逐行介绍：
         <?xml version="1.0"?>
        由于XUL是XML用户界面语言，是对XML的一种扩展，所以XUL也是一种XML，也要符合XML的语法规范，这一行是每一个XML都有的。
        <overlay id="sample" 
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
        这句说明他是一个overlay，id为sample，xmlns是一个命名空间，默认情况下，overlay所有子标记都继承这个命名空间。
     <statusbar id="status-bar">
               <statusbarpanel id="my-panel" label="XP Forever"/>
     </statusbar>
        这三句是覆盖的实质内容，statubar的id为status-bar，这就是我们的状态栏，如果你要覆盖状态栏，那他能指示系统，你要覆盖的元素是什么。子标记statusbarpanel是一个按钮，但是这个按钮不能按，没有click事件，他只有一个label或image，他的功能很简单，通常被用作标签或者提示用户有什么新信息等简单的消息。
    
        好了，这三个文件都搞定了，打包安装后，就会在Firefox的状态栏的右下角显示“XP Forever”。当然你可以在label里填写你喜欢的东西，但是如果不会本地化，建议你只写英文和数字，否则显示的会使！@#$%^&*之类的乱码。

        o(∩_∩)o...一会小小来看我，拿这个给她show一下，她一定会很高兴的~（注：我们姓名的第一个大写字母是X和P哦^_^）