2012
Feb
20

Firefox Plugin 外挂制作

Tags:
繁中版

網頁好讀版

Firefox Plugin 製作方式，官方本身就有提供一些 API 的教學，不過這裡先介紹，簡單的使用 Javascript 來完成 Firefox addon，必備的知識有 HTML , css , Javascript，這些基本的網頁程式，可以從網路上輕易的找到教學。

檔案架構

   |---chrome/content/browser.xul
   |---defaults/preferences/pref.js
   |---locale
   |------en-US/translations.dtd
   |------zh-TW/translations.dtd
   |---skin/skin.css
   |---install.rdf
   |---chrome.manifest

範例下載

  • chrome/content/ 這裡存的是內容
  • defaults/preferences/pref.js : 這個檔案是設定 addon 的 Firefox config ，你可以在 Firefox 瀏覽器中輸入 about:config ，就可以看到這些設定。
  • locale : 多國語系設定。
  • skin :
  • chrome.manifest : 指定 locale , content . skin 的路徑

Firefox Plugin: install.rdf

install.rdf 是安裝FF Plugin 必備的檔案，這個檔案需要指定、作者、支援的Firefox 版本、addon 名稱等等，其中 targetApplication id 是不可以任何修改的。

先看個範例吧

Example 
  1. <?xml version="1.0"?>  
  2.   
  3. <RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"  
  4.      xmlns:em="http://www.mozilla.org/2004/em-rdf#">  
  5.   
  6.   <Description about="urn:mozilla:install-manifest">  
  7.     <em:id>puritys_dic@ewebsite.com.tw</em:id>  
  8.     <em:version>1.0</em:version>  
  9.     <em:type>2</em:type>       
  10.     <em:name>Plugin name 外掛名稱</em:name>  
  11.     <em:description>sample , A test</em:description>  
  12.     <em:creator>creator</em:creator> 
  13.     <em:homepageURL>http://www.ewebsite.com.tw/</em:homepageURL>  
  14.  
  15.     <em:targetApplication>  
  16.       <Description>  
  17.         <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>  
  18.         <em:minVersion>3.5</em:minVersion>  
  19.         <em:maxVersion>10.*</em:maxVersion>  
  20.       </Description>  
  21.     </em:targetApplication>  
  22.      
  23.  
  24.   </Description>        
  25. </RDF>
  • em:id 這是指 Firefox Plugin 的程式id，每個外掛程式都要自已想一個ID 出來，並且不能重覆。
  • em:version ， Firefox Plugin 版本。
  • em:name ， Firefox Plugin 名稱，這個名稱也是不能重覆。
  • em:creator ，作者

targetApplication

  • em:id ， Firefox ID 固定不變。
  • em:minVersion ，支援的 Firefox 最低版本
  • em:maxVersion ，支援的 Firefox 最高版本

Firefox Plugin : chrome.manifest

定義外掛包含的檔案，如語言檔，UI(XUL) ，Javascript ，css file 等等，範例如下。

Example 
  1. content     sample    chrome/content/
  2. content     sample    chrome/content/ contentaccessible=yes
  3. overlay chrome://browser/content/browser.xul chrome://sample/content/browser.xul
  4.  
  5. locale   sample   en-US   locale/en-US/
  6. locale   sample   en-TW   locale/en-TW/
  7.  
  8. skin   sample   classic/1.0   skin/
  9. style   chrome://global/content/customizeToolbar.xul   chrome://sample/skin/skin.css

這裡指定了，我要使用 browser.xul 建立新的 Menu 按鈕，及我指定的語言 locale 檔案路行，另外還有其他相關的內容 content。

Firefox Plugin : browser XUL

XUL (XML User Interface) : 可以新增 UI 畫面在 browser 裡，例如我想要建增右鍵按鈕，工具列選單等等，都可以用 XUL 來達成。

  • chrome://sample/locale/translations.dtd : 這是載入多國語言的檔案，我的系統語言是繁體中文，所以外掛會自動載入 locale/zh-TW/translations.dtd 。

建增右鍵選單

Example 
  1. <?xml version="1.0"?>
  2. <?xml-stylesheet href="chrome://sample/skin/skin.css" type="text/css"?>
  3. <!DOCTYPE sample SYSTEM "chrome://sample/locale/translations.dtd">
  4. <overlay id="sample" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  5. <script src="jquery.js" /> <!--載入 jquery -->
  6. <script src="sample.js" /> <!--載入我們的外掛 -->
  7.  <popup id="contentAreaContextMenu">
  8.     <menuitem id="clipboard-text" 
  9.             label="&ExtName;" accesskey="F"
  10.             insertafter="context-sep-stop" 
  11.             class="menuitem-iconic" 
  12.             oncommand="sample.test();"/>
  13.  </popup>
  14. </overlay>

這裡有使用了 &ExtName; ，這是指有個變數名稱為 ExtName ，他的值是由 locale 的檔案中取得 。

右下角狀態列選單: status button 狀態列的按鈕

Example 
  1. <statusbar id="status-bar">
  2.    <statusbarpanel id="link-target-finder-status-bar-icon" class="statusbarpanel-iconic" src="chrome://linktargetfinder/skin/status-bar.png" tooltiptext="&runlinktargetfinder;" onclick="linkTargetFinder.run()" />
  3. </statusbar>

工具列的客製化按鈕

Example 
  1. <toolbarpalette id="BrowserToolbarPalette">
  2.    <toolbarbutton id="link-target-finder-toolbar-button" label="Link Target Finder" tooltiptext="&runlinktargetfinder;" oncommand="linkTargetFinder.run()"/>
  3. </toolbarpalette>

Firefox Plugin locale , translations.dtd

locale 是指多國語言，這裡主要是指定一些變數，並指定翻譯的內容，相當我也把他當作設定檔來使用，設定了 Path 等變數。

Example 
  1. <!ENTITY ExtPath "chrome://sample">
  2. <!ENTITY ExtName "執行外掛 JS function">
  3. <!ENTITY sample "test Extension">

Firefox Plugin Content

現在我就先寫一個簡單的 alert 來測試 Plugin功能，首先我在 browser.xul有寫一句 oncommand="sample.test();"，所以在 chrome content 中，我就要實做這個 test function。

Example 
  1. (function(){
  2.    window.sample = new sample();
  3.    function sample(){
  4.    
  5.    }
  6.    var o=sample.prototype;
  7.    o.test=function(){
  8.       alert("執行 test function ");
  9.    }
  10. }())

打包與安裝 Plugin

打包的方式很簡單，用windows內建的 zip 壓縮即可，這裡要注意不要直接壓縮整個資料夾，只有壓縮資料夾內的檔案就好了，例如 chrome , default, locale ,skin, install.rdf ，壓縮後會自動建立一個副檔名為 zip 的檔案，接著再把副檔名改成 xpi ，最後把 xpi 檔案拖接至 Firefox Browser ，就會自動進入安裝流程了。

Firefox Plugin 開發注意事項

  • Thumbs.db 要記得刪除，如果你是使用 Windows 開發， windows 預設會産生圖片的預覽圖，並暫存在 Thumbs.db ，這個檔案是不允許出現的，所以在打包Plugin時，要先刪除這些檔案，或是圖片資料夾不要使用有預覽 icon 的顯示方式。

Firefox Plugin 英文字典

平常在看英文文件，老是有一堆看不懂的單字，又找不到實用 & 簡易的字典Plugin，所以我自已寫了一個英文字典 Plugin。

使用方式很簡單，先反白英文單字，然後按右鍵選字典查詢。

網頁好讀版

This post was last modified by puritys

Copyright &copy; 2014 PURITYS.COM. All rights reserved.