首页 > 代码库 > 火狐开发----从头用到尾的cfx

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

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

准备

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

初始化一个空的扩展

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

mkdir my-addoncd my-addoncfx 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 writtenYour 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

请注意:该示例使用了 action button 模块,此模块只在 Firefox 29 及以上的版本可用。如果您还在使用更早以前版本的 Firefox(此代码未来将废弃,请谨慎使用),请使用以下的代码,但是图标将会出现在浏览器窗口的右下方:

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/ 。

在您键入 cfx run后,或许会看到类似于下面的错误消息:

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

如果是这样的话,您遇到了 bug 1005412,意味着您下载的图标文件被赋予了一个1970年的时间戳。在这个错误被修正前,您可以使用 touch 命令来更新时间戳以便暂时解决这个问题:

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/");}

 

 

请注意:该示例使用了 action button 模块,此模块只在 Firefox 29 及以上的版本可用。如果您还在使用更早以前版本的 Firefox,请使用以下的代码,但是图标将会出现在浏览器窗口的右下方,不推荐使用旧的模块继续开发

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 runcfx 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() 中查看输出的时候,您必须调整设置。请查看 日志级别 以了解更多。