这篇翻译不完整。请帮忙从英语翻译这篇文章

该附加SDK包含一个用于初始化,运行,测试和打包加载项的命令行工具。当前工具称为jpm,并且基于  Node.js .它替代了旧的cfx工具。

Firefox 38 以上的版本才可以使用jpm。

本文介绍如何使用jpm开发。

本教程将介绍使用SDK创建一个简单的附加组件。

先决条件

要使用SDK为Firefox创建附加组件,您需要:

  • 备好 Firefox 38 或更高版本浏览器,否则抱着你亲爱的cfx古董去死吧,出门左转 getting started with cfx 不谢。
  • 命令行 JPM 工具,至 installing jpm 此处领取。// 后面这句是废话不翻译

初始化一个空的附加组件

在命令提示符下,创建一个新目录。导航到它,键入 jpm init, 然后按Enter键

mkdir my-addon
cd my-addon
jpm init

You'll then be asked to supply some information about your add-on: this will be used to create your add-on's package.json file. For now, just press Enter to accept the default for each property. For more information on jpm init, see the jpm command reference.

Once you've supplied a value or accepted the default for these properties, you'll be shown the complete contents of "package.json" and asked to accept it.

实现附加组件

Now you can write the add-on's code. Unless you've changed the value of "entry point" ("main" in package.json), this goes in "index.js" file in the root of your add-on. This file was created for you in the previous step. Open it and add the following code:

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

Note that "entry point" defaults to "index.js" in jpm, meaning that your main file is "index.js", and it is found directly in your add-on's root.

In cfx, the entry point defaults to "main.js", and is located in the "lib" directory under the add-on's root.

Save the file.

Next, create a directory called "data" in your add-on's root, and save these three icon files to the "data" directory:

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

Back at the command prompt, type:

jpm run

This is the jpm command to run a new instance of Firefox with your add-on installed.

If Firefox can not be located, you may need to provide the path to it (example in Ubuntu):

jpm run -b /usr/bin/firefox

When Firefox launches, in the top-right corner of the browser you'll see an icon with the Firefox logo. Click the icon, and a new tab will open with http://www.mozilla.org/ loaded into it.

That's all this add-on does. It uses two SDK modules: the action button module, which enables you to add buttons to the browser, and the tabs module, which enables you to perform basic operations with tabs. In this case, we've created a button whose icon is the Firefox icon, and added a click handler that loads the Mozilla home page in a new tab.

Try editing this file. For example, we could change the page that gets loaded:

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

At the command prompt, execute jpm run again. This time clicking it takes you to https://developer.mozilla.org/.

Packaging the add-on

When you've finished the add-on and are ready to distribute it, you'll need to package it as an XPI file. This is the installable file format for Firefox add-ons. You can distribute XPI files yourself or publish them to https://addons.mozilla.org so other users can download and install them.

To build an XPI, just execute the command jpm xpi from the add-on's directory:

jpm xpi

You should see a message like:

JPM info Successfully created xpi at /path/to/getting-started/@getting-started.xpi

To test that this worked, try installing the XPI file in your own Firefox installation. You can do this by pressing the Ctrl+O key combination (Cmd+O on Mac) from within Firefox, or selecting the "Open" item from Firefox's "File" menu. This will bring up a file selection dialog: navigate to the "@getting-started.xpi" file, open it and follow the prompts to install the add-on.

Summary

In this tutorial we've built and packaged an add-on using three commands:

  • jpm init to initialize an empty add-on template
  • jpm run to run a new instance of Firefox with the add-on installed, so we can try it out
  • jpm xpi to package the add-on into an XPI file for distribution

These are the three main commands you'll use when developing SDK add-ons. There's comprehensive reference documentation covering all the commands you can use and all the options they take.

The add-on code itself uses two SDK modules, action button and tabs. There's reference documentation for all the high-level and low-level APIs in the SDK.

What's next?

To get a feel for some of the things you can do with the SDK APIs, try working through some of the tutorials.

 

文档标签和贡献者

标签: 
 此页面的贡献者: xgqfrms-GitHub, ziyunfei, NonII
 最后编辑者: xgqfrms-GitHub,