火狐开发----从头用到尾的cfx

标签：des   cWeb   style   blog   http   color   使用   os   

此教程阐述了如何使用 SDK 开发一个简单的扩展。

准备

要想使用 SDK 开发 Firefox 的扩展，您首先需要 安装并激活 SDK。一旦您完成了以上步骤，您将会看到一个命令行窗口。

初始化一个空的扩展

在命令行窗口中，创建一个新的文件夹。您可以在任何地方创建此文件夹，并不一定要把它放在 SDK 的根目录中。进入新创建的文件夹，键入 cfx init，然后回车：

mkdir my-addon
cd my-addon
cfx init

您将看到类似以下的输出：

* lib directory created
* data directory created
* test directory created
* doc directory created
* README.md written
* package.json written
* test/test-main.js written
* lib/main.js written
* doc/main.md written
Your sample add-on is now ready for testing:
try "cfx test" and then "cfx run". Have fun!"

实现扩展

现在您可以开始为新创建的扩展编写代码。打开在上一步骤中创建好的 "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/");
}

保存该文件。

下一步，保存以下的三个图标文件到 "data" 文件夹中：

	icon-16.png
	icon-32.png
	icon-64.png

var widgets = require("sdk/widget");
var tabs = require("sdk/tabs");
var widget = widgets.Widget({
  id: "mozilla-link",
  label: "Mozilla website",
  contentURL: require("sdk/self").data.url("icon-16.png"),
  onClick: function() {
    tabs.open("http://www.mozilla.org/");
  }
});

 回到命令行窗口，键入：

cfx run

这个 SDK 命令将会启动一个安装了您的扩展的 新的 Firefox 实例。在 Firefox 启动后，您将会在浏览器的右上角看到一个 Firefox 标记的图标。点击此图标，将会打开一个新的标签，并载入http://www.mozilla.org/ 。

A given cfx option has an inappropriate value:
  ZIP does not support timestamps before 1980

touch icon-16.png

这就是这个扩展的功能。它使用了两个 SDK 模块： action button 模块，它可以让您在浏览器中添加按钮，以及 tabs 模块，它可以让您执行一些简单的标签操作。在这个实例中，我们创建了一个带有 Firefox 图标的按钮，并且添加了一个点击事件处理使得在新标签中加载 Mozilla 主页。

尝试编辑 "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("https://developer.mozilla.org/");
}

var widgets = require("sdk/widget");
var tabs = require("sdk/tabs");
var widget = widgets.Widget({
  id: "mozilla-link",
  label: "Mozilla website",
  contentURL: require("sdk/self").data.url("icon-16.png"),
  onClick: function() {
    tabs.open("http://developer.mozilla.org/");
  }
});

在命令行窗口中，再次执行 cfx run 。这一次点击 Firefox 图标的按钮将带您到 https://developer.mozilla.org/。

打包扩展

在您结束开发扩展并且准备分发它的时候，您将需要打包它为 XPI 文件。XPI 文件是 Firefox 扩展的安装文件格式。您可以自行分发 XPI 文件或者把它发布到 https://addons.mozilla.org 以便其他用户可以下载并且安装。

您可以在扩展所在的文件夹中执行 cfx xpi 以创建一个 XPI：

cfx xpi

您应该看到类似以下的消息：

Exporting extension to my-addon.xpi.

为了测试生成的 XPI 是否正常工作，您可以尝试在您的 Firefox 中安装此 XPI 文件。您可以在 Firefox 中使用快捷键 Ctrl+O (Mac上 Cmd+O )， 或者在 Firefox 的 "文件" 菜单中选择 "打开"菜单项。这将出现一个文件选择对话框：找到  "my-addon.xpi" 文件，打开它并且遵循出现的提示以便安装它。

摘要

在此教程中，我们使用了三个命令，创建并且打包了一个扩展：

• cfx init 初始化一个空的扩展模板
• cfx run 运行一个安装好扩展的新的 Firefox 实例，以便我们可以在其中尝试扩展
• cfx xpi 打包扩展为一个 XPI 文件以便发布

这就是您在开发 SDK 扩展时将会使用的三个主要的命令。您可以查看 参考文档 ，以了解更多关于所有可用命令的详细内容。

这个扩展使用了两个 SDK 模块， action button 以及 tabs。SDK 中的 高阶 以及 低阶 API 都有参考文档。

====================示例======================

1 Win+R输入cmd切换到命令行，切换到add on sdk目录下面，然后再切换出来

2 新建一个目录用来放置我们新的扩展程序，记住任何时候目录都不要有特殊符号包括空格横线和下划线，并cfx init cfx xpi cfx run

3 按照上面的说明，可以修改下代码，最后打包下cfx xpi

4 火狐按Ctrl+O，打开就可以安装生成的XPI文件了，有必要时使用cfx run调试安装

======================================================

下一步?

您可以尝试阅读一些 教程 以感受和了解 SDK API 可以做的事情。

高级技巧

覆盖内置模块

您用来开发扩展的 SDK 模块是Firefox 内置的。当您使用 cfx run 或 cfx xpi 来运行或者打包扩展的时候，扩展将使用宿主 Firefox 版本的模块。

作为一个扩展开发者来说，这往往就是您想要的。但是如果您想要自己开发 SDK 模块的话，那么，假定您已经从 GitHub repo 中签出了 SDK 代码，并且在您签出的代码的根目录执行了 bin/activate 。

在您执行 cfx run 或 cfx xpi 的时候，您需要额外的选项 "-o" ：

cfx run -o

这将使得 cfx 使用您签出的 SDK 而不是宿主 Firefox 的 SDK。

开发中不使用 cfx run

因为每次执行 cfx run 会重启浏览器，如果您频繁更改扩展代码的话，这可能会很麻烦。另外一个开发模型是使用 自动安装扩展 ：它会在一个指定的端口监听新的 XPI 文件并且自动安装它。这样的话，您可以无需重启浏览器来测试新的扩展代码：

• 更改扩展代码
• 执行 cfx xpi
• 分发扩展到指定的端口

您甚至可以使用一个简单的脚本来自动化该工作流：

while true ; do cfx xpi ; wget --post-file=codesy.xpi http://localhost:8888/ ; sleep 5 ; done

注意：当您使用该方法时，在命令行指定的日志级别将会和使用 cfx run 的日志级别不同。这意味着，如果您想要从 console.log() 中查看输出的时候，您必须调整设置。请查看 日志级别 以了解更多。

火狐开发----从头用到尾的cfx,布布扣,bubuko.com

火狐开发----从头用到尾的cfx

标签：des   cWeb   style   blog   http   color   使用   os   

原文地址：http://www.cnblogs.com/add-on-sdk/p/3917058.html