チュートリアル

はじめに

ここでは、コマンドラインで初めての Jetpack を開発する手順を説明する。 あらかじめ Jetpack SDK をインストール しておくこと。 Web ブラウザ上での開発については Add-ons Builder を参照。 OS は Windows 前提。

拡張の作成

まず、拡張を開発するディレクトリを決め、作成するアドオンと同じ名前のディレクトリを作成する。 これは Add-on SDK のディレクトリ内に配置する必要はない。 bin\activate を実行していれば、任意のディレクトリから Add-on SDK のライブラリを参照できる。 Add-on SDK とは他のディレクトリで開発する方が、Add-on SDK を簡単にバージョンアップできるため好ましい。

次に、作成したフォルダ内で「cfx init」を実行する。このコマンドで、アドオンの雛形が生成される。

(D:\addon-sdk) D:\myaddons>mkdir myfirstaddon

(D:\addon-sdk) D:\myaddons>cd myfirstaddon

(D:\addon-sdk) D:\myaddons\myfirstaddon>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.
Do "cfx test" to test it and "cfx run" to try it.  Have fun!

(D:\addon-sdk) D:\myaddons\myfirstaddon>

cfx init では、次の 4 つのディレクトリが生成される。

また、cfx init は、package.json という設定ファイルも生成する。 これは次のような内容となっている。

{
  "name": "myfirstaddon",
  "fullName": "myfirstaddon",
  "description": "a basic add-on",
  "author": "",
  "license": "MPL 2.0",
  "version": "0.1"
}

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

console.log("The add-on is running.");

このスクリプトを実行するとアドオンバーに Mozilla のアイコンが表示され、 クリック時に http://www.mozilla.org/ が開かれる。

デバッグ実行

拡張をテスト実行するために、「cfx run」を実行する。 この時、初めての実行であれば自動的に ID が生成され、package.json が更新される。

(D:\addon-sdk) D:\myaddons\myfirstaddon>cfx run
No 'id' in package.json: creating a new ID for you.
package.json modified: please re-run 'cfx run'

(D:\addon-sdk) D:\myaddons\myfirstaddon>

もう一度「cfx run」を実行すると、Firefox が起動し、作成した拡張が動作する。 特に指定しなければ一時的なプロファイルが作成され、 すでに Firefox が起動中であっても別の Firefox ウィンドウが起動される。

(D:\addon-sdk) D:\myaddons\myfirstaddon>cfx run
Using binary at 'C:\Program Files\Mozilla Firefox\firefox.exe'.
Using profile at 'c:\docume~1\asukaze\locals~1\temp\tmpdclusm.mozrunner'.
info: The add-on is running.
OK
Total time: 11.172000 seconds
Program terminated successfully.

(D:\addon-sdk) D:\myaddons\myfirstaddon>

XPI ファイルの作成

「cfx xpi」を実行すると、XPI ファイルが生成される。 生成された XPI ファイルを Firefox にドラッグ＆ドロップすれば拡張をインストールできる。

(D:\addon-sdk) D:\myaddons\myfirstaddon>cfx xpi
Exporting extension to myfirstaddon.xpi.

(D:\addon-sdk) D:\myaddons\myfirstaddon>

次のステップ

• Jetpack SDK の API を活用して拡張を開発する。
  • API 一覧は「cfx docs」を実行すると表示される。同じものが Web 上にも公開されている。
  • 参照：API 一覧
• 拡張の情報を提供する。
  • Firefox のアドオン管理画面に表示される情報を JSON 形式で package.json に記述する。
  • 参照： Package Specification
• モジュールを開発する。
  • 再利用可能な処理をモジュールとして独立させることができる。 Jetpack のモジュールは CommonJS という規格で定められた形式となっている。 「モジュール名.js」というファイルの中で「exports.関数名 = ...」として定義した関数は、 別のモジュールから「requre(モジュール名).関数名」として呼び出せる。
  • 参照： Creating Reusable Modules、 CommonJS Specification
• テストを作成する。
  • モジュールのテストを記述する。
  • 参照： Unit Testing、 unit-test モジュール
• ドキュメントを作成する。
  • 作成したモジュールに関して、cfx docs で表示されるドキュメントを記述する。
  • 参照： Package Specification Markdown: Syntax

関連リンク

• Getting Started With cfx - Add-on SDK Documentation
• Add-on SDK Documentation

更新履歴

• 2012/05/20: リンク先を修正。
• 2011/06/22: SDK 1.0 のリリースにあわせて修正。
• 2010/11/17: 「他から参照されないものは任意の場所に置いて問題ない」という但し書きを追記。
• 2010/10/29: SDK 0.10 以降ではアクティベートは不要となる見込み。
• 2010/10/28: SDK 0.10 以降では、「cfx init」コマンドでパッケージの雛形が自動生成される。
• 2010/10/26: 初版作成。