Jetpack APIリファレンス

jetpack.notifications.show(options)

[オプション]

title String

通知タイトル。

icon URL

通知アイコンのURL。

body String

通知内容。

この関数はシンプルな通知メッセージを表示します。WindowsとLinuxではトースター通知で、MacのOS XであればGrowlメッセージ（インストールされていれば）になります。引数は1つで、通知文字列か、title, icon, bodyなどのプロパティを持つオブジェクトを受け取ります。iconを設定する場合、そのURLを渡す必要があります。

以下の例は、オブジェクト指定の場合です。

jetpack.notifications.show({
         title: 'hai2u',
         body: 'o hai.',
         icon: 'http://www.mozilla.org/favicon.ico'
});

jetpack.slideBar.append(options)

[オプション]

icon String

スライドバーが開いた際に表示される最初のアイコン。

html String

新しいスライドバーの最初のHTML。プレーンテキストもしくはE4X形式で記述。

url URL

スライドバーにロードするHTMLのURL。前述のhtmlが設定されていた場合、そちらが優先されます。

width Number

htmlやurlで指定したページのレンダリングされるサイズをピクセル単位で指定。

onSelect Function

アイコンをクリックして選択された際に呼び出されるコールバック関数。既にFeatureが選択状態にある場合は、重ねてonSelectが呼び出されることはありません。関数の引数については下記を参照。

onReady Function

スライドバーにコンテンツがロードされた際に呼び出されるコールバック関数。関数の引数については下記参照。

この機能はスライドバーにアイコンを追加します。スライドバーは、スライドバーアイコンにマウスが近づくと表示されます。ユーザがFeature毎のアイコンをクリックすると、そのFeatureは「選択状態」になり、例えば更に広いエリアにスライドバーを開き、Feature用のコンテンツを表示するなどの追加アクションを実行することが出来ます。

全てのコールバック関数は唯一の引数として、スライドバーの開閉に使われるslide()を受け取ることができます。slide()はslideBar.append関数のように、オプションオブジェクトを1つ受け取ります。このオプションはsizeとpersistという2種類のプロパティがあります。sizeはスライドバーが開くピクセル数です。persistはbool値で、trueの場合はユーザがマウスカーソルをスライドバーの外に出しても、自動的に閉じずに待機します。

slide()はプロパティオブジェクトで、2つの追加プロパティを持ちます。iconはスライドバー中のアイコンを指し、docはFeature用のドキュメントを指します。これらはリスナーを追加したり、動的にアイコンやドキュメントを変更する際に便利です。

スライドバーを閉じるには、引数を渡さずに単にslide()を呼ぶだけです。

次の例は、アイコンをクリックして選択すると一時的にスライドバーを広げ、広げられたコンテンツ部分をクリックするとスライドバーを開いたままにさせる機能をスライドバーに追加します。(閉じるには、スライドバーアイコンをクリックします)　更に、コンテンツがクリックされた際にFeatureのアイコンも変更します。

jetpack.future.import("slideBar");
jetpack.slideBar.append({
  onSelect: function(slide) slide({ size: 100 }),
  onReady: function(slide) $(slide.doc).click(function() {
    slide({ size: 200, persist: true });
    slide.icon.src = "chrome://branding/content/icon48.png";
  })
});

コールバック関数の引数で渡されたslideにpersistが指定されない場合、スライドバーは実際にはブラウザの右端の位置をウィンドウの外にシフトさせていることに注意してください。about:jetpackの例で見れば、リファレンスページはウィンドウの中心に位置しています。それが、FFアイコンをクリックした状態ではコンテンツ部分の右に寄る(中心に来ない)と思います。これは、この時点ではスライドバーのコンテンツは一時的なものであるからです。persitがtrueに設定された場合は、それによって圧迫されたコンテンツ部分が再描画され、この時点での右端を縁とします。

jetpack.statusBar.append(options)

[オプション]

html String

新たなステータスバーパネルのHTML。

url URL

ステータスバーパネルにロードされるHTMLのURL。

width Number

htmlやurlで指定されたコンテンツが描画されるサイズをピクセル単位で指定。

onReady Function

ステータスバー上に新しいパネルが作られた際に呼び出されるコールバック関数。

この関数は、開いている全てのウインドウ上のステータスバーに新たなパネルを追加します。新たなブラウザを開けば、自動的hにそこにもパネルが追加されます。

技術的に言うと、ステータスバーパネルはifrmae要素です。これはリソースを大量に消費しますが、Webが備えている全てのジェネレート機能を有します。将来的にはこの関数に、よりシンプルでリソース消費の少ない、静的ラベルや画像を表示するようなオプションが追加されるかもしれません。

以下のサンプルではステータスバーにアイコンを追加します。そしてそのアイコンをクリックすると、通知メッセージが表示されます。

jetpack.statusBar.append({
  html: '',
  width: 16,
  onReady: function(doc) {
    $(doc).find("img").click(function() {
      jetpack.notifications.show("hai2u");
      });
  }});

jetpack.storage.live

jetpack.storage.lliveに、どんなオブジェクトでも結びつけることが出来、Firefoxが再起動されるまでいつでも利用することができます。

jetpack.storage.live.myData = {hello: "world"};
console.log( jetpack.storage.live.myData );

jetpack.storage.simple

Simple Persistent Storage JEPを参照してください。
シンプル・ストレージは各Jetpack Feature毎に区切られているので、他の開発者が書いたコードと衝突することを恐れる必要がなくなります。
以下に、シンプル・ストレージAPIの使い方を簡単に例示します。

jetpack.future.import("storage.simple");
jetpack.storage.simple.set( "4ever", {hello:"world"} );
jetpack.storage.simple.get( "4ever", function(data, value){
  console.log( data, value );
});

jetpack.tabs.focused

現在フォーカスされアクティブになっているタブオブジェクトです。

以下のサンプルでは、現在フォーカスを得ているタブのURLを通知します。

jetpack.notifications.show(jetpack.tabs.focused.url);

jetpack.tabs.onFocus(callback)

タブオブジェクトが選択状態になった際に常に呼ばれるliveイベントをバインドします。
このバインダー関数はタブオブジェクトもしくはjetpack.tabs配列上で利用できます。
登録されたイベントハンドラは、現時点では引数を何も取りません。関数が呼び出された際、thisで引き金となったタブオブジェクトを参照できます。
次のサンプルはjetpack.tabs.onFocusハンドラを使い、タブを切り替えた際には常に通知メッセージを表示するようにしています。

jetpack.tabs.onFocus(function() {
  jetpack.notifications.show("You selected " + this.url);
  });

jetpack.tabs.onReady(callback)

“live event binder”は、タブオブジェクトのHTML文書もしくは、それが含むサブドキュメント（例えばiframeのような）のひとつのロードが終わった際に、このイベントを実行します。純粋に技術的な見地で言えば、このイベントはターゲットとなるドキュメントの DOMContentLoaded イベントにより実行されます。

このバインド用メソッドは、タブオブジェクトとjetpack.tabs配列で利用可能です。

次のサンプルコードはjetpack.tabs.onReadyハンドラを用いて、ユーザがページへ再訪した際に通知メッセージを表示できるようにしています。

jetpack.tabs.onReady(function onNextPage(doc) {
  if (!doc.defaultView.frameElement) {
    jetpack.notifications.show("Loaded " + doc.location.href);
    jetpack.tabs.onReady.unbind(onNextPage);
  }});