入門

SDK を使用してシンプルなアドオンの作成を始めるための手順の概略です。

必要条件

SDK を使用してアドオンを作成するには、まず最初に SDKをインストールして起動するための手順に従ってください。インストールは一度だけ行えばよく、SDK の起動はコマンドプロンプトごとに行う必要があります。準備が整ったら、コマンドプロンプトを見てください。

Linux または Mac OS X の場合、コマンドプロンプトの先頭は SDK のルートディレクトリ名となります。

(addon-sdk)~/mozilla/addon-sdk >

Windows の場合、コマンドプロンプトの先頭は SDK がインストールされたディレクトリの絶対パスとなります。

(C:\Users\mozilla\sdk\addon-sdk) C:\Users\Work\sdk\addon-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 ファイルに、アドオンのコードを書くことができます。これは前のステップで作成されたものです。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://www.mozilla.org/");
}

コードを追加したら、ファイルを保存してください。

次に、以下の3つのアイコンファイルを 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("https://www.mozilla.org/");
  }
});

コマンドプロンプトに戻り、以下のコマンドを実行します。

cfx run

これは、開発中のアドオンがインストールされた状態でFirefoxの新規インスタンスを実行する、 SDK のコマンドです。Firefox が起動されると、ブラウザの右上にFirefox ロゴのアイコンが表示されます。そのアイコンをクリックすると、https://www.mozilla.org/ が読み込まれた新しいタブが開きます。

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

touch icon-16.png

このアドオンが行うことは、これで全部です。このアドオンは2つの 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/");
}

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

コマンドプロンプトで、再び cfx run を実行してください。今度は https://developer.mozilla.org/ が表示されます。

アドオンをパッケージ化する

アドオンが完成して配布する準備ができたとき、XPI ファイルとしてパッケージ化する必要があります。これは Firfox アドオンとしてインストール可能なファイル形式です。XPI ファイルを独自の手段で配布するか、https://addons.mozilla.org で公開しましょう。そうすれば、ほかのユーザーがそのアドオンをダウンロードし、インストールすることできます。

アドオンのディレクトリで cfx xpi コマンドを実行するだけで、XPI をビルドすることができます。

cfx xpi

そうした場合、以下のようなメッセージが表示されるでしょう。

Exporting extension to my-addon.xpi.

アドオンが動くかどうかテストするために、あなたがインストールした Firefox に XPI ファイルをインストールしてみましょう。Firefox で Ctrl+O の組み合わせ（Mac であれば Cmd+O）でキーを入力するか、Firefox の「ファイル」メニューから「ファイルを開く」を選択します。すると、ファイル選択ダイアログが表示されます。アドオンの XPI ファイルがある場所まで移動してファイルを開き、アドオンをインストールするためのプロンプトに従ってください。

要約

このチュートリアルでは、3つのコマンドを使ってアドオンの構築およびパッケージ化を行いました。

• cfx init による空のアドオンのテンプレートの初期化。
• cfx run  による、アドオンがインストールされた状態での Firefox の新規インスタンスの実行。アドオンの動作確認を可能にします。
• cfx xpi による、配布可能な XPI ファイルとしてのアドオンのパッケージ化。

これら3つのコマンドは、SDK を用いてアドオンを開発するときに使用する主要なコマンドです。利用可能な全てのコマンドとオプションを網羅したリファレンスも用意してます。

アドオン自体のコードは、action button と tabs の2つのモジュールを使用しています。SDKの高レベルなAPI および 低レベルなAPI のリファレンスも用意しています。

次のステップ

SDKのAPIを使ってできることに慣れるためには、いくつかのチュートリアルを進めてみてください。 

上級テクニック

組み込みのモジュールの上書き

アドオンを実装するために使用する SDK モジュールは、Firefox に組み込まれているものです。アドオンを cfx run コマンドで実行したり、cfx xpi コマンドでパッケージ化したりする場合は、アドオンは Firefox が提供するバージョンのモジュールを使用します。

アドオン開発者としては、通常これは望ましい挙動です。しかし、SDK のモジュール自体を開発する場合には、当然それは望ましくない挙動でしょう。この場合、仮にSDKを GitHub リポジトリからチェックアウトし、そのルートディレクトリで bin/activate スクリプトを実行するものとします。

そのときは、"-o" オプションを渡して cfx run または cfx xpi コマンドを実行します。

cfx run -o

これにより、cfx は Firefox 組み込みのモジュールではなく、SDK モジュールのローカルコピーを使用するようになります。

cfx を実行せずに開発する

cfx run を呼び出すたびにブラウザが再起動されるため、アドオンを頻繁に変更する場合、開発効率をいくらか損なうことになるでしょう。それに代わるものとして、特定のポートの新しい XPI ファイルを自動的にインストールする Extension Auto-Installer アドオンを利用した開発があります。これにより、ブラウザを再起動する必要なく新しい変更点をテストすることができます。

• アドオンに変更を加えます
• cfx xpi コマンドを実行します
• 特定のポートにアドオンをポストします

さらに、このワークフローを簡単なスクリプトで自動化できます。例えば、以下のようなスクリプトです。

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

この方法を使った場合、アドオンを cfx run コマンドにより実行した場合と比べて、コンソールへのログ出力のレベルが異なることに注意してください。つまり、 console.log() が出力するメッセージを見たい場合、設定を微調整する必要があります。詳細については、ログ出力のレベルに関するドキュメントを参照してください。