我的玻璃盒子

（原創(chuàng)作品，轉(zhuǎn)載請(qǐng)注明鏈接）

簡(jiǎn)單知道了XUL，迫不及待地想立即編寫(xiě)一個(gè)插件，哪怕什么事情都不做也好。O(∩_∩)O

通過(guò)這個(gè)頁(yè)面https://developer.mozilla.org/en/Building_an_Extension，可以找到編寫(xiě)一個(gè)插件必須要做得一些事情，寫(xiě)的很清楚。最后產(chǎn)生的目錄和文件結(jié)構(gòu)是這個(gè)樣子：
install.rdf
chrome.manifest
chrome
  |--content
      |--overlay.xul （我準(zhǔn)備在這里編寫(xiě)代碼，在FF的工具欄上添加一個(gè)按鈕）
  |--locale
      |--en-US
          |--sample.dtd
      |--zh-CN
          |--sample.dtd
      |--zh-TW
          |--sample.dtd
  |--skin
      |--classic
          |--sampleicon.png
          |--smallicon.png
          |--default.css （界面顯示的樣式表，今后可能會(huì)用到）

上面文件中的install.rdf、chrome.manifest基本上用例子中的就好了，dtd文件里面是界面文字，這個(gè)可以模仿其他插件編寫(xiě)。
overlay.xul我準(zhǔn)備添加一段代碼，用來(lái)在FF工具欄上添加一個(gè)按鈕。skin下面的png是準(zhǔn)備在工具欄上添加的按鈕的圖標(biāo)。

OK，把上面整個(gè)目錄用zip打個(gè)包，改后綴名為xpi，拖放到FF3中，提示尚未驗(yàn)證作者、是否繼續(xù)安裝。這個(gè)先不管它，以后再研究。安裝以后，重啟FF3，哈哈，寫(xiě)的第一個(gè)Extension成功安裝了！只不過(guò)overlay.xul里面什么都沒(méi)寫(xiě)，所以還沒(méi)有視覺(jué)上的成就感。下面開(kāi)始添加overlay.xul中的代碼。

怎么在工具欄上添加按鈕呢？感謝Mozilla提供的文檔，專門(mén)有一篇文章是講這個(gè)地：https://developer.mozilla.org/en/Creating_toolbar_buttons。文章里面講的非常清楚，我這里就不廢話了。不過(guò)有兩點(diǎn)需要注意一下：
1、樣式表中的ID和toolbarbutton的id一定要保持一致；
2、按鈕的label和tooltiptext可以直接添加文字，但如果使用了中文，有可能會(huì)顯示亂碼（至少在我的FF3上是這樣）；
3、按鈕的圖標(biāo)一定要大小兩種（24x24、16x16）都提供；
4、label和tooltiptext可以使用dtd中定義的文字，但必須注意：dtd文件必須存為UTF-8編碼，否則會(huì)導(dǎo)致按鈕顯示不出來(lái)！

在FF3的定制工具欄中，有圖標(biāo)，但下方?jīng)]有文字，好像是我哪里忘記添加文字了，一會(huì)兒看看去……

好了，我的第一個(gè)FF插件就寫(xiě)好了，不過(guò)現(xiàn)在只是在工具欄上添加了一個(gè)按鈕而已，什么事情都沒(méi)做，下一次我們添加一些行為給它。

以下附上幾個(gè)關(guān)鍵文件的內(nèi)容：

一、install.rdf

<?xml version="1.0"?>
<RDF xmlns=" xmlns:em=">
    <Description about="urn:mozilla:install-manifest">
        <em:id>{859606AC-AFFE-4691-82C5-FA0148A7E2D4}</em:id>
        <em:version>1.0</em:version>
        <em:type>2</em:type>
        <em:name>MeetMePlus</em:name>
        <em:description>Anywhere, anytime to starting a conferencing</em:description>
        <em:creator>G-NET</em:creator>
        <em:iconURL>chrome://meetmeplus/skin/gnet_32.png</em:iconURL>
        <em:homepageURL>http://www.meetmeplus.com/</em:homepageURL>
        <em:targetApplication>
            <Description>
                <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
                <em:minVersion>1.5</em:minVersion>
                <em:maxVersion>3.0.*</em:maxVersion>
            </Description>
        </em:targetApplication>
    </Description>     
</RDF>

二、chrome.manifest

overlay    chrome://browser/content/browser.xul    chrome://meetmeplus/content/overlay.xul
content    meetmeplus    chrome/content/
style    chrome://global/content/customizeToolbar.xul    chrome://meetmeplus/skin/default.css
skin    meetmeplus    classic/1.0    chrome/skin/classic/
locale    meetmeplus    zh-CN    chrome/locale/zh-CN/

三、overlay.xul

<?xml version="1.0"?>
<!DOCTYPE overlay SYSTEM "chrome://meetmeplus/locale/overlay.dtd">
<?xml-stylesheet href="chrome://meetmeplus/skin/default.css" type="text/css"?>

<overlay id="mmp-overlay" xmlns=">
    <!-- Firefox toolbar -->
    <toolbarpalette id="BrowserToolbarPalette">
        <toolbarbutton id="meetmeplus-button" type="menu-button"
            class="toolbarbutton-1 chromeclass-toolbar-additional">
            <menupopup>
                <menuitem label="&mmp.gotohome;" tooltiptext="&mmp.gotohome.tooltip;" image="chrome://meetmeplus/skin/option_16.png" class="menuitem-iconic"/>
                <menuseparator/>
                <menuitem label="&mmp.option;" tooltiptext="&mmp.option.tooltip;" image="chrome://meetmeplus/skin/option_16.png" class="menuitem-iconic"/>
            </menupopup>
        </toolbarbutton>
    </toolbarpalette>
</overlay>