近來想要提昇網站的便利性，Firefox的外掛延伸套件便成了不可或缺的選擇，君不見連用IE6連上facebook，它都建議你改用Firefox或Safari了，全世界大概只剩OTRO內部還在用IE6吧~
Firefox Extensions英文教學在 Getting started with extension development
chrome.manifest-用來設定你的extensions提供了哪些package跟overlays(換言之,介面)，用來指定各個相關資源的路徑。
XUL是用來定義你要如何改變目前Firefox的視窗介面Locale是用來定義語系編碼、並且透過CSS來規範XUL裡面的元件
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 = {
onLoad: function() {
// initialization code
this.initialized = true;
},
onMenuItemCommand: function() {
window.open("chrome://helloworld/content/hello.xul", "", "chrome");
}
};
window.addEventListener("load", function(e) { HelloWorld.onLoad(e); }, false);
上述程式十分簡單，就指定在這個helloworld選項被選擇到時，蹦出一個我們另外寫的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>
hello.xul跟overlay.xul的差異在於我們要hello.xul出現一個視窗或Alert，所以程式會有，而不是overlay.xul裡面的。
overlay.css-定義介面的格式
/* This is just an example. You shouldn't do this. */
menuitem#helloworld-hello {
color: red !important;
}
這邊只是把選項改成紅色而已。以上只寫了幾個比較重要的元件，在完成上面的設定之後我們最後要將所有的檔案都交給Extension Manager進行包裝
