2008/08/12

Building 快速開發 Firefox Extensions

這篇文章來自Building Firefox Extensions

首先,要提醒大家要裝幾個附加元件,這有助於開發 XUL:


在開發期間,也建議您建立專門用於開發的 Profile。Profile 的觀念原先是為了讓不同使用者建立其專屬的「環境」,這邊就算是同一個人也可以建立不同的身份。Mozilla/Firefox 會把像 Cache, cookies, bookmarks, history, plugins, extensions, searchengines 等等等依不同的 profile 分開放置,也就是說,在你開發期間,你不會與慣用的瀏覽行為混用,這樣做有一個非常大的好處,就是安全。建立新 Profile 的方法稍微要注意的是,先把所有 Mozilla 系列的產品關閉,至於要怎麼確認都關閉了呢?也很簡單,就是底下的命令與預期不合時就是了。在「開始」-->執行 下以 "firefox -profilemanager" 啟動瀏覽器,至於這一段的操作請參考Mozilla Profiles 是什麼管理 Profiles二篇文章。

以我來說,我是照著文件上說的,建了一個 dev, 將 Profile dev 指向 C:\Temp\dev,而開發中的附加元件則放在 C:\Temp\ext-dev 下,其實是可以直接放在 C:\Temp\dev\extensions 下的,但是畢竟我在開發過程會有些不必要的檔,分開比較不會搞混。原教學文件上有提供 Profile Manager 的圖片如下,記得要更改存放路徑:



在進行開發附加元件時,當然可以參考進行開發 Mozilla 附加元件!這篇文章,但是有人已經開發出一個附加元件樣版開發精靈,用它當第一步會省卻不少 Keyin 工作。再次強調一下,像這種精靈是不錯用,但是基本功夫也要自己去紮實才行。

上一段提到 Wizard 這事,有個欄位恐怕有人會遇到跟我一樣的困擾,那就是 Update URL,這一點我無法提供有效的 URL, 所以我就隨便填個 https:// 開頭的值,否則無法正常安裝。我所填的值如下,其中 Additional Features 我全選,反正不要的時候再刪就好了:



填完後按最下方的「Create Extension」即可下載一個 zip 檔,它就是精靈幫你產生的附加元件樣版,存好解壓縮到您喜歡的目錄即可,我是存到 C:\Temp\ext-dev 下,其子目錄名稱就如我所填的 Extension Short Name 欄位的值,也就是 svgeditor。

接下來要安裝這個附加元件其實也很簡單啦,若要按照正常手續,必須先將之包裝成 XPI, 然後由瀏覽器解壓後執行 install.rdf 來安裝,不過為了節省開發期間的「壓縮」->安裝->解安裝->重新啟動瀏覽器 的繁瑣過程,可以變成「直接修改」->重新啟動瀏覽器 這樣的過程,那就按照Building Firefox Extensions所講的方法,在 dev 這個 Profile 所安裝的目錄下的 extensions,以我為例就是在 C:\Temp\dev\extensions 建一個檔其名稱為精靈中 Extension ID 欄位的值,如 svgeditor@wade.cc.chen ,其內容指向剛剛解壓完的目錄,以我為例就是 C:\Temp\dev\extensions\svgeditor@wade.cc.chen 這個檔的內容只有一行:
C:\\Temp\\ext-dev\\svgeditor
之所以會用 \\ 是因為微軟的路徑用的是脫跳字元,所以得採用兩個反斜線。

搞定上面的步驟後,重新啟動 Firefox 時,記得選擇 dev 這個 Profile, 應該就安裝完成,你可以透過附加元件管理員來查,畫面如下:


NOTE: 若你未提供安全連線的 Update URL 的話會無法正常安裝。


正確安裝的話,在網頁內容按滑鼠右鍵會看到 "Your Menuitem" 的選項,畫面如下:


或者也可以從瀏覽器上方功能表的「工具」看到 "Your localized menuitem" 選項,畫面如下:


