[Firefox附加组件]0001.入门

Firefox 火狐浏览器，拥有最快、最安全的上网体验,并且火狐拥有超过一万个的 扩展（add-ons），提供各种不同的扩展功能，您可以简单的下载、安装这些扩展以增强您的火狐功能，帮助您更好、更个性化的体验网上冲浪。无论是在网上听音乐，看视频，购物，看新闻...的都能找到相应的火狐扩展能帮助您提升体验

开发步骤

---

1.附加组件有三种不同的创建扩展的方式：
　　[1].基于 Add-on SDK 的方式 (使用一组高级别的 JavaScript APIs 开发无需重启的扩展。推荐使用)
　　[2].无需重启扩展的方式 (手动创建无需重启的扩展)
　　[3].传统方式 (使用 overly 的方式创建传统的扩展)

2.基于 Add-on SDK 的方式，所需配置：
　　[1].Python 2.5，2.6 或 2.7。 确保你已经安装过Python。
　　[2].Firefox火狐浏览器(本教程针对最新的浏览器)。
　　[3].SDK本身：可以获取SDK的最新稳定版本为 tarball压缩包 或 zip 文件。

3.Add-on SDK各平台安装：
　　[1].Mac OS X:使用以下命令通过 homebrew来安装SDK插件工具

brew install mozilla-addon-sdk

[2].Mac OS X/Linux：无论选择哪个方式获取tarball压缩包 或 zip 文件，都要对其解压缩作为根路径,并通过shell/命令提示符切换到SDK的根目录下

tar -xf addon-sdk.tar.gz
cd addon-sdk
#Bash的用户(大多数人都是的)
source bin/activate
#非Bash的用户
#bash bin/activate

　　上述命令运行完后看到如下结果

 　　[3].Windows： 下载解压后进入SDK目录直接运行 

binactivate

　　通过上述操作就在各平台搭建好了SDK的运行环境

4.制作启动项   

[1].windows:使用 binactivateactivate.bat批处理脚本脚本，也可以使用命令行setx工具或控制面板激活永久使用。
[2].mac os x/linux:binactivateactivate bash脚本，还可以在 /bin 目录中创建到cfx 程序的符号链接

ln -s 你的SDK目录/bin/cfx /bin/cfx

在命令窗口输入cfx，检查下

　　如上图，就SDK完美完美搞定了。

5.安装npm

　　[1].下载Node.js,并安装。    　　　　　　

　　[2].添加路径/usr/local/bin/npm 到系统变量$PATH

echo "export PATH=/usr/local/bin/npm:$PATH" >> ~/.bash_profile

6.安装jpm
　　[1].终端执行下面命令

sudo npm install jpm --global

　　稍等片刻

　　至此所有SDK,命令 统统全搞定了，马上来搞个附加组件玩玩。

7.走马观花式的初始化一个空的扩展

　　[1].初始化。终端窗口中，创建一个新的文件夹。进入新创建的文件夹，最后执行 cfx init 命令

mkdir my-addon
cd my-addon
cfx init

　　出现如下信息,初始化就完成了。

　　[2].实现扩展,打开在上一步骤中创建好的 "lib" 文件夹中的 "main.js" 文件，添加以下的代码

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

var button = buttons.ActionButton({
  id: "mozilla-link",
  label: "Visit Mozilla",
  icon: {
    "16": "./icon-16.png",
    "32": "./icon-32.png",
    "64": "./icon-64.png"
  },
  onClick: handleClick
});

function handleClick(state) {
  tabs.open("http://www.mozilla.org/");
}

　　[3].保存以下的三个图标文件到 "data" 文件夹中

　　

　　[4].回到命令行窗口，执行命令 

cfx run

　　自动打开Firefox，并在工具栏可见Firefox 图标点击即跳转至 Firefox 主页(http://www.mozilla.org/)

　　[5].打包附件组件，执行命令

cfx xpi

　　得到如下信息，在my-addon下生成了 my-addon.xpi 文件.

在 Firefox 的 "文件" 菜单中选择 "打开"菜单项。这 将出现一个文件选择对话框：找到  "my-addon.xpi" 文件，打开它并且遵循出现的提示以便安装它,至此大功告成!

 

SDK及命令工具相关链接

---

• Firefox: http://www.firefox.com.cn/
• Python: http://www.python.org/
• HomeBrew: http://brew.sh/
• Add-on SDK: https://ftp.mozilla.org/pub/mozilla.org/labs/jetpack/jetpack-sdk-latest.tar.gz
• Node.js: https://nodejs.org/en/

 

 

本站文章为 宝宝巴士 SD.Team 原创，转载务必在明显处注明：（作者官方网站： 宝宝巴士 ) 
转载自【宝宝巴士SuperDo团队】 原文链接: http://www.cnblogs.com/superdo/p/4801079.html