Add-on SDK を使った Firefox 拡張機能の作成 - JavaScriptの有効/無効を切り替える

Firefox JavaScript

Firefox 4 の拡張機能を簡単に作成するためのツール Add-on SDK を使って拡張機能を作成してみました。
不要な手間が軽減されるため、個人的にはかなり有用なツールだと思います。

使用した環境は以下の通りです。

サンプルソースは http://github.com/fits/try_samples/tree/master/blog/20110501/

事前準備

今のところ Add-on SDK を使うには Python の 2.x が必要なので（Python 3.x 系はまだサポートしていない模様）、まず Python をインストールしておきます。（今回は Python 2.7.1 を使用）

次に、Jetpack プロジェクトのサイトから Add-on SDK をダウンロードして、適当なディレクトリに解凍します。

通常は、この後 bin\activate.bat を実行するみたいですが今回は実行していません。

Add-on SDK のルートディレクトリを環境変数 VIRTUAL_ENV に設定するだけで、cfx.bat を問題なく使えたので activate.bat を実行する必要は特にありませんでした。（ただし、python コマンドを実行できる事が前提）

環境変数の設定例
> set VIRTUAL_ENV=C:\addon-sdk-1.0b4
> set PATH=%VIRTUAL_ENV%\bin;%PATH%

プロジェクト作成

cfx init でプロジェクトの雛形を作成します。デフォルトではカレントディレクト内にファイルが生成され、カレントディレクトリ名が拡張機能の名称として設定されます。

プロジェクト作成例
> mkdir addon-sample
> cd addon-sample
> cfx init

プロジェクトのディレクトリやファイル構成は以下のようになります。

プロジェクトのファイル構成
  • addon-sample
    • data
    • docs
      • main.md
    • lib
      • main.js
    • tests
      • test-main.js
    • package.json
    • README.md

package.json に拡張機能の設定情報を、main.js に処理を実装していきます。

設定情報

拡張機能の設定情報を package.json ファイルに JSON 形式で記載する事になります。プロジェクトの作成時にデフォルト設定されているので、必要が無ければ特に変更しなくても良いと思います。

今回は以下のように設定しました。

package.json
{
  "name": "addon-sample",
  "fullName": "addon-sample",
  "description": "Addon-SDK Sample",
  "author": "fits",
  "license": "MPL 1.1/GPL 2.0/LGPL 2.1",
  "version": "0.1"
}

なお、package.json には id 設定が必要ですが、cfx run の初回実行時に自動設定されるので、この段階で設定しておく必要はありません。

処理の実装

処理は lib/main.js に実装していきます。

今回は、アドオンバーに表示された拡張機能（"JS" もしくは "--" の表示）をクリックすることで JavaScript の有効設定を切り替えるような処理を実装してみました。

require("chrome") で取得した Cc が一般的な拡張機能作成時の Components.classes に、Ci が Components.interfaces に該当します。

また、今回のケースでは widget の content に設定した内容がアドオンバーに表示され、content を変更すればアドオンバーの表示内容も変更されます。

lib/main.js
const {Cc, Ci} = require("chrome");
const widgets = require("widget");

var pservice = Cc["@mozilla.org/preferences-service;1"].getService(Ci.nsIPrefService).getBranch("");

//JavaScript の有効設定の有無を表示
var displayJSStatus = function(w) {
  var jsenable = pservice.getBoolPref("javascript.enabled", false);
  //JavaScript が有効なら "JS"、無効なら "--" と表示
  w.content = (jsenable)? "JS": "--";
}

var widget = widgets.Widget({
  id: "addon-sample",
  label: "addon-sample",
  content: "--",
  onClick: function() {
	//JavaScript の有効設定を切り替え
	pservice.setBoolPref("javascript.enabled", !pservice.getBoolPref("javascript.enabled", false));
	//表示の変更
	displayJSStatus(this);
  }
});

//初期表示
displayJSStatus(widget);

動作確認

cfx run を実行すると拡張機能が導入された状態で Firefox が起動され、動作確認できます。

なお、package.json に id 設定が無い場合は初回起動時に以下のようなメッセージが表示され cfx run が終了しますが、この時に id が自動設定されるため、次回の cfx run から問題なく起動するようになります。

初回実行時（package.json に id 設定が無い場合）
> cfx run
No 'id' in package.json: creating a new keypair for you.
package.json modified: please re-run 'cfx run'
実行（package.json に id 設定がある場合）
> cfx run
Using binary at 'C:\・・・・\firefox.exe'.
Using profile at 'c:\users\・・・\local\temp\tmpu・・・mozrunner'.

立ち上がった Firefox のアドオンバーに表示された "JS" の箇所をクリックする度に表示が切り替わり、それに応じて「オプション」->「コンテンツ」 の「JavaScriptを有効にする」の設定も切り替わる事を確認できるはずです。

ビルド（xpi ファイル生成）とインストール

cfx xpi で作成された xpi ファイルを Firefox にドラッグアンドドロップする事で作成した拡張機能をインストールできます。

ビルド
> cfx xpi
Exporting extension to addon-sample.xpi.