在根據這個樣版來開發屬於自己的附加元件之前,研究一下附加元件樣版裡的檔案是第一要務:

svgeditor: # 附加元件目錄
build.sh* # 用來建立 JAR 及 XPI 用的,您可以在 cygwin 中用,正常是 Linux 下
chrome.manifest* # 定義 chrome 的資源,例如語系,可用的目錄及其資源路徑,如後述
config_build.sh* # build.sh 所需要的組態定義
content/ # 會被包進 chrome 裡的主要內容,通常會有一堆 xul, js 等,此外還有 locale, skin
defaults/ # 附加元件在瀏覽器的 about:config 裡的組態預設值
install.rdf* # 安裝附加元件的資源檔,非常重要,如後述
locale/ # 語系,要中文化就得翻譯裡頭的檔,另文說明
readme.txt* # 說明檔
skin/ # 等於是 theme 要用的資源,如CSS 或圖示檔等


在此並不打算一個一個介紹,只寫了簡單的說明,先來針對 install.rdf 多說一些,底下中文部份請在閱讀時自動視為註解。

<?xml version="1.0" encoding="UTF-8"?> XML 版本
<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:em="http://www.mozilla.org/2004/em-rdf#"> rdf 的命名空間
<Description about="urn:mozilla:install-manifest"> 描述此附加元件
<em:id>svgeditor@wade.cc.chen</em:id> "id" 就是附加元件的識別,早期程用 GUID
<em:name>svg editor</em:name> 附加元件名稱
<em:version>1.0</em:version> 附加元件版本
<em:creator>wade cc chen</em:creator> 附加元件的撰寫者,可以擺多筆
<em:description>svg editor to create 3D model for virtual reality</em:description> 這當然就是附加元件的說明
<em:homepageURL>http://wadefs.blogspot.com</em:homepageURL> 附加元件的首頁
<em:updateURL>https://wadefs.blogspot.comv/em:updateURL> 附加元件的更新網址
<em:aboutURL>chrome://svgeditor/content/about.xul</em:aboutURL> 在附加元件管理員按滑鼠右鍵選「關於」會用到此 XUL
<em:optionsURL>chrome://svgeditor/content/options.xul</em:optionsURL> 同上,附加元件的選項
<em:iconURL>chrome://svgeditor/content/svgeditor.jpg</em:iconURL> 最件的圖示,在附加元件管理員每個附加元件前方的圖示
<em:targetApplication> 適用的軟體,可以指定多個,這邊是針對 firefox
<Description>
<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <!-- firefox --> 適用軟體的 id, 採用 GUID 表示
<em:minVersion>1.5</em:minVersion> 適用軟體的最小版本
<em:maxVersion>3.0.*</em:maxVersion> 適用軟體的最大版本
</Description>
</em:targetApplication>
</Description>
</RDF>

上述 firefox id: {ec8030f7-c20a-464f-9b0e-13a3a9e97384}, flock id: {a463f10c-3994-11da-9945-000d60ca027b}, thunderbird id: {3550f703-e582-4d05-9a08-453d09bdfdc6}

接下來看看 chrome.manifest 裡面的資源表示法,這個檔在您打算包成 JAR 檔時會有不同的表示法,以精靈產生的來說是沒被包成 JAR 格式,該檔內容如下,一樣,請把中文敘述自動當成註解:

content svgeditor content/ 這三個目錄會被視為 chrome 資源
locale svgeditor en-US locale/en-US/ 在下面包成 JAR 的範例中,寫法很不一樣
skin svgeditor classic/1.0 skin/ 而下一行的 chrome:// 就是 chrome 資源表示法
overlay chrome://browser/content/browser.xul chrome://svgeditor/content/firefoxOverlay.xul
style chrome://global/content/customizeToolbar.xul chrome://svgeditor/skin/overlay.css
由以上範例可以看到指定了 content, locale, skin, overlay, style, 底下看把 chrome 包成 jar 之後的表示法:

