編寫FireFox的Extension Hello World程序小結

1  首先說明這不是FireFox的plugin，是Extension。

plugin是調用firefox的c++代碼來實現在page中顯示某些特定mime type的內容，比如applet,flash,pdf。
Extension是firefox提供的一種機制，可以按照它的xul（xml的一種）來定義UI，並且配合js來完成action，配合css來完成樣式，比如firefox的界面就有對應的xul文件。

2 然後展示一下擴展的目錄組織
我將這個helloworld放到了firefox默認的擴展目錄中C:\Program Files\Mozilla Firefox\extensions\helloworld
其中的helloworld目錄。

helloworld：.
│  chrome.manifest
│  [email protected]
│  install.rdf
│  readme.txt
│
├─skin
│      overlay.css
│
├─locale
│  └─en-US
│          hello.dtd
│          overlay.dtd
│
└─content
        hello.xul
        overlay.js
        overlay.xul

3  我們按照安裝並運行的過程，一步步來看各個目錄結構是如何聯繫起來的。
安裝這個插件時候，先將[email protected]文件拷貝到
C:\Documents and Settings\Administrator\Application Data\Mozilla\Firefox\Profiles\uj9i6thi.default\extensions

然後將這個文件中的內容改爲:helloworld目錄所在的路徑，這裏即：C:\Program Files\Mozilla Firefox\extensions\helloworld（最後面後面不要有空格）

4  restart browser

5  在工具->hello world就會顯示一個窗口。

具體運行機理：

一。首先firefox讀到[email protected]（名字是這個插件的id，避免重複而已）會查看裏面的目錄，然後跳到那個目錄下去，就是上面我列出來的目錄樹，第一次時候因爲插件還沒有安裝，firefox會先讀install.rdf進行安裝。

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>[email protected]</em:id>
    <em:name>Hello World extension for Firefox</em:name>
    <em:version>1.0</em:version>
    <em:description>Demo extension.</em:description>
    <em:creator>Nickolay Ponomarev</em:creator>
    <!-- optional items -->
    <em:contributor>A person who helped you</em:contributor>
    <em:contributor>Another one</em:contributor>
    <em:homepageURL>http://kb.mozillazine.org/Getting_started_with_extension_development</em:homepageURL>
    <!--em:optionsURL>chrome://sampleext/content/settings.xul</em:optionsURL>
    <em:aboutURL>chrome://sampleext/content/about.xul</em:aboutURL>
    <em:iconURL>chrome://sampleext/skin/mainicon.png</em:iconURL>
    <em:updateURL>http://sampleextension.mozdev.org/update.rdf</em:updateURL-->

    <!-- Firefox -->
    <em:targetApplication>
      <Description>
        <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
        <em:minVersion>3.6</em:minVersion>
        <em:maxVersion>4.0.*</em:maxVersion>
      </Description>
    </em:targetApplication>

  </Description>

</RDF>

瀏覽器會讀出：這個插件的name，version，desc，creator和這個插件針對的瀏覽器版本minVersion(最低版本)和maxVersion（最高版本）

二  然後瀏覽器會繼續去讀chrome.manifest文件：

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

locale	helloworld	en-US	locale/en-US/

skin	helloworld	classic/1.0	skin/
style	chrome://global/content/customizeToolbar.xul	chrome://helloworld/skin/overlay.css

content代表我的內容都在哪？helloworld是這個插件的名字，overlay代表佈局，代表把後面uri的佈局，集成到前面uri中。前面uri代表瀏覽器的佈局，將這個uri在在url框中訪問一下就知道了。

local本地化時候會去訪問local/en-US/

style代表會將後面的樣式集成到Toobar.xul中。

三  然後瀏覽器會將overlay進行集成，就會去讀overlay.xul：

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://helloworld/skin/overlay.css" type="text/css"?>
<!DOCTYPE overlay SYSTEM "chrome://helloworld/locale/overlay.dtd">
<overlay id="helloworld-overlay"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  <script src="overlay.js"/>

  <menupopup id="menu_ToolsPopup">
    <menuitem id="helloworld-hello" label="&helloworld;" 
              oncommand="HelloWorld.onMenuItemCommand(event);"/>
  </menupopup>
</overlay>

  順便讀了overlay.js:

var HelloWorld = {
  onMenuItemCommand: function() {
    window.open("chrome://helloworld/content/hello.xul", "", "chrome");
  }
};

當點擊helloworld時候，調用HelloWorld.onMenuItemCommand();

會打開新窗口，並顯示chrome：//helloworld/content/hello.xul中的內容：

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?>
<!DOCTYPE window SYSTEM "chrome://helloworld/locale/hello.dtd">

<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" 
        title="&title.label;">

<hbox align="center">
  <description flex="1">&separate.label;</description>
  <button label="&close.label;" oncommand="close();"/>
</hbox>

</window>

這樣顯示就結束了。

以後寫更復雜的程序的話，難度主要在這麼多亂七八糟的標籤，因爲控件會特別多。不過大體思路就是這個樣子的，不過html換成了xul。語法稍稍變化，要是真正的做開發的話，在公司裏有程序的項目的話，可以很快的上手的，其實就可以直接看手冊或已有的擴展。