mozilla labsから公開された、jQueryでFirefoxのExtensionを作れる拡張機能 “Jetpack” をいじってみる。
今まで、ちょっとしたExtensionを作るのもxulでやるのは良いとして、debugが非常にやりにくいのが難点でした。
その点、Jetpackは
- 書きなれたJavascript+jQueryで記述できる
- インラインで実行確認できるツールがある
- Firebugとの組み合わせでデバッグしやすい
ということで、ちょっと覚えておこうという気に。
まずは開発準備に環境を整えましょう。
インストール
jQueryでプラグインが作れると言っても、ネイティブなExtensionが生成されるわけではなく。あくまでJetpack上で動作させるものなので、現時点ではJetpackエクステンションをインストールしないといけません。
公式サイトのページ中ほどにある “Get Started! Install the Jetpack Prototype & API” をクリックし、いつも通りの手順でインストールを実行します。
拡張機能を有効にするため、Firefoxを再起動。すると “about:jetpack” タブが表示されています。
これで完了と非常に簡単なのですが、これから開発をしようと思うと、気になる注意が表示されています。
2つ出ていますが、まずは上の方。
You appear to be running Firefox 3 or earlier, which means that any logging messages or errors produced by your Jetpacks will reference the wrong line numbers. This makes debugging Jetpacks difficult; please consider using Firefox 3.5 Beta.
要約すると、「Firefox3もしくはそれ以前のバージョンを使っているようですが、その場合はJetpackのエラー発生行が間違って報告されちゃいます。これはデバッグを非常に困難にするので、Firefox 3.5 Betaを使うことを検討してください」と。
確かにそれは困ります。現在レギュラーで使っているのは、Firefox 3.0.1。
しかし、安易に3.5にしてしまうと、他の拡張機能が使えなくなったりして日常が不便。
ここはプロファイルを分けて、あくまで3.5はJetpack開発用のものとして起動させるようにします。これならば開発には余計なエクステンションも入らずサクサク動くし、そういった拡張機能が干渉して悪さをするようなことも無いので快適。
プロファイルの切り分けは -p パラメータをつけて操作するだけなので、それほど難しくありません。
ちなみに、2つめの注意文は次のようなもの。
You either don’t have the latest version of Firebug installed, or you don’t have it enabled for this page, so all logging messages will appear in the JS Error Console. If you get Firebug 1.4 Alpha and enable it for this page, and then reload this page, all logging messages will be logged to the Firebug Console, where it’s much easier to debug problems and inspect live objects.
こちらも簡単に約しておくと、こんな感じ。
「最新のFirebugがインストールされていないか、このページに対して有効になっていません。そのため、全てのエラーメッセージはJS Error Consoleに出力されます。Firebug 1.4 Alphaを入手して有効にしてからこのページをリロードすればメッセージは全て、よりデバッグや生成されたオブジェクトの調査がしやすいFirebugのコンソールに出力されるようになります。」
ここで書いている JS Error Console とは標準で入っている[ツール]→[エラーコンソール]のことだと思います。確かにこれは使いにくい。
やはり前記の通り、Jetpackの開発用に Firefox3.5 + Firebug1.4 環境を別プロファイルで作るのが良さそうです。
というわけで、開発環境の構築を具体的に。少し長くなったので次で。
Related posts:
