黃聰：如何使用Add-on SDK開發一個自己的火狐擴展

火狐開放了擴展的開發權限給程序員們，相信很多人都會希望自己做一些擴展來方便一些使用。

我最近做一些項目也需要開發一個火狐擴展，方便收集自己需要的數據，因此研究了幾天怎么開發，現在已經差不多完成了，就順便騰出時間來做個教程給大家看看吧。

 

------------------------------  無可奈何的分割線 ------------------------------ 

原先我是找了幾個網上的教程，沒有使用SDK來開發，備受折磨。這個可以看看我之前的文章：

黃聰：一、如何創建一個狀態欄擴展（火狐插件擴展開發教程）

黃聰：二、如何通過URL獲取其他網頁源代碼內容（火狐插件擴展開發教程）

這兩個簡簡單單的擴展，因為沒有SDK，導致花了我2天的時間，不過幸運的是，我找到了這個視頻：

黃聰：使用Add-on SDK開發火狐擴展

開發立刻變得無比的愉快，下面我就介紹一下怎么用一個SDK開發一個擴展，功能是改變一個頁面的H1標簽的字體顏色為紅色。

 

------------------------------  厚顏無恥的分割線 ------------------------------

1、使用Add-on SDK需要一個開發者帳號，我們登錄https://addons.mozilla.org/zh-CN/firefox/users/register，先注冊一個開發者帳號。

 

2、注冊好之后，我們以開發者身份登錄：https://builder.addons.mozilla.org/user/signin/

 

3、登錄好之后，點擊Create -> Add-on。如下圖：

 

 4、點擊之后，我們就可以開始寫我們的擴展啦！！！！先來看看SDK的界面：

5、我們先寫主程序的代碼，在main.js中輸入如下代碼：

//導入頁面控制類page-mod
var pageMod = require("sdk/page-mod");
var self = require("sdk/self");

//下面是指只要加載了以 http://tieba.baidu.com/p/ 開頭的URL，就加載 Data 資源文件夾中的 jquery-1.10.1.min.js 和 test.js 文件
pageMod.PageMod({
  include: "http://tieba.baidu.com/p/*",
  contentScriptFile: [self.data.url("jquery-1.10.1.min.js"),
                      self.data.url("test.js")]
});

 

6、因為我們需要jquery，因此需要導入一下，點擊Data旁邊的“+”號，然后輸入遠程jquery的鏈接http://code.jquery.com/jquery-1.10.1.min.js，然后點擊Create Attachment，這樣SDK會自動下載遠程的jquery到本地並建立連接。如下圖：

 

7、有了jquery，接下來就是我們的核心代碼了，我們要用自己的js來控制H1的顏色。我們再次點擊Data旁邊的“+”號，在第二行輸入test.js，然后點擊Create Attachment，這樣就有了一個test.js文件了，我們的核心代碼將在這里寫，代碼如下：

$(document).ready(function(){
    $("h1").attr("style","color:#F00;");  //頁面加載完成，將h1的顏色改變為紅色
});

 

8、最后，點擊SDK工具欄上面的磁盤符號進行保存。

 

9、左上角的眼睛符號按鈕，SDK就會自動保存並安裝，安裝完成會在右上角出現復選框：

 

10、最后看看我們的插件是否能正常使用了呢，我們隨便打開一個百度貼吧的帖子吧，接着我們就會驚喜的發現標題在頁面加載完成之后變成紅色的了！好了，教程到此結束！

 

PS：火狐有挺健全的文檔庫了，雖然我覺得還不夠，不過一些簡單的開發足夠了，鏈接在這里https://addons.mozilla.org/en-US/developers/docs/sdk/latest/

PPS：推薦一下自己的博客http://hcsem.com，雖然干貨好像都是放到博客園的

PPPS：碼字、碼代碼、碼圖很累呀有木有！！！各位看官覺得文章不錯狠狠點擊推薦按鈕吧！！！！！！