（原創作品，轉載請注明鏈接）

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

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

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

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

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

在FF3的定制工具欄中，有圖標，但下方沒有文字，好像是我哪里忘記添加文字了，一會兒看看去……

好了，我的第一個FF插件就寫好了，不過現在只是在工具欄上添加了一個按鈕而已，什么事情都沒做，下一次我們添加一些行為給它。

以下附上幾個關鍵文件的內容：

一、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>