Firefox 附加元件現今已多達上萬種，其每一個附加元件的設計皆有迥然不
同的設計風格，這邊以 Backword 說明 Firefox 附加元件的架構。Backword 的架 構如圖 4.2。Backword 整個資料夾中包含有 chrome、components 以及 defaults 上 述三個資料夾與 chrome.manifest[27-30]以及 install.rdf[31-34]這兩個檔案。其細部 目錄架構如下：圖 4.2 Backword 目錄架構圖
chrome.manifest
程式碼請參見表 4.1，chrome.manifest 檔案記載 Overlay[35-36]、locale[37]
以及 skin[38]等對應位置。例如：overlay chrome://browser/content/browser.xul
chrome://backword/content/backword.xul，當 chrome://browser/content/browser.xul
加載的時候，也一併將 chrome://backword/content/backword.xul 加載進來。表 4.1 chrome.manifest
# XUL Overlays
content backword chrome/content/
content backword chrome/content/ contentaccessible=yes overlay chrome://browser/content/browser.xul
chrome://backword/content/backword.xul overlay chrome://messenger/content/messenger.xul
chrome://backword/content/backword.xul
overlay chrome://messenger/content/messengercompose/messengercompose.xul chrome://backword/content/backword.xul
# All locales
locale backword en-US chrome/locale/en-US/
locale backword zh-CN chrome/locale/zh-CN/
locale backword zh-TW chrome/locale/zh-TW/
# Skin related overlays
skin backword classic/1.0 chrome/skin/classic/
install.rdf
install.rdf 檔案為 Firefox、Thunderbird 等軟體擴充套件中的安裝描述檔。程
式碼請參見表 4.2。表 4.2 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>backword</em:name>
<em:version>2.0.1.4</em:version>
<em:description>Backup every word ever met</em:description>
<em:creator>gneheix</em:creator>
<em:homepageURL>http://backword.gneheix.com</em:homepageURL>
<em:iconURL>chrome://backword/skin/openPage.gif</em:iconURL>
<em:contributor>passerby - Traditional Chinese</em:contributor>
<em:optionsURL>chrome://backword/content/options.xul</em:optionsURL>
<em:extension>true</em:extension>
<em:type>2</em:type>
<!-- 安裝檔案 -->
<em:file>
<Description about="urn:mozilla:extension:file:backword.jar">
<em:package>content/</em:package>
<em:skin>skin/classic/</em:skin>
<em:locale>locale/en-US/</em:locale>
<em:locale>locale/zh-CN/</em:locale>
<em:locale>locale/zh-TW/</em:locale>
</Description>
</em:file>
<!--指名要安裝套件的應用程式 -->
<!--Firefox: {ec8030f7-c20a-464f-9b0e-13a3a9e97384}-->
<!--Mozilla: {86c18b42-e466-45a9-ae7a-9b95ba6f5640}-->
<!--Thundbird: {3550f703-e582-4d05-9a08-453d09bdfdc6} -->
<em:targetApplication>
<Description>
<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
<em:minVersion>1.5</em:minVersion>
<em:maxVersion>3.5.*</em:maxVersion>
</Description>
</em:targetApplication>
</Description>
</RDF>
defaults
defaults 資料夾中的 setting.js 儲存某些參數。例如：apiurl、apiweburl 的連結
位置等。由於資料隱私考量的關係，表 4.3 只附上部分程式碼。表 4.3 setting.js
pref("backword.translator", "google.zh-CN");
pref("backword.searchweburl", "http://sh.dict.cn/search/?q=");
pref("backword.apiurl", "http://localhost:3000/backend/xmlrpc");
pref("backword.apiweburl", "http://localhost:3000/");
chrome
chrome 資料夾中有三個資料夾(content、locale 及 skin)以及 backword.jar 壓
縮檔。backword.jar 壓縮檔為安裝附加元件 backword 會使用到的檔案，將 chrome 資料夾(content、locale 及 skin 三個資料夾)中的資料，以 zip 方式壓縮而成的檔 案，其內容與資料夾中的檔案完全相同。
skin
skin 資料夾裡放置所有 backword 會使用到的圖檔。
locale
locale 資料夾中的資料夾(en-US、zh-CN 及 zh-TW)為 Backword 各種語
系，使用者可依造自己的語系來選擇 Backword 所呈現出來的界面。部分程式碼請參見表 4.4。
表 4.4 backword.dtd
<!ENTITY options.windowtitle "設置">
<!ENTITY options.settingstab "選項">
<!ENTITY options.helptab "幫助">
<!ENTITY options.groupbox.translator "詞典">
<!ENTITY options.translator.google.es "Google - 西班牙語">
<!ENTITY options.translator.google.zh-TW "Google - 繁體中文">
<!ENTITY options.translator.dictcn.tw "Dict.cn - 繁體中文">
<!ENTITY options.translator.showphonetics "顯示音標 (可能導致 Firefox 假死)">
<!ENTITY options.help.link.lable.homepage "首頁:">
<!ENTITY options.help.link.lable.blog "作者 Blog：">
<!ENTITY options.help.link.lable.email "作者 E-mail：">
<!ENTITY options.help.title.searchweb "搜索詳細解釋">
<!ENTITY menu.options.label "選項(O)">
<!ENTITY menu.options.accesskey "O">
<!ENTITY menu.pages.label "網頁(P)">
<!ENTITY menu.pages.accesskey "P">
<!ENTITY menu.dictionary.label "詞典(D)">
<!ENTITY menu.dictionary.accesskey "D">
<!ENTITY menu.usingapi.label "使用後臺(S)">
<!ENTITY menu.usingapi.accesskey "S">
<!ENTITY menu.usinglocalapi.label "使用本地存儲(L)">
<!ENTITY menu.usinglocalapi.accesskey "L">
<!ENTITY menu.showpronunciation.label "使用 Flash 即時發音">
<!ENTITY menu.showpronunciation.accesskey "F">
<!ENTITY menu.quotesentence.label "自動選中當前句子(A)">
<!ENTITY menu.quotesentence.accesskey "A">
<!ENTITY menu.ctrl.label "在 Ctrl 鍵被按下時取詞">
<!ENTITY menu.ctrl.accesskey "C">
<!ENTITY menu.autoback.label "自动收集">
<!ENTITY menu.autoback.accesskey "U">
<!ENTITY menu.enable.label "即時翻譯(E)">
<!ENTITY menu.enable.accesskey "E">
content 資料夾
option.xul 及 option.js 為使用者於十字之處按下滑鼠右鍵後，所彈出的
選項視窗內容。backword.xul 及 backword.js 則是 Backword 附加元件主要運用到的程式
碼。這邊以區塊方式來做說明。
option(選單)
如表 4.5 Part1 的部分，則是圖 4.3 第 1 區塊的部分，每一個<tab></tab>為一 個 tab(分頁)[39-40]，每一個<tabs></tabs>為一整組 tabs 的部分，其 tab 所顯示的 值請參見表 4.5 Part1 的部分，每一個 tab 所對應的值為程式的 label 值，例如：
help-tab 的 label 值為“&options.helptab;”，對應到表 4.4 backword.dtd 第 3 行，
即可得知為 label 值為“幫助”。
圖 4.3 Backword 彈出式選單畫面
如表 4.5 Part2 的部分，則是圖 4.3 第 2 區塊的部分，每一個<menupopup>
</menupopup> 為 一 個 menupopup( 下 拉 式 選 單 )[41] ， <menuitem> 為 menuitem[42]，下拉式選單中一個子項的部分，其值如同上述方法，例如：
<menuitem>所對應到的 label 值為“&options. translator.dictcn.tw;”，對應到表 4.4
backword.dtd 程式碼第 7 行，即可得知該 label 值為“繁體中文”。另外<checkbox id="showphonetics" label="&options.translator.showphonetics;" />即為表 4.4 第 8 行
之“顯示音標(可能導致 Firefox 假死)”這一個 checkbox。另外，<menuseparator/>為分隔線[43-44]。
最後，如表 4.5 Part3 的部分，則是圖 4.3 第 3 區塊的部分，藉此可以得知
“&options.help. title.searchweb;”為表 4.4 第 12 行之“搜索詳細解釋”。
表 4.5 options.xul 部分程式
Part 1 :
<tabs id="options-tabs">
<tab id="settings-tab" label="&op.settingstab; I"/>
<tab id="settings2-tab" label="&op.settingstab; II"/>
<tab id="help-tab" label="&op.helptab;"/>
</tabs>
Part 2 :
<groupbox orient="vertical">
<caption label="&op.groupbox.trans;" />
<menupopup>
<menuitem label="&op.trans.googlefr;" value="googlefr" id="googlefr" />
<menuseparator />
<menuitem label="&op.trans.dictcn;" value="dictcn" id="dictcn" />
<menuitem label="&op.trans.dictcntw;" value="dictcntw" id="dictcntw" />
<menuseparator />
<menuitem label="&op.trans.outlook;" value="outlook" id="outlook" />
</menupopup>
<checkbox id="showphonetics" label="&op.trans.showphonetics;" />
</groupbox>
Part 3 : <description value="&op.help.title.searchweb;" class="h3" />
backword tooltip
當使用者在查詢單字時，backword 可以將查詢結果顯示在彈出來的小視窗 中，如圖 4.4，因為考量到未來 backword 會有再延伸擴展的機會，因此這邊介紹 有關於彈出來的視窗(tooltip)[45-46]。
首先先定義一個名為 addWordButton 的 function，並且於 function 裡先設定 好圖檔相關資料，例如：title、src 等。待設定完畢之後，再至 updateLayout function 呼叫 addWordButton function 即可，其程式碼如表 4.6，架構流程圖請參見圖 4.5。
圖 4.4 Tooltip function
圖 4.5 Tooltip 之架構流程圖
表 4.6 Tooltip function
BW_Layout.prototype.addWordButton = function () { var button = BW_createElement("IMG");
button.setAttribute("align", "absmiddle");
button.style.cursor = "pointer";
button.style.backgroundColor = "#FFFACE";
button.setAttribute("title", "Open WebService");
button.setAttribute("src", "chrome://backword/skin/addWord.gif");
this.getDiv().appendChild(button);
};
表 4.7 backword.xul 事件型態
<script>
var backword = new BW_Layout();
addEventListener("load", backword.doLoad, false);
addEventListener("unload", backword.doUnload, false);
addEventListener("mousemove", backword.doMouseMove, false);
addEventListener("mouseout", backword.doMouseOut, false);
addEventListener("mousedown", backword.doMouseDown, false);
addEventListener("mouseup", backword.doMouseUp, false);
addEventListener("scroll", backword.doScroll, false);
addEventListener("blur", backword.doBlur, false);
</script>
backword addEventListener
首先先提到 backword 的 addEventListener(事件型態)[47-49]，
addEventListener 用法就是當某個事件(狀況)被觸發了之後就會去呼叫並執
行某個 Function。backword.xul 檔案一共使用到八個事件型態，其程式碼如表4.7 。 其 型 態 內 容 如 表 4.8 ， 例 如 ： “ addEventListener("mouseout",
backword.doMouseOut, false); ” ， 當 滑 鼠 離 開 元 素 時 ， 則 會 去 呼 叫 並 執 行
doMouseOut function 。 此 時 doMouseOut function 執 行 時 則 會 去 呼 叫
doMouseOutImpl function，當 doMouseOutImpl function 執行時會去呼叫 killTimer
function，最後將計時器結束。其程式碼請參見表 4.9，其 addEventListener 之架
構流程圖請參見圖 4.6。表 4.8 addEventListener 事件型態表
處理程式 何時引發事件
doload
載入完畢dounload
卸載或網頁離開結束domousemove
滑鼠移動domouseout
滑鼠離開元素domousedown
按下滑鼠鍵時domouseup
滑鼠鍵放開時doscroll
滑鼠滾輪捲動頁面時doblur
元素失去輸入焦點表 4.9 DoMouseOut function
BW_Layout.prototype.doMouseOut = function (e) { backword.doMouseOutImpl(e);
};
BW_Layout.prototype.doMouseOutImpl = function (e) { this.killTimer();
};
Backword 查詢單字解釋功能
Backword 查詢單字解釋功能是發送請求至 Google 翻譯工具，待 Google 回
傳解釋結果後，Backword 會彈出一個小視窗，並顯示查詢解釋結果。程式碼請 詳見表 4.10。如圖 4.7，使用者使用 backword 查詢結果與 Google 回應解釋結果 兩者是一樣的。其架構流程圖請參見圖 4.8。圖 4.7 Backword 查詢結果
表 4.10 Backword 查詢單字解釋功能
var tolang = this._tolang;
var host = "www.google.com";
var lang = "en|" + tolang;
var url = BW_DictionaryUrl(host, text, lang, tolang);
var request = new XMLHttpRequest();
request.open("GET", url, false);
request.send(null);
if (request.status == 200) { if (/^zh/.test(tolang)) {
response = request.responseText.replace(/ /g, "");
} else {
response = request.responseText;
} }
function BW_ComposeUrl(prefix, host, restrict, searchStringTerms) { var parts = [];
parts.push("http://");
parts.push(prefix);
parts.push(host.substr(3));
parts.push("/");
parts.push(restrict);
parts.push("?");
parts.push(searchStringTerms.join("&"));
return parts.join("");
}
function BW_DictionaryUrl(host, text, lang, hl) { var queryParts = [];
queryParts.push("sourceid=navclient-ff");
queryParts.push("ie=UTF-8");
queryParts.push("oe=UTF-8");
queryParts.push("text=" + text);
queryParts.push("langpair=" + lang);
queryParts.push("hl=" + hl);
queryParts.push("sig=8" + GPR_awesomeHash(text));
return BW_ComposeUrl("www", host, "tbproxy/dictionary", queryParts);
}
圖 4.8 查詢單字解釋之架構流程圖
第 第 第
第5章 章 章 實驗結果 章 實驗結果 實驗結果 實驗結果
本章所要介紹的為本論文所提出的方法，本章節將介紹本方法的架構、功 能、流程與展示。
5.1 系統架構 系統架構 系統架構 系統架構
以 Backword 為基礎來發展本系統，其架構如圖 5.1。Backword 整個資料夾 中包含有 chrome、components 以及 defaults 上述三個資料夾與 chrome.manifest 以及 install.rdf 這兩個檔案。其細部架構同 4.3.1 系統架構，這邊就不重覆介紹。
圖 5.1 Backword 目錄架構圖