このチュートリアルでは、インストールガイドの説明を読み、それに従って SDK をインストールし、起動していると想定しています。

cfx 入門

SDK を使用してアドオンを作成するには、cfx コマンドライン ツールを使いこなす必要があります。cfx は、アドオンのテストとパッケージングに使用します。

cfx の機能については、reference documentation（リファレンスガイド） に詳細な説明がありますが、このチュートリアルでは、最低限必要な次の 3 つのコマンドについて説明します。

• cfx init：アドオンのスケルトン構造を作成します。
• 注釈の保存：作成したアドオンをインストールした状態で、Firefox の新しいインスタンスを起動します。
• 注釈の保存：作成したアドオンを配布するための、インストール可能なXPI ファイルを作成します。

cfx init

cfx init を使用すると、アドオンの基本的なスケルトンが作成されます。

新しいディレクトリを作成し、コマンドシェルでそのディレクトリに移動してcfx init を実行します。

mkdir my-addoncd my-addoncfx init

このディレクトリは必ずしも SDK ルートの下に作成する必要はありません。cfx はいったん SDK ルートから起動されれば、その後 SDK の場所を記憶し続けるので、どのディレクトリからでも使用できます。

以下に、出力例を示します。

* 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!"

cfx run

cfx run を使用すると、作成したアドオンをインストールした状態で、Firefox の新しいインスタンスが起動されます。これは、開発中のアドオンをテストするためのコマンドです。

先ほどcfx init の実行によって非常に基本的なアドオンがすでに作成されているので、コードを新たに作成しなくても、次のように入力するだけでcfx run の動作を試すことができます。

cfx run

このコマンドを初めて実行すると、以下のようなメッセージが表示されます。

No 'id' in package.json: creating a new ID for you.package.json modified: please re-run 'cfx run'

cfx run をもう一度実行すると、Firefox のインスタンスが起動され、ブラウザの右下隅に、Firefox ロゴのアイコンが表示されます。アイコンをクリックすると、新しいタブが開き、http://www.mozilla.org/ が読み込まれます。

アドオンのメインコードは、常にアドオンのlib ディレクトリのmain.js ファイルに保存されます。このアドオンのmain.js を開いてみましょう。

const widgets = require("widget");const tabs = require("tabs");var widget = widgets.Widget({  id: "mozilla-link",  label: "Mozilla website",  contentURL: "http://www.mozilla.org/favicon.ico",  onClick: function() {    tabs.open("http://www.mozilla.org/");  }});

このアドオンでは、widget とtabs の 2 つの SDK モジュールが使用されています。widget モジュールによってブラウザにボタンが追加され、tabs モジュールによってタブの基本的な操作が実行されます。上のアドオンでは、Mozilla ファビコン（お気に入りアイコン）をアイコンに持つウィジェットが作成された後、Mozilla のホームページを新しいタブに読み込むクリックハンドラが追加されます。

それでは、このファイルを編集してみましょう。例えば以下のように、表示するアイコンや読み込む URL を変更することができます。

const widgets = require("widget");const tabs = require("tabs");var widget = widgets.Widget({  id: "jquery-link",  label: "jQuery website",  contentURL: "http://www.jquery.com/favicon.ico",  onClick: function() {    tabs.open("http://www.jquery.com/");  }});

コマンドプロンプトでcfx run をもう一度実行すると、今度はアイコンとして jQuery ファビコンが表示され、それをクリックするとhttp://www.jquery.com が表示されます。

cfx xpi

cfx run がアドオンの開発中に使用するコマンドであるのに対し、cfx xpi は開発完了後にXPI ファイルをビルドするために使用します。XPI は、Firefox アドオンのインストール可能ファイル形式です。作成したファイルは、自分で配布することも、他のユーザーがダウンロードできるようにhttp://addons.mozilla.org に公開することもできます。

XPI のビルドは、以下のようにアドオンのディレクトリからcfx xpi コマンドを実行するだけで完了します。

cfx xpi

以下のようなメッセージが表示されます。

Exporting extension to my-addon.xpi.

my-addon.xpi ファイルは、cfx xpi コマンドを実行したディレクトリに作成されます。

作成したファイルをテストするには、自分の Firefox にアドオンをインストールします。

これには、Firefox で Ctrl キー（Mac の場合は Cmd キー）を押しながら O キーを押すか、「ファイル」メニューの「ファイルを開く」を選択します。

ファイルを選択するダイアログが表示されます。my-addon.xpi ファイルに移動してファイルを開き、プロンプトに従ってアドオンをインストールします。

これで基本的なcfx コマンドを習得できました。ここからは、SDK の各機能 を実際に使用してみましょう。

• インストール

• チュートリアル

• Guides

• Third-Party APIs

• High-Level APIs

  • addon-kit

    addon-pageclipboardcontext-menuhotkeysl10nnotificationspage-modpage-workerpanelpasswordsprivate-browsingrequestselectionselfsimple-prefssimple-storagetabstimerswidgetwindows

• Low-Level APIs

  • api-utils

    api-utilsapp-stringsbase64byte-streamscollectioncontentcontent/loadercontent/proxycontent/symbiontcontent/workercortexcuddlefishenvironmenterrorsevent/coreevent/targeteventsfileframe/utilsglobalsheritagehidden-framehttpdlight-traitslistloadermatch-patternmemorymessage-managernamespaceobserver-serviceplain-text-consolepreferences-servicepromisequerystringruntimesandboxtab-browsertext-streamstracebacktraitsunit-testunloadurluuidwindow/utilswindow-utilsxhrxpcomxul-app

  • test-harness

    harnessrun-tests

• Tools Reference

  consolecfxpackage.json