この記事では、 Jetpack 0.4 で新たに追加された4つの標準APIのうち、 Widget と Private Browsing を使用して実際に機能を開発する手順を解説します。なお、解説はメインプログラムの作成手順以降となります。 Jetpack SDK 自体の基本的な使い方については、 はじめての Jetpack SDK 0.2 を参照してください。

完成イメージ

プライベートブラウジングを開始／停止するためのボタンを有する Jetpack 拡張機能を、以下のように3段階に分けて実装します。

• フェーズ1: Widget API を使ってUIを追加する
• フェーズ2: Private Browsing API を使ってボタン押下時にプライベートブラウジングを開始／停止する
• フェーズ3: Simple Dialog API （自作ライブラリ）を使ってプライベートブラウジング停止確認ダイアログを表示する

フェーズ1: Widget API を使ってUIを追加する

一般的な拡張機能では Firefox のメニューバー、ツールバー、ステータスバーなど様々な箇所にUIを追加することが可能で、それゆえUIの一貫性が保たれなくなる問題があります。 Jetpack では Widget API を使ってUIを追加することで、すべての拡張機能のUIの一貫性が保たれるようになります。現在のところ、 Widget API ではステータスバー上部に現れる拡張機能専用のぶっといバーにボタン型UIが追加可能ですが、このUI仕様は今後変更される予定です（参考）。

フェーズ1では、 Widget API を使って非常に単純なボタン型UIを追加します。まず、 main.js 内に以下のように記述して Widget API のモジュールを読み込みます。

const widgets = require("widget");

引き続き main.js へ以下のような main 関数を記述します。

exports.main = function(options, callbacks) {
    var button = widgets.Widget({
        label: "Start/Stop Private Browsing",
        image: "chrome://browser/skin/Privacy-48.png",
        onClick: function(event) {
            // ToDo
        }
    });
    widgets.add(button);
};

はじめに Widget API の Widget(options) コンストラクタを用いてボタンのインスタンスを生成します。コンストラクタの引数 options には下記の3つのプロパティを指定します。

なお、 content プロパティに HTML をセットすることで、単純なボタンではなく凝ったUIを作ることも可能です（参考）。

生成したボタンのインスタンスは、 Widget API の add メソッドを用いて実際に追加します。ここまでで、ひとまず「cfx run -a firefox」コマンドで動作確認し、ボタンが表示されることを確認してください。なお、ボタンが配置されるバーは Ctrl+Shift+U で表示／非表示可能です。

フェーズ2: Private Browsing API を使ってボタン押下時にプライベートブラウジングを開始／停止する

フェーズ2では、 Private Browsing API を使ってボタン押下時にプライベートブラウジングを開始／停止できるようにします。はじめに main.js の冒頭部分に以下の内容を追加し、 Private Browsing API モジュールを読み込みます。

const privateBrowsing = require("private-browsing");

さらに、 Widget(options) コンストラクタの onClick オプションを以下のように修正します。

        onClick: function(event) {
            privateBrowsing.active = !privateBrowsing.active;
        }

Private Browsing API の active プロパティは真偽値で、現在プライベートブラウジング中かどうかを調べたり、値を変更することでプライベートブラウジングを開始／停止することができます。

フェーズ3: Simple Dialog API を使ってプライベートブラウジング停止確認ダイアログを表示する

Private Browsing API にはプライベートブラウジング開始／停止の直前／直後に呼び出すコールバック関数を追加／削除するためのメソッドが用意されています。フェーズ3では、プライベートブラウジング停止直前に確認ダイアログを表示する機能を実装します。

まず、 main.js の冒頭部分に以下の内容を追加し、自作ライブラリである Simple Dialog API モジュールを読み込みます。

const simpleDialog = require("simple-dialog");

Simple Dialog API の詳細は はじめての Jetpack SDK 0.2 の「自作ライブラリの作成」の項を参照してください。記載されているソースコードをコピペして main.js と同一フォルダ内に「simple-dialog.js」として格納してください。

次に、 main 関数内の最後に以下の内容を追加します。

    privateBrowsing.onBeforeStop = function(cancel) {
        var yes = simpleDialog.confirmYesNo("Do you want to stop private browsing?");
        if (!yes)
            cancel();
    };

Private Browsing API の onBeforeStop プロパティへ、プライベートブラウジング停止直前に呼び出されるコールバック関数をセットします。コールバック関数内では Simple Dialog API の confirmYesNo メソッドを使って確認メッセージを表示し、ユーザが「いいえ」ボタンを押したらコールバック関数の引数 cancel を実行し、停止処理をキャンセルします。

なお、 onBeforeStop.add(callback) メソッドを使ってコールバック関数 callback を追加したり、 onBeforeStop.add([callback1, callback2, ...]) のようにして複数のコールバック関数を一括して追加することも可能です。

動作確認

ボタンを押下することで、プライベートブラウジングが開始／停止されることを確認してください。また、停止直前に停止確認ダイアログが表示され、「いいえ」ボタンを押下するとプライベートブラウジングが停止されないことを確認してください。

Jetpack SDK 0.4 ではパッケージマニフェスト（package.json）の id プロパティに関する仕様変更があり、自分で決めたIDを明示的に記述することができなくなり、代わりにSDKによって自動生成されるようになりました。

SDK 0.3 以前の仕様

SDK 0.3 以前のバージョンでは、 id プロパティの取り扱いについて以下2通りの方式がありました。

