神奇! 搞大數位娛樂的肚子-狂想空間: 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 請務必重新開啟瀏覽器。

神奇! 搞大數位娛樂的肚子-狂想空間

2008/08/12

Building 快速開發 Firefox Extensions

0 意見:

網誌存檔

我的好友連結

愛我的人