扬帆,起航!JPM!

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

该挂件SDK包含了一个可用于初始化、运行、测试、打包挂件的命令行工具——基于伟大的 Node.js 的小鲜肉JPM,前浪君cfx已死在沙滩上。

然而只有 Firefox 38 以上的版本才可以使用该工具。

朕今在此将使用 JPM 进行开发的特别技巧公告天下。

面对疾风吧!

朕将屈尊手把手教你如何使用该SDK创建一个简单的挂件。

愉快玩耍的前提

朕令:

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

初始化一个空灵挂件

在命令行下创建一个新文件夹并切入其中,戳 jpm init 并回车:

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.

Implementing the add-on

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.

<embed width="0" type="application/thunder_download_plugin" id="xunlei_com_thunder_helper_plugin_d462f475-c18e-46be-bd10-327458d045bd" height="0">

文档标签和贡献者

 此页面的贡献者: ziyunfei, NonII
 最后编辑者: NonII,