打造自己的世界-XUL Runner
XUL Runner 算是 Firefox 的兄弟之一，他允許我們用 Gecko 內部的元件設計一個擁有自己外觀(而不一定需要長的像是 Firefox)的應用程式。因為 Gecko 內部元件非常的豐富，而且 XUL Runner 也有跨平台的能力，使用 XUL Runner 可以簡化我們開發應用程式的工作。
要開發 XUL Runner 程式，首要工作就是要有 XUL Runner。Mozilla FTP 上面有提供 prebuilt 的版本，分為 Windows, Linux 和 Mac 版本。這篇文章的安裝過程以 Linux 版本為例，其他版本也大同小異，可以參考 MDN。抓 XUL Runner 記得抓不是 SDK 的版本，我們並不需要使用 SDK 的功能，但是沒有 SDK 的話整個壓縮檔的大小會小很多。
安裝
Linux 版的 XUL Runner 安裝起來非常簡單：解壓縮就好。他是個綠色軟體。
Hello world
要建立一個 XUL Runner 的程式，首先先建立出以下的目錄結構：
+ myapp/ | +-+ chrome/ | | | +-+ content/ | +-+ defaults/ | +-+ preferences/
接下來，我們切換到 myapp/ 目錄，開始把最基本的檔案填上。下面檔案都是以 myapp 當作目前目錄
[Gecko]
MinVersion=1.8
MaxVersion=200.*
/* debugging prefs, disable these before you deploy your application! */ pref("browser.dom.window.dump.enabled", true); pref("javascript.options.showInConsole", true); pref("javascript.options.strict", true); pref("nglayout.debug.disable_xul_cache", true); pref("nglayout.debug.disable_xul_fastload", true); 開始寫 XUL 囉
首先建立一個檔案在 chrome/content/main.xul 內容就是程式的主要外觀
另外我們也要為他準備他所使用的 Javascript 在 chrome/content/main.js，內容是
function showMore() { document.getElementById("more-text").hidden = false; } 執行
程式寫完了，讓我們來看結果吧。執行程式的方法也非常簡單：打開終端機，到剛剛解壓縮 xulrunner-*.tar.bz2 的地方，進入 xulrunner/ 輸入
./xulrunner
如果一切正確，就可以看到一個 Hello world 的小程式。
自己的 browser
有 hello world 以後，我們來對這個小程式做一點點小小變化吧！把剛剛的 main.xul 稍微改一下，改成更簡單：
再執行一次，就可以看到 Mozilla 的網頁。這就是 browser element，Firefox 的介面也是用這樣製造出來的，所以其實這算是一個 Firefox 的簡化簡化簡化版本，不過我們卻可以對他做非常非常多事情。
回到 main.js，這個 main.js 一樣有 window 和 document 等全域物件，並且使用 dump() 全域函數來印出 debug message。我們可以使用 addEventListener 來聆聽事件，例如
window.addEventListener('load', ...)
也可以用 getElementById 來取得 XUL 內的物件，比方說
document.getElementById('brow')
再透過 browser element 的 contentDocument 屬性，可以取得 browser 內部的 document 物件。我們可以把 main.js 改成
window.addEventListener('load', function () { var b = document.getElementById('brow'); b.addEventListener('DOMContentLoaded', function(e) { var doc = e.originalTarget; if (doc != b.contentDocument) { return; }
var title = doc.getElementsByTagName('title')[0];
if (title) {
title = title.innerHTML;
} else {
title = "
dump("Title: " + title + "\n"); }); b.loadURI('http://www.mozilla.com'); });
這個簡單的程式，示範如何載入一個文件並且取得文件 DOM 之中的數值。首先，我們會在 window load 以後，取出 browser 的參照並且放到 b 變數。之後開始聆聽 browser 的 ‘DOMContentLoaded’ 事件。再透過 loadURI 載入 http://www.mozilla.com/。載入完成後，聽到 DOMContentLoaded 事件後，取出瀏覽器中的 document 物件，就可以直接操作內部的 DOM，取得 title 標籤的值。
Reference
- https://developer.mozilla.org/en-US/docs/XUL/browser
- https://developer.mozilla.org/en-US/docs/Getting_started_with_XULRunner