content extensiondev jar:chrome/extensiondev.jar!/content/ xpcnativewrappers=no
locale extensiondev en-US jar:chrome/extensiondev.jar!/locale/en-US/
skin extensiondev classic/1.0 jar:chrome/extensiondev.jar!/skin/

overlay chrome://browser/content/browser.xul chrome://extensiondev/content/firefoxOverlay.xul
overlay chrome://messenger/content/messenger.xul chrome://extensiondev/content/thunderbirdOverlay.xul
overlay chrome://navigator/content/navigatorOverlay.xul chrome://extensiondev/content/seamonkeyOverlay.xul

style chrome://global/content/customizeToolbar.xul chrome://extensiondev/skin/extensiondev.css


後面就接著說明 chrome, 一直沒去想辦法搞懂 chrome 一詞的由來,查字典更是愈查愈模糊,總之,我知道它代表附加元件就對了,當然不包括那些雜七雜八的東西,也就是說,可以想成 chrome 就是被瀏覽器載入的東西即可。不過話說回來,依我這記性,每次要找附加元件都找半天,而且有人也為了不知道怎麼看 utf-8 的純文字檔而傷腦筋,這邊提供一個附加元件叫Chrome List 或 Chrome Browser也行,她會把瀏覽器載入的附加元件的 chrome 列出來,甚至可以在每個 chrome 內的檔案上直接快按兩下打開,哦,當然是用瀏覽器開,對瀏覽而言非常好用, 也可以知道到底被載入了哪些東西在你的瀏覽器所佔用的記憶體裡。

附加元件可以由是否「影響」瀏覽器(或其他附加元件)的外觀來分類,這,就得靠 Overlay 來做到,請見 chrome.manifest 裡有一行:
overlay chrome://browser/content/browser.xul chrome://svgeditor/content/firefoxOverlay.xul
這一行指明要用 firefoxOverlay.xul 來附加在 browser.xul 上,而後者就是你所見的瀏覽器外觀。所以我們先來看看這個檔:
<script src="overlay.js"/> 跟 overlay 有關的動作都定義在這兒了,包括按滑鼠右鍵要做什麼,在工具功能表按相關選項的相對應動作等都定義在這兒。
這個檔的其他部份定義了附加元件要呈現的元件,譬如選項,或是按鈕,或是訊息視窗等等。

上面說明並未提到 Overlay 的意涵,若你有打開 browser.xul 來看,會找到被 overlay.js 叫用的一個元件 contentAreaContextMenu,這也就是在網頁內容區按滑鼠右鍵會被增加一個 "Your Menuitem" 選項的實作原理。也就是說,瀏覽器載入網頁後,會在其內容的 contentAreaContextMenu 後面「附加」上 firefoxOverlay.xul 裡 <menuitem id="context-svgeditor" label="&svgeditorContext.label;" 所定義的 svgeditorContext.label, 這個值又被定義在 locale/en-US/svgeditor.dtd 中。看得出來若你想把選項文字變中文的,就是要針對這個 locale 動手腳,請見 如何將附加元件中文化, 或是看Mozilla 中文化計畫 - Howto一文更好。也許我後面會寫寫這部份。若您有注意到,可以發現引用的方式就是在 label 前面加上 &, 這就有點像寫 shell script 程式裡面用 "$" 一樣。

最後,看一眼上面提到的 overlay.js, 可以這麼說,在寫 XUL 時,JSON 是被廣泛採納的物件表示法,我前不久才寫了一篇 Javascript 物件的表示法,有興趣的人可以拿這個 overlay.js 來兩相比較。

最後,我並不想研究該文提到的picnik,因此剩下的就留待研究 SVGeditor 時再來說明,這邊就只說說Building firefox extensions 教學文件提到的一件事:

picnik 是採 flash 來編輯照片,但是她有開放 API, 就像 google 對 base, blogger, picasa, maps, earth 等等所做的事一樣,這有助於 3rd party 將 picnik 嵌入其 web 應用程式中。

最後強調一下,若你有改檔案,尤其是 chrome.manifest 請務必重新開啟瀏覽器。

0 意見: