太陽老闆® 筆記

冷靜是智慧的門戶　勤勞是成功的種籽　感恩是幸福的泉源　懺悔是改過的妙方

2015-04-30

Firefox 擴充套件 開發 Add-ons SDK(Firefox extension) 入門教學

Firefox 擴充套件 開發 Add-on SDK(Firefox extension) 入門教學

前言：

 

 

         Firefox的擴充套件叫做Add-on，跟Chrome Extension名稱不太一樣，而Add-ons就包括了plugin(外掛)、theme(佈景主題)..等等，這些都算是在Add-ons，另外Mozilla還提供可以直接在網頁上開發的Add-ons builder，這篇文章主要是使用Add-on SDK的方式。

 

 

開始吧!!!

 

●首先電腦需下載安裝以下三樣：

  • Python 2.5、2.6或2.7，注意3.x版的目前不支援(2015.04.30)。
  • Firefox瀏覽器
  • Add-on SDK(解壓縮即可)

image

下載連結(官網自行下載)：https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Installation

PS：請記住安裝及解壓縮的位置。

 

 

●都下載安裝完成以後，更改環境變數

控制台 > 系統及安全性 > 系統 > 進階系統設定 > 環境變數

 

image

 

 

●在「系統變數」找到「Path」點編輯，變數直的最後加上兩條路徑分別是Python以及Add-ons SDK。

例如：..;C:\Python27;C:\addon-sdk-1.17\bin;

 

image

 

●新增使用者變數

變數名稱：CUDDLEFISH_ROOT

變數值：{Add-on SDK 路徑}

 

image

 

變數名稱：PYTHONPATH

變數值：{Add-on SDK 路徑\python-lib}

 

image

 

變數名稱：VIRTUAL_ENV

變數值：{Add-on SDK 路徑}

 

image

 

 

●打開cmd 確認是否設定正確，輸入cfx，出現一堆英文字「不是內部或外部命令、可執行的程式或批次檔。」
不是出現「不是內部或外部命令、可執行的程式或批次檔。」代表有設定成功。

 

image

 

 

●接下來用指令先產生sample code給我們，開啟一個空的資料夾，這邊示範是用HelloWorld，
輸入cfx init

 

image

 

 

●出現以下訊息代表以及幫我們在資料夾內產生好了sample code。

 

image

image

 

 

●找到lib資料夾下的main.js，程式主要一開始執行的就是這裡。

 

image

 

●複製官網提供的sample code 到 main.js

 

   1: var buttons = require('sdk/ui/button/action');
   2: var tabs = require("sdk/tabs");

		

		
		
   3:  

		

		

		
		
   4: var button = buttons.ActionButton({

		

		

		
		
   5:   id: "mozilla-link",

		

		

		
		
   6:   label: "Visit Mozilla",

		

		

		
		
   7:   icon: {

		

		

		
		
   8:     "16": "./icon-16.png",

		

		

		
		
   9:     "32": "./icon-32.png",

		

		

		
		
  10:     "64": "./icon-64.png"

		

		

		
		
  11:   },

		

		

		
		
  12:   onClick: handleClick

		

		

		
		
  13: });

		

		

		
		
  14:  

		

		

		
		
  15: function handleClick(state) {

		

		

		
		
  16:   tabs.open("https://www.mozilla.org/");

		

		

		
		
  17: }

		

		

	





	

		





	image



	 



	 



	解說：


    
	
  • 
		require('sdk/ui/button/action');  // 按鈕物件
    • 
	
  • 
		var tabs = require("sdk/tabs");  //頁籤物件
    • 
	
  • 
		icon //圖案的路徑
    • 
	
  • 
		onClick //點擊後發生的事件
    • 
	
  • 
		tabs.open(https://www.mozilla.org/);  // 開該網址的分頁
    • 
	
  • 
		icon圖檔請放置在Data的資料夾下
    • 




	 



	image



	 



	 



	●執行測試，在cmd輸入cfx run



	 



	image



	 



	 



	●他會幫我們開一個新的分頁，裝上此plugin，就可以測試你寫的功能了!!!



	 



	image



	 



	 



	●另外如果想要匯出或裝在別人的Firefox上，輸入cfx xpi



	 



	image



	 



	 



	●會產稱{名稱}.xpi，在拖曳到Firefox的擴充套件頁面即可。



	 



	image



	 



	 



	●另外這邊再多介紹一個比較常用的物件sdk/page-mod，可以依照比對的設定的URL，執行Script。



	 



	image



	image



	

		
   1:  

		
		
   2: // Import the page-mod API

		

		

		
		
   3: var pageMod = require("sdk/page-mod");

		

		

		
		
   4:  

		

		

		
		
   5:  

		

		

		
		
   6: pageMod.PageMod({

		

		

		
		
   7:   include: "*.tw",

		

		

		
		
   8:   contentScript: 'alert("test")'

		

		

		
		
   9: });

		

		

	





	

		





	 



	 



	 



	 



	結論：



	 



	         本來都只寫Chrome Extension因為主要瀏覽器是使用Chrome，之前有想過要改用Firefox當主瀏覽器因為太耗電及記憶體吃太多，但個人使用習慣問題及寫的套件都在Chrome上所以遲遲沒跳槽，不過因為將來遲早要跳槽，所以才開始轉到Firefox寫Add-ons!!



	 



	PS:聽說Windows 10 的新瀏覽 Edge，可以相容Chrome及Firefox的套件，太強啦!!!!!



	 



	參考資料：Mozilla官方文件


                    
 



 



 








如有錯誤還請各位先進前輩們不吝嗇的指教，謝謝。



 



 

                

                

                

                    
                

                                
                

                

                

                

                

            

        

        

            

    

    
    




            

                                        
                        

            

            

                

                    
系列文章