拡張機能開発時でよく使う再利用性のあるコードをインポート可能な形で書いたものを JavaScript コードモジュールといいます。コードモジュールは単に再利用できるだけでなく、何度読み込んでも最初の一度だけ初期化されて使い回されるシングルトンになるという特徴があるため、高速に動作する拡張機能開発のベストプラクティスとしても知られています。

コードモジュールは Firefox 3 からサポートされており、これから新規に拡張機能を開発するにあたっては遠慮無く使っていける時期になってきているはずです。みんなでコードモジュールを使って、作って、共有していきたいですね。(・・).

ここではいくつかのコードモジュールを紹介します。他にも公開されているコードモジュールがあれば皆さん随時追記していってください。

Firefox 標準搭載のコードモジュール

• XPCOMUtils.jsm
• NetUtil.jsm
• openLocationLastURL.jsm
• WindowDraggingUtils.jsm (Firefox 3.5~)
• ctypes.jsm (Firefox 3.6~)

Mozilla Labs で開発されているコードモジュール

詳細は https://wiki.mozilla.org/Labs/JS_Modules を参照 。

• JSON
• Logging
• Observers
• Preferences
  • 環境設定 (prefs) の操作に便利です。型を気にせず一括設定や読み込みできます
    
• StringBundle
  • l10n の properties ファイル読み込みが楽になります。xul に bundle 要素書かずに済みますし
• Sync
• URI

Mozilla Labs 製の一部のモジュールについては、Firefox Sync または Firefox 4 本体に同梱されています。上記のページにリンクされているものよりも新しいバージョンのモジュールもあるので、 http://hg.mozilla.org/mozilla-central/file/tip/services/sync/modules/ext/ を参照するのもよいかと。

その他のコードモジュール

• jstimer.jsm – written by Piro さん
  • nsITimer を wrap して使い慣れている setTimeout / setInterval のように使えるようにしたモジュール
• jquery.js – written by dynamis based on jQuery
  • jQuery を拡張機能の互換性問題など生じずに使えるようにした「つもり」のモジュール
  • animation, mouse event, ajax 周りは使えることを確認済みだが他は未検証
  • jQuery は HTML であり XUL 要素に対して同じ効果を実現できないこともあるハズ
• console.js – written by dynamis
  • Firebug と連携して Firebug 感覚でデバッグするためのモジュール
  • loglevel の設定、Firebug のコンソールへの出力、dump 出力など
• namespace.jsm – written by Piro
  • 複数のアドオンにまたがった共通の名前空間を作成するためのモジュール。
• animationManager.js – written by Piro
  • JavaScriptベースのアニメーション効果を実装する際に、各アドオンで別々にタイマーを走らせずに単一のタイマーで処理を行うためのモジュール。アニメーション効果が軽くなることが期待できる。JavaScriptコードモジュールとして使用する場合はjstimer.jsmに依存し、namespace.jsmとの併用に対応。
• autoScroll.js – written by Piro
  • ドラッグ操作中におけるタブバーの自動スクロールを実現するためのモジュール。namespace.jsmとの併用に対応。
• boxObject.js – written by Piro
  • nsIBoxObjectと共通のインターフェースで任意のDOM要素の位置と大きさを取得するモジュール。Geckoから削除された機能であるHTMLDocument.getBoxObjectForを使っていたコードを、最小限の変更で最近のGeckoに対応させるための物。namespace.jsmとの併用に対応。
• prefs.js – written by Piro
  • Preferencesを操作するためのモジュール。FUELのAPIに慣れなかった人向け。機能的には https://wiki.mozilla.org/Labs/JS_Modules のサブセット。namespace.jsmとの併用に対応。
• stringBundle.js – written by Piro
  • <stringbundle/>と共通のAPIでString Bundleを読み込むためのモジュール。機能的には https://wiki.mozilla.org/Labs/JS_Modules のサブセット。namespace.jsmとの併用に対応。
• CLHHelper.jsm – written by クリアコード
  • nsICommandLineHandlerインターフェースを備えたXPCOMコンポーネントの開発を支援するモジュール。
• ejs.jsm – written by クリアコード
  • ERB風のJavaScriptによるテンプレートを扱うためのモジュール。
• encoding.jsm – written by クリアコード
  • UTF-8、Shift_JIS、EUC-JPなど、文字列のエンコーディングを変換する処理を簡単に書くためのモジュール。
• hash.jsm – written by クリアコード
  • 文字列やファイルのハッシュの計算結果を簡単に取得するためのモジュール。
• action.jsm – written by クリアコード
  • ボタンのクリックやキーの押下など、ユーザの操作をDOMイベントのレベルでエミュレートするためのモジュール。

その他いろいろな拡張機能に独自のコードモジュールが含まれているので色々探してみてください(いいものがあれば紹介を追加してください)。

JavaScript ライブラリ

JavaScript コードモジュール形式になっていないが、便利に使い回せる JavaScript ライブラリです。

• Piro さんのライブラリ集
  • 拡張機能開発者といえば Piro さん。(^^;
  • 独立性の高いコードになっているので prefs.js を元に冒頭に EXPORTED_SYMBOLS と window だけ定義してコードモジュール化した prefs.js にできるなど、簡単にコードモジュール形式にできるものが多いそうです！→という風な改造を特に施さなくても、コードモジュールとして読み込んでも<script/>で読み込んでも使えるようにしてみました。（by Piro）

references

JavaScript コードモジュールについて詳しい解説は以下のページをご覧ください。

• MDC – JavaScript コードモジュール (原文)
• MDC – JavaScript コードモジュールの使い方
• Firefox 3 的なFUELとJSMを存分に使って拡張機能開発をしよう！
• Firefox 3 Hacks の Hack #26