Creating the Install Script

Getting it ready for the installation

Before we can package everything up for installation, we need to remove all references to Classic. Copy everything in \mozilla\chrome\classic\skin\classic to a directory called \mySkin.

Skin Info

When switching skins in Mozilla, it displays a preview image and some information about the theme. This is what we're going to create now.

Take a screenshot of Mozilla running your theme and create an image that is 438x89 pixels in size. Place it in \mySkin and call it preview.png (If it's a jpg or gif call it preview.jpg or preview.gif)

Download contents.rdf and place it in \mySkin and open it up in your text editor. This file is a small XML Database which is used to describe the skin.

 <RDF:Seq about="urn:mozilla:skin:root">
   <RDF:li resource="urn:mozilla:skin:mySkin/1.0" />

In the code search for the part listed above. Change the blue part to whatever you want your theme called and then it's version number. Then scroll down to the next section.

 <RDF:Description about="urn:mozilla:skin:mySkin/1.0"
     chrome:displayName="My Skin"
     chrome:accessKey="M"
     chrome:author="Me"
     chrome:description="This is my custom skin for mozilla"
     chrome:name="mySkin/1.0"
     chrome:image="preview.png">

The blue areas are explained below.

   * The first line should match the line that you modified in the previous section.
   * The Display Name. That is what the user sees in the Preference Panels list of themes.
   * The  access key is what key you can press to activate the skin in the preferences.
   * Replace the author section with your name.
   * The description shows up below the preview image.
   * Place your theme name and version number on this line
   * Point to your preview.png/preview.jpg/preview.gif here

The packages section lists which components of the Browser suit that you are modifying. If we also had skins for Chatzilla, we would have to add another line resembling the other ones and change it to point to Chatzilla. But this list includes everything that we changed, so just modify the blue text to point to match the name/version that you used in the sections before this.

<RDF:li resource="urn:mozilla:skin:mySkin/1.0:communicator"/>

<RDF:li resource="urn:mozilla:skin:mySkin/1.0:editor"/>

<RDF:li resource="urn:mozilla:skin:mySkin/1.0:global"/>

<RDF:li resource="urn:mozilla:skin:mySkin/1.0:messenger"/>

<RDF:li resource="urn:mozilla:skin:mySkin/1.0:navigator"/>

Finally, in the last section of the contents.rdf file we need to tell Mozilla what version this skin is compliant with. This version is set to 1.0, so this skin will only work in versions of Mozilla 1.0. You'll have to increase this version number to match the version of Mozilla that you want it to work on. If you have the wrong number here, after you install the skin and select it in the list, it will give you a message saying that it's out of date. If that happens, just come back to this step and change the number to whatever version of Mozilla you are using.

<RDF:Description chrome:skinVersion="1.0" about="urn:mozilla:skin:mySkin/1.0:communicator"/>

<RDF:Description chrome:skinVersion="1.0" about="urn:mozilla:skin:mySkin/1.0:editor"/>

<RDF:Description chrome:skinVersion="1.0" about="urn:mozilla:skin:mySkin/1.0:global"/>

<RDF:Description chrome:skinVersion="1.0" about="urn:mozilla:skin:mySkin/1.0:messenger"/>

<RDF:Description chrome:skinVersion="1.0" about="urn:mozilla:skin:mySkin/1.0:navigator"/>

Save the file and exit the text editor.

The Jar File

In the \mySkin directory, you should now have the 5 sub-directories along with the contents.rdf and preview.png files. Select them all and zip them up, making sure to include the paths (Do not include the \mySkin directory inside of the zip, just the files inside of \mySkin). Once the zip is created, rename it to mySkin.jar

Triggering the install from the web

To install your jar file directly from the web, you need to run some JavaScript.

<a href="javascript:InstallTrigger.installChrome(InstallTrigger.SKIN, 'myskin.jar', 'My Skin Theme')"> install My Skin </a>

If you have jar files on your hard drive and would like to install them, then download/use this form.

Back .: Contents :.Next

產生安裝用的Script

為安裝做好準備

在我們為了安裝而將所有的檔案封裝之前，我們需要先移除所有參考到Classic的檔案。拷貝所有在 \mozilla\chrome\classic\skin\classic 這個目錄底下的所有檔案到一個我們自己命名的\mySkin資料夾底下。

Skin Info

當我們在Mozilla中更換skin的時後，它會顯示出預覽的影像和一些有關這個主題的資訊。這就是我們現在要建立的部分。

使用Mozilla執行你的skin並且擷取螢幕畫面之後修改成一張438x89大小的圖片。將他放在\mySkin 底下並且命名為 preview.png(如果你使用.jpg或是gif檔案，那麼就將他命名為preview.jpg 或是preview.gif)。

下載contents.rdf 這份文件並且將他放到 \mySkin 的資料夾底下， 然後使用你的文字編輯器將它開啟。 這份文件是一份小型的XML資料庫，它用來描述這個skin。

 <RDF:Seq about="urn:mozilla:skin:root">
   <RDF:li resource="urn:mozilla:skin:mySkin/1.0" />

在程式碼中搜尋上面列出來的部分。 將藍色部分更換成任何你想要的名字和你設想的版本編號。 然後將游標移至下個區域。

 <RDF:Description about="urn:mozilla:skin:mySkin/1.0"
     chrome:displayName="My Skin"
     chrome:accessKey="M"
     chrome:author="Me"
     chrome:description="This is my custom skin for mozilla"
     chrome:name="mySkin/1.0"
     chrome:image="preview.png">

底下將解釋藍色部分的用途。

   * 第一行必須跟你之前修改過的部分相同。
   * Display Name。這是在偏好設置的列表中顯示的名稱。
   *  access key 這個是設定你在偏好設置中按下哪個按鍵可以將這個skin設成預設值。
   * 將author的區域改成你的名字。
   * description這部份的文字將會呈現在預覽的圖片底下。
   * 將你的skin名稱和版本編號放在此處。
   * 指向你的 preview.png/preview.jpg/preview.gif 位置所在。

底下列出這個套件可適用於哪些瀏覽器的相關程式。如果我們同時想讓這個skin支援Chatzilla， 那麼我們需要增加一行指到Chatzilla的文字敘述，撰寫方式與已經條列在底下的程式碼相當類似。 不過底下的列表已經列出了所有我們想要修改的目標，所以只要修改藍色部分的文字， 讓它與你之前修改的的 skin 名稱和版本相吻合即可。

<RDF:li resource="urn:mozilla:skin:mySkin/1.0:communicator"/>

<RDF:li resource="urn:mozilla:skin:mySkin/1.0:editor"/>

<RDF:li resource="urn:mozilla:skin:mySkin/1.0:global"/>

<RDF:li resource="urn:mozilla:skin:mySkin/1.0:messenger"/>

<RDF:li resource="urn:mozilla:skin:mySkin/1.0:navigator"/>

在 contents.rdf 的最後一個區域，我們需要告訴 Mozilla 這個面板適用於哪些 Mozilla 的版本。 目前這個版本編號設定在 1.0，所以這個 skin 將只能作用在 Mozilla 1.0 的版本上。 你可以增加這個版本編號來讓這個面本對應到新版本的Moziila。 如果你給定了錯誤的版本編號，那麼在你安裝完這個 skin 之後，在清單上選擇它， Mozilla將會給你一個這個 skin 已經過期的訊息。 如果這真的發生了，那麼只要回來這一步並且將版本編號修改成你目前Mozilla工作的版本即可。

<RDF:Description chrome:skinVersion="1.0" about="urn:mozilla:skin:mySkin/1.0:communicator"/>

<RDF:Description chrome:skinVersion="1.0" about="urn:mozilla:skin:mySkin/1.0:editor"/>

<RDF:Description chrome:skinVersion="1.0" about="urn:mozilla:skin:mySkin/1.0:global"/>

<RDF:Description chrome:skinVersion="1.0" about="urn:mozilla:skin:mySkin/1.0:messenger"/>

<RDF:Description chrome:skinVersion="1.0" about="urn:mozilla:skin:mySkin/1.0:navigator"/>

存檔並離開文字編輯器。

The Jar File

在 \mySkin 這個目錄之下，你會看到五個子目錄、 contents.rdf 和 preview.png 檔案。 選擇它們全部並且將它們用zip壓縮起來，確保它們包含所有的路徑( 不需要包含\mySkin這個目錄在zip檔案中， 只要在 \mySkin 這個目錄底下的檔案)。 當zip檔建立好的時後，將它改名成mySkin.jar。

Triggering the install from the web

要從web上直接安裝你的jar檔，你需要執行一些JavaScript。

<a href="javascript:InstallTrigger.installChrome(InstallTrigger.SKIN, 'myskin.jar', 'My Skin Theme')"> install My Skin </a>

如果你想安裝的jar檔以在你的磁碟上，那麼下載並執行它 this form.

Back .: Contents :.Next