Tip:
Highlight text to annotate it
X
嗨!我是 Daniel Bunchner Add-on Builder 產品經理
我要教你如何製作一個簡單的 Firefox 套件
Add-on Builder 是網頁基礎的 Add-on SDK 開發環境
讓你用 JS、HTML 及 CSS 製作 Firefox 擴充套件
在開始前,我先點出開發的套件主要特色
使用 Add-on Builder 或 Add-on SDK 開發
套件安裝時不須重新啟動 Firefox
讓我們瞧瞧如何用 Add-on Builder 建造簡單的套件
首先開啟 builder.add-ons.mozilla.org 進入 Add-on Builder
Add-on Builder 跟 Firefox 附加元件網站 使用同一個帳號
如果你已有 AMO 帳號就可以直接登入
如果尚未擁有 AMO 帳號
請點擊「Get one」創造一個新帳號
我們已經有 AMO 帳號,現在開始吧
當你點擊「Create an Add-on Now」按鈕
你會進入有程式編輯器的開發環境中
檔案樹在左邊,工具列上有些有用工具
在我們開始撰寫擴充套件之前
讓我們快速瀏覽一下檔案樹的結構
在「Lib」目錄中
包含你會用到的各種 JS 模組
你的大部分程式碼會存在這些模組裡
在「lib」目錄下的「data」目錄
你可以置入任何會用到的資源
例如圖片、HTML檔、與網頁內容互動的程式碼
最後你可以在「Libraries」目錄中
選擇要使用的 Add-on SDK 版本
我們已經為你選擇最新的穩定版 SDK
在這個簡單的套件中,這是唯一需要的程式庫
回到「Lib」目錄中
可以看到「main.js」已經被建立並開啟
這是任何新套件的主要檔案
我們預設幫你自動建立
讓我們開始在 main.js 中寫些程式吧
這個套件要讓使用者選取文字直接翻譯
透過 Google translation API
首先要取得我們需要的 API
在 Add-on SDK 中使用 required 指令
如果你有例如 nodeJS 的 CommonJS 經驗
你就會非常熟悉
這裡我們載入 context-menu API
我們需要用它增加新的右鍵選單
讓我們發出網路請求的 request API
取得使用者所選文字的 selection API
讓我們增加新的右鍵選單項目
我們已經建立新的右鍵選單項目
給它一個 label,並設定 context
label 是顯示在右鍵選單中的字串
context 定義何時應該顯示這個項目
在這個例子中,在頁面選取任何文字時
selectioncontext 告知瀏覽器顯示選單項目
我們需要定義表單項目的呼叫函式
這個函式將網頁選定的文字
傳遞給 onMessage 處理程序
我們建立了從網頁傳遞文字
到附加元件的程式碼
我們來定義一個 onMessage 處理程序接收
藉由提供一個 onMessage 參數
我們讓 selection API 在選取時做某些動作
這裡使用 Google translation API
將接收到的文字翻譯成英文
並以譯文替換選取的文字
現在程式已經完成
讓我們將套件儲存一個版本
你可以點擊「save」來儲存套件
這裡可以指定一個版本號
這麼早期的階段,我們建議你存為 0.1 版
在備註中說明這是你的首次 commit
是時候為我們的套件取個名字了
點擊「properties」來進行
這個對話框中可以變更名稱
簡短描述套件的功能
這兩項資訊在搜尋你的套件時非常重要
看起來很棒
現在測試我們的程式,看看做得如何
在工具列按下「test」鈕測試
如果你還沒安裝 Add-on Builder Helper 套件
會跳出對話框請你安裝
Add-on Builder Helper 是不需重啟的套件
所以只會有短暫延遲
我們的套件已經完成並且裝好了
讓我們瀏覽法文版 Mozilla 宣言來測試
選取一些文字
現在可以用我們的套件來即時翻譯了
重要的是:關掉瀏覽器會移除 Add-on Builder 安裝的測試套件
當你很滿意你的套件時
你可以點擊「Download」按鈕下載
讓你長期測試你的套件
上傳至 AMO 與他人分享
放到你的個人網站讓使用者下載
我們快速介紹了使用 Add-on SDK 的 Add-on Builder
如你所見,只要使用少許的 JavaScript
就可以製作非常有用的套件
你可以用 Add-on Builder 跟 SDK 做許多事
我們鼓勵您嘗試看看
一起讓 Firefox 套件變得更棒吧