[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

 

 

原文地址:https://www.cnblogs.com/superdo/p/4801079.html