上手篇 - 製作 Firefox 佈景主題

準備

下載最新版的 Firefox 後安裝，別忘了也把 DOM 觀察器裝上去。

解壓縮佈景主題

你可以修改任何既有的 Firefox 佈景主題，但為方便起見我們就以 Winstripe（Firefox 預設主題）為範例。這個主題放在 Firefox 安裝目錄的 <tt>classic.jar</tt> 檔案中，而 jar 檔其實就是改了名字的 zip 檔，你可用與開 zip 檔相同的程式開啟 jar 並解壓縮其中的檔案。如果應用程式看不懂這改了檔名的 zip 檔，你可以自己將其改名為 <tt>classic.zip</tt> 再解壓縮。

Classic.jar 位置

Linux: /usr/lib/MozillaFirefox/chrome/classic.jar

Windows: \Program Files\Mozilla Firefox\chrome\classic.jar

Mac OS X:

先進入應用程式的資料夾
按住 Control 再點選 Firefox 應用程式圖示，選擇 Show Package Contents。
接著再進入 contents/MacOS/Chrome/classic.jar

將 <tt>classic.jar</tt> 複製到另一個容易取用的資料夾（建議放到 <tt>Classic</tt> 中）後解壓縮，記得確保目錄結構完整。

註：你可以將 <tt>.jar</tt> 附檔名改為 <tt>.jar.zip</tt> 再解壓縮

<tt>skin</tt>: <tt>skin</tt> 裡頭就只有另一個 <tt>classic</tt> 目錄，內含佈景主題的各種檔案。
<tt>classic</tt>: <tt>classic</tt> 內有以下各種目錄。
<tt>browser</tt>: <tt>browser</tt> 內含工具列、書籤管理員及選項視窗的各種圖示。
<tt>global</tt>: 所有指定瀏覽器物件顯示方式的重要 CSS 檔差不多都在 <tt>global</tt> 裡面，所以這也是佈景主題最重要的目錄。
<tt>mozapps</tt>: <tt>mozapps</tt> 則有擴充套件管理員和更新精靈等視窗的樣式及圖示。
<tt>help</tt>: <tt>help</tt> 裡頭是說明手冊視窗的佈景檔。
<tt>communicator</tt>: 沒什麼重要的東西，基本上不理它也無妨。

安裝你的新佈景主題

由於動態變更佈景主題在設定上有點麻煩，所以修改 Firefox 佈景主題後若想看到變化，得先學學重新包裝內建主題使其可安裝於 Firefox 的方法。接下來我們將把範例佈景主題命名為「My_Theme」，當然你也可以換成自己喜歡的名字。

複製必備檔案

首先要將所有檔案以正確的目錄結構放好，所以請先建立一個名為 <tt>My_Theme</tt> 的目錄，然後在其中放進剛剛解壓縮出來的 <tt>browser</tt>、<tt>global</tt>、<tt>communicator</tt>、<tt>help</tt> 及 <tt>mozapps</tt> 目錄，當然 <tt>icon.png</tt> 和 <tt>preview.png</tt> 也要放進去。沒錯，這表示此新目錄內容結構與 <tt>classic.jar</tt> 沒什麼不同。

建立安裝檔

Contents.rdf

複製 contents.rdf 並放進 <tt>\My_Theme</tt> 中，接著以文字編輯器開啟之。這個檔案是用以描述佈景主題的小型 XML 資料庫。

在程式碼中搜尋所有的「My_Place」字串，換成你自己取的佈景主題名稱。

而接下來的「包裝」區段列出你修改了哪些瀏覽器外觀組件。假設這個佈景包含 Chatzilla 的樣式，那麼也要加上另一行類似的程式、改以指定 Chatzilla。不過，以下的清單就是我們要改的所有東西，所以只要把藍色字稍加修改，符合你在本節之前所用的主題名稱即可。

<RDF:li resource="urn:mozilla:skin:My_Theme:communicator"/>
<RDF:li resource="urn:mozilla:skin:My_Theme:editor"/>
<RDF:li resource="urn:mozilla:skin:My_Theme:global"/>
<RDF:li resource="urn:mozilla:skin:My_Theme:messenger"/>
<RDF:li resource="urn:mozilla:skin:My_Theme:navigator"/>

接著存檔，關閉文字編輯器。

install.rdf

複製 install.rdf 並放進 <tt>My_Theme</tt> 目錄中，接著以文字編輯器開啟之。這個檔案也是用以描述佈景主題的小型 XML 資料庫。

  <Description about="urn:mozilla:install-manifest">
  <em:id>{Themes_UUID}</em:id>
  <em:version>Themes_Version</em:version>

在第一段中你必須為佈景主題製作一個 UUID，然後為此佈景主題版本編號。將上述兩種資訊填入第一段後繼續看下去。

接著要更改目標應用程式（在本例為 Firefox）的相容版本，填入最低需求跟最高相容限制版本號：

  <em:targetApplication>
    <Description>
      <!-- Firefox 的 UUID -->
      <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
      <em:minVersion>Min_FF_Version</em:minVersion>
      <em:maxVersion>Max_FF_Version</em:maxVersion>
    </Description>
  </em:targetApplication>

設定相容版本號可以確保佈景主題不會裝在無法相容（或還沒測試過）的版本上，以免出問題。

CSS 檔案

這些目錄中的 CSS 檔告訴瀏覽器顯示按鈕或其他控制項的方式、在哪裡放圖、邊框跟內距該有多少等資訊。

接下來的例子，我們就試著更動標準按鈕。

將 <tt>global</tt> 目錄裡的 <tt>button.css</tt> 開啟於純文字編輯器中，接著找到 button { 區段；這一段定義一般狀態（滑鼠未移上、未停用也未選取）下的按紐圖樣。

將 background-color: 特性值改為 DarkBlue，再將 color: 改為 White，接著存檔。file.

原作者註：more after I get done with some tests

重新包裝 JAR

現在只要用任一種 ZIP 壓縮軟體依下列目錄結構重新包裝 JAR 檔就行了：

/browser/*
/communicator/*
/global/*
/help/*
/mozapps/*
/contents.rdf
/install.rdf
/icon.png
/preview.png

要注意的是別連 <tt>My_Theme</tt> 這個上層目錄都壓了進去，不然稍後用拖曳方式安裝佈景時會在毫無錯誤訊息的情況下安裝失敗。

從 Web 上安裝佈景主題

若想直接從網路上安裝佈景主題的 JAR 檔，可以採用這樣的 JavaScript：

<a href='javascript:InstallTrigger.installChrome(InstallTrigger.SKIN, 
 "myskin.jar", "My Skin Theme")'>安裝佈景主題</a>

而若要將 JAR 檔下載至硬碟後安裝，則可使用這個表單。

當然你也可以直接開啟 Mozilla 的佈景主題視窗，然後將 .jar 檔案拖進去安裝。

將資料夾轉為 .jar 檔超簡單，只要先壓縮成 .zip 檔後將「.zip」更名為「.jar」就行了。

準備