Jetpackでmoduleをロードさせるには

先日jetpackのバージョンが0.3.1に更新され、少し大きめの変更が加えられました。
コードの内容も少し変わっているのですが、ぱっと目につくのはstatusBarのUIが変わりました。
今までは背景の色をコピーか用意されている画像を背景にするという事を行っていたので、違和感がありましたが、それがなくなりました。

Before

After

仕切りも出来てます。
このUI実現のため「status-bar-panel.js」にコードが追加されています。
ポジションが上にずれる問題への対処箇所は165行目辺りに変わっています。

その他にはJEP18で提案されていたaudio.jsが取り込まれています。
これは録音が出来るものなのですが、サンプル通りにロードさせてみても上手く読み込まれません。
正確には内部的にロードは出来ているのですが、プロパティがUndefineになってしまいます。
初期化の時点で録音機能を動作させる事が可能かチェックをかけているので、そこではじかれている可能性が高いのですが、エラーチェックをしても出力されないので、はまっています。
調査不足だと思うので、もう少し調べてみます。

さて、Jetpack Featureを作ろうとしたときに便利なおれおれモジュールを使いたいと思うこともあるかと思います。
そんな時は使いたい機能をまとめたjsファイルを作って読み込ませればいいのですがディレクトリに配置しただけでは読み込んでくれません。
読み込ませるファイルについての情報を「jetpack-environment.js」に追記する必要があります。
この先「\Documents and Settings\%USER%\Application Data\Mozilla\Firefox\Profiles\ランダム英数.default\extensions\jetpack@labs.mozilla.com」をJETPACK_HOMEとします。
「Application Data」は隠しディレクトリなので表示させるようにしてください。

このファイル内でJetpack Feature内で必要になったときに読み込ませるファイルや、環境起動時に読み込ませるファイルなどが設定されています。
ファイルは「JETPACK_HOME\content\js」内に配置されています。

今回は以下のようなもの凄く単純なコードをインポートします。
文字を表示する関数を返すだけです。
このファイルをtest.jsという名前で「JETPACK_HOME\modules」に保存します。

//コンストラクタの名前など外部からアクセス出来るようにする関数名を指定する
EXPORTED_SYMBOLS = ["TestModule"];

function TestModule(){
	this.msg = "This is Test Module";
}

TestModule.prototype = { showMessage: function(){return this.msg;}}

読み込みの設定を行います。
jetpack-environment.jsの「JetpackEnv.setFutures」内323行目辺りに続けて記述していきます。
追記する内容は以下の通りです。

   //ロード時の名前を指定します(名前空間)
　 //先頭にjetpackをつけます
   //それ以降はファイル名と一致しなくても構いません
   "jetpack.test": function(context) {
     var s = {};
　　 //読込先を指定します
     Components.utils.import("resource://jetpack/modules/test.js", s);
     return new s.TestModule();　　//ここでの返り値が先ほど指定した名前空間にロードされます
   }

関数内で事前処理などを行う事も可能です。

後は、Feature内で

jetpack.future.import("test");

console.log(jetpack.test.showMessage());

と実行するとメッセージが実行されます。

JetpackのDevelopタブ内で作業している場合は、一回ロードしてしまうとファイルを変更しても以前のインスタンスが残っているのでFxをいったん終了させます。
これで、おれおれ便利モジュールも出来ますね。

var s = {};
Components.utils.import("resource://jetpack/modules/test.js", s);

が邪魔くさいと思う方は150行目付近の「window.addLazyLoaders」に

   "js/test.js": [
     "TestModule"
   ]

の様に追記する事で読み込ませることが可能になるのですが、配置場所が変わります。
配置先は「JETPACK_HOME\content\js」になります。
ここはJetpack本体の機能用のファイルが多くあったりするので、moduleに配置するほうが便利かと思います。

jetpack.future.import("hoge");

としなくても最初から読み込ませて起きたい場合は、先ほど「JetpackEnv.setFutures」内で書いた内容を「JetpackEnv.addLazyLoaders」に書きます。

簡単ですがモジュールを作った方はこんな感じで読み込ませる事が出来ます。
Jetpack本体に追記しないといけないのでモジュールの配布は難しいです。

モジュールの関数名の変更などをユーザに通知したい場合には「jetpack-environment.js」の336行目付近の以下の呼び出しに追記します。

//"前" : "後"　の順番です
JetpackEnv.addDeprecations(
  {"jetpack.sessionStorage": "jetpack.storage.live",
   "jetpack.json.encode": "JSON.stringify",
   "jetpack.json.decode": "JSON.parse",
   "jetpack.importFromFuture": "jetpack.future.import"
  });

エラーコンソールに警告で表示されます。

以前のエントリーでグリモンみたいにJetpack Featureを使うにはというのを書きましたが、JEP17に同じようなコンセプトのものが提案されていました。
「pageMods」というものなのですが、この関数に対象URL(ワイルドカード対応)とコールバック関数を渡す仕様になるようです。

Jetpackの話題をあまり聞かないのと、Userscript.orgのJetpack Featureカテゴリへの登録が少ないですが、コミュニティは元気に活動しているようです。
やはり、拡張機能などとの住み分けが難しいのでしょうか。

間違いなどありましたら指摘をお願いします。

まめ畑

ゆるゆると書いていきます

Jetpackでmoduleをロードさせるには