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

火狐開放了擴展的開發權限給程序員們，相信不少人都會但願本身作一些擴展來方便一些使用。

我最近作一些項目也須要開發一個火狐擴展，方便收集本身須要的數據，所以研究了幾天怎麼開發，如今已經差很少完成了，就順便騰出時間來作個教程給你們看看吧。

 

------------------------------  迫不得已的分割線 ------------------------------ 

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

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

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

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

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

開發馬上變得無比的愉快，下面我就介紹一下怎麼用一個SDK開發一個擴展，功能是改變一個頁面的H1標籤的字體顏色爲紅色。

 

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

一、使用Add-on SDK須要一個開發者賬號，咱們登陸https://addons.mozilla.org/zh-CN/firefox/users/register，先註冊一個開發者賬號。

 

二、註冊好以後，咱們以開發者身份登陸：https://builder.addons.mozilla.org/user/signin/

 

三、登陸好以後，點擊Create -> Add-on。以下圖：

 

 四、點擊以後，咱們就能夠開始寫咱們的擴展啦！！！！先來看看SDK的界面：

五、咱們先寫主程序的代碼，在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")]
});

 

六、由於咱們須要jquery，所以須要導入一下，點擊Data旁邊的「+」號，而後輸入遠程jquery的連接http://code.jquery.com/jquery-1.10.1.min.js，而後點擊Create Attachment，這樣SDK會自動下載遠程的jquery到本地並創建鏈接。以下圖：

 

七、有了jquery，接下來就是咱們的核心代碼了，咱們要用本身的js來控制H1的顏色。咱們再次點擊Data旁邊的「+」號，在第二行輸入test.js，而後點擊Create Attachment，這樣就有了一個test.js文件了，咱們的核心代碼將在這裏寫，代碼以下：

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

 

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

 

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

 

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

 

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

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

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