方式1: 明示的に記述する

hello-world@xuldev.org のようにメールアドレス形式のIDを自分で決めて、パッケージマニフェスト中に id プロパティとして明示的に記述する方式です。「cfx xpi」コマンドによってXPIインストーラを生成すると、この id プロパティが拡張機能のインストールマニフェストの <em:id> タグの値になります。今まで一般的な拡張機能を開発したことがある方であればこちらの方式のほうが馴染み易いと思います。

方式2: SDKで自動生成する

パッケージマニフェストには id プロパティを記述せず、SDKによってIDを自動生成する方式です。「cfx xpi」コマンドでXPIインストーラを生成すると、SDKによって自動的にIDが生成され、XPIインストーラ中のインストールマニフェストの <em:id> タグの値となります。この方式ですと、XPIインストーラを生成するたびに毎回異なるIDが自動生成されるため、新しいバージョンを作って Firefox へインストールするたびに別物の拡張機能としてインストールされてしまう問題がありました。

SDK 0.4 での仕様

SDK 0.4 以降では、 SDK 0.3 以前での方式1のように自分で決めたIDを明示的に記述することはできなくなり、IDはSDKで自動生成された公開鍵・秘密鍵のペアとして管理されるようになりました。

これまで方式1のようにパッケージマニフェスト中に自分で決めたIDを id プロパティとして記述していた場合、いったん id プロパティを削除してください。 id プロパティが記述されていない状態で、SDKで「cfx run」または「cfx xpi」コマンドを実行すると、以下のようなメッセージとともにIDが自動生成されてパッケージマニフェストに id プロパティの記述が追加されます。

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

また、このとき、「~/.jetpack/keys/」（Windows の場合「%USERPROFILE%.jetpackkeys」）配下に、自動生成されたIDに対応する公開鍵・秘密鍵のペアなどが記述されたファイルが生成されます。

再度「cfx run」または「cfx xpi」を実行すると、今度は普通に起動またはXPIインストーラが生成されます。

複数のPCで開発する場合

SDK 0.4 では、パッケージのソースファイルを丸ごと別のPCへコピーしてから「cfx run」や「cfx xpi」コマンドを実行するとエラーとなります。もしあなたがそのパッケージの正規開発者ならば、前述の公開鍵・秘密鍵のペアなどが記述されたファイルも一緒にコピーして適切なディレクトリへ配置する必要があります。もしあなたがそのパッケージの派生版を開発しようとしているのならば、パッケージマニフェストの id プロパティを削除して再度SDKによって自動生成する必要があります。このような仕組みによって、そのパッケージが正当な開発者によって作られたものであることが Firefox 側で検証可能となります。

Jetpack SDK 0.4 では、 cfx コマンド実行時に頻繁に使うオプションをあらかじめ local.json に記述しておき、 cfx コマンド実行時に簡単に呼び出すことが可能となりました。

cfx run のオプション

Jetpack SDK では、拡張機能を動作確認するときに「cfx run」コマンドを用いますが、このとき、通常のインストール先とは異なる Firefox を起動して実行したい場合に「-b」オプションを付加したり、指定したプロファイルから起動したい場合「-P」オプションを付加します。以下は testuser というプロファイルで Firefox 3.7 上で拡張機能の動作確認をする例です。

cfx run -a firefox -b "%ProgramFiles%Mozilla Firefox 3.7firefox.exe" -P "%appdata%MozillaFirefoxProfiles    estuser"

cfx コマンドのユーザ定義オプション

前述のような長いオプションを毎回入力するのは面倒です。そこで、 Jetpack SDK 0.4 で導入された local.json に頻繁に使用するオプションを記述しておくと、 cfx コマンドから簡単に呼び出し可能となります。まず、 SDK の展開先フォルダ直下に local.json というファイルを作成し、下記のような内容を記述します。

{
  "configs": {
    "ff37": [
      "-a", "firefox",
      "-b", "C:Program FilesMozilla Firefox 3.7firefox.exe",
      "-P", "C:UsersadminAppDataRoamingMozillaFirefoxProfilestestuser"
    ]
  }
}

すると、 cfx コマンドの --use-config オプションにより local.json に記載した ff37 という名前のユーザ定義オプションが有効になります。 --use-config=ff37 の代わりに -g ff37 としても構いません。

cfx run --use-config==ff37

もちろん cfx run だけでなく cfx xpi などでも同様の方式で local.json に定義したオプションを呼び出し可能です。なお、 local.json 内ではバックスラッシュを「」とエスケープすること、また Windows の環境変数は使用できないことにご注意ください。

cfx コマンドのデフォルトオプション

default という名前のユーザ定義オプションを記述すると、これは --use-config オプション未指定時のデフォルトオプションとして自動的に呼び出されます。例えば、 local.json へ以下のように記述を追加します。

{
  "configs": {
    "default": [
      "-a", "firefox",
      "-P", "C:UsersadminAppDataRoamingMozillaFirefoxProfilestestuser"
    ],
    "ff37": [
      "-a", "firefox",
      "-b", "C:Program FilesMozilla Firefox 3.7firefox.exe",
      "-P", "C:UsersadminAppDataRoamingMozillaFirefoxProfilestestuser"
    ]
  }
}

すると、単に cfx run などを実行したとき、設定名 default で定義したデフォルトオプションが有効となります。