MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Getting Started (jpm)

この翻訳は不完全です。英語から この記事を翻訳 してください。

Add-ons using the techniques described in this document are considered a legacy technology in Firefox. Don't use these techniques to develop new add-ons. Use WebExtensions instead. If you maintain an add-on which uses the techniques described here, consider migrating it to use WebExtensions.

From Firefox 53 onwards, no new legacy add-ons will be accepted on addons.mozilla.org (AMO).

From Firefox 57 onwards, WebExtensions will be the only supported extension type, and Firefox will not load other types.

Even before Firefox 57, changes coming up in the Firefox platform will break many legacy extensions. These changes include multiprocess Firefox (e10s), sandboxing, and multiple content processes. Legacy extensions that are affected by these changes should migrate to WebExtensions if they can. See the "Compatibility Milestones" document for more.

A wiki page containing resources, migration paths, office hours, and more, is available to help developers transition to the new technologies.

Add-on SDK は開発環境の作成, 実行, テスト, アドオンのパッケージング等を行うことができるコマンドラインツールを含みます. Node.js  を元に作成された jpm と呼ばれるクライアントツールは古い cfx tool を置き換えるものです.

jpm は Firefox 38 以上で使用可能です.

この記事では jpm を使ってどのように開発を行うのかを説明します.

このチュートリアルでは SDK を使ってシンプルなアドオンを作成していきます.

前提条件

SDK を使って Firefox のアドオンを作成するには, 以下の環境が必要です:

  • Firefox version 38 以上. それ以前の Firefox を使用する場合, 従来の cfx tool が必要です. getting started with cfx のインストラクションを参照してください.
  • コマンドラインツール jpm. installing jpm のインストラクションを参照してください. 導入が終了したらコマンドプロンプトを開いてください.
  • 作成したアドオンのテストのために Firefox Developer Version をインストールしてください.

最初のアドオンの初期化

コマンドプロンプト上で, 新規ディレクトリを作成します. そのディレクトリに移動し jpm init , と入力し, エンターを押します:

mkdir my-addon
cd my-addon
jpm init

作成するアドオンに関する情報を入力するように求められます: この情報はこれから作成するアドオンの package.json ファイルを 生成するために使用されます. 今回は, それぞれのプロパティをデフォルトにするため, ただ Enter を押していきます. jpm init に関する詳細な情報は, jpm command reference を参照してください.

これらのプロパティの,値を入力, または デフォルト値に設定した後に "package.json" の完全な内容が表示され、それを受け入れるように求められます.

アドオンの実装

それでは, アドオンのコードを書いて行きましょう. "entry point" の値 (これは package.json の "main" にあります) を変更していない限り, アドオンの root 直下の "index.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/");
}

jpm では "entry point" のデフォルト値は "index.js" であることに注意してください. これは, アドオンの主要なファイルが "index.js" であることを意味しています. また, これはアドオンの root ディレクトリを検索します. and it is found directly in your add-on's root.

cfx では, entry point はデフォルトに "main.js" になります. これは, アドオンの root 直下の "lib" ディレクトリに置かれています.

ファイルをセーブします.

続いて, "data" という名前のディレクトリをアドオンの root 直下に作成し,

mkdir data

そして以下の 3 つのアイコンファイルを "data" ディレクトリに保存します:

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

コマンドプロンプトに戻り, 以下のコマンドを入力します:

jpm run

この jpm コマンドは作成したアドオンをインストールした状態の新規 Firefox インスタンスを実行します.

Firefox は見つからない場合や, Firefox Developer を代理のブラウザとしてインストールしている場合には, そこまでの path を渡す必要があるかもしれません. 例えば Ubuntu の場合:

jpm run -b /usr/bin/firefox

Firefox が起動すると, ブラウザの右上端に Firefox のロゴにアイコンが見えるはずです. このアイコンをクリックすると, 新しいタブが開き, http://www.mozilla.org/ が読み込まれます.

これでこのアドオンでやることは終了です. ここでは, 二つの SDK モジュール を使っています: action button モジュール, これはブラウザにボタンを追加することができるモジュールです, tabs モジュール, これはタブの基本的な操作を行うことができるモジュールです. 今回のケースでは, 我々は Firefox アイコンのボタンを作成しました. また, 新規タブに Mozilla のホームページを読み込むクリックハンドラを追加しました.

このファイルを編集してみましょう. 例えば, 読み込むページを変更することができます.

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

コマンドプロンプトで, jpm run を再度実行します. この時に, ボタンをクリックすると https://developer.mozilla.org/ に移動します.

アドオンのパッケージング

アドオンを作成し終え, 配布準備をする際には, アドオンを XPI にパッケージングする必要があります. これは Firefox アドオンをインストールするためのファイルフォーマットです. XPI を自分で配布したり, 他のユーザーがアドオンをダウンロードまたは, インストールできるようにするために, https://addons.mozilla.org に 公開することが可能です.

XPIをビルドするためには, jpm xpi コマンドをアドオンのディレクトリで実行するだけです:

jpm xpi

次のようなメッセージを見ることができます:

JPM info Successfully created xpi at /path/to/my-addon/@my-addon-0.0.1.xpi

これが機能することをテストするために, XPI ファイルを自身がインストールしている Firefox にインストールしてみましょう. これは Firefox から Ctrl+O (Mac では Cmd+O)キーで行うことができます. もしくは, Firefox の "File" メニューから, "Open" を選択してもよいです. するとファイル選択ダイアログが開きます: "@my-addon.xpi" ファイルを選択すると アドオンインストールプロンプトが開きます.

Firefoxでは, 基本的にローカルで開発されたアドオンでも署名が必要であることに注意してください. インストールが終了した後で, インストールされたアドオンのリストで disabled が示されている場合, 署名の不足を確認してください.注意してください。 開発中や, 公開する予定がない場合, 署名の無いアドオンを実行できるように about:config を開き, xpinstall.signatures.requiredfalse に設定してください. この設定を全てのアドオンに適応されてしまうため, 他の場所から悪意のあるものを誤ってインストールしないように特別な注意を払ってください.

アドオンを配布するために, XPI を addons.mozilla.org に提出 します. また自身のサーバーにアドオンを配布したい場合, jpm sign を 実行します.

結論

このチュートリアルでは, 3 つのコマンドを使いアドオンのビルドやパッケージングを行いました:

  • jpm init 空のアドオンテンプレートを初期化する
  • jpm run アドオンがインストールされた Firefox インスタンスを実行する. 作成したアドオンを試すことができる
  • jpm xpi 配布用にアドオンをXPIファイルにパッケージングする

これらは, SDK アドオン開発している時に使用する 3 つの主要なコマンドです. これらがとれるオプションや利用できるすべてのコマンドをカバーした包括的な リファレンス があります.

アドオンコードでは 二つの SDK モジュール, action buttontabs を使用しました. SDK における 全てのAPIs, high-levellow-level に関するレファレンスは存在します.

What's next?

SDK APIs を使ってできるいくつかのことを把握するために, tutorials に挑戦してみてください.

ドキュメントのタグと貢献者

 このページの貢献者: qh73xe
 最終更新者: qh73xe,