黄聪：如何使用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：码字、码代码、码图很累呀有木有！！！各位看官以为文章不错狠狠点击推荐按钮吧！！！！！！