GUI

はじめに

Jetpack SDK では、Firefox の画面に情報を追加する方法として、下記のような API が用意される。

このページでは、これら Jetpack の GUI についてメモする。なお、表示するページの内容は Page Mods API、Tabs API、Windows API などを使って取得・更新できるが、このページでは説明しない。

このページの内容の動作確認は jetpack-sdk 0.9。

[Widget スクリーンショット]

Firefox 4 ではステータスバーが廃止され、代わりに「アドオンバー」が導入される。 Widget API を使うと、アドオンバーにウィジェットを配置することができる。ウィジェットはツールバーボタンの一種であり、ユーザはツールバーのカスタマイズによりウィジェットの配置を変更できる。

ウィジェットには画像ファイルもしくは HTML 形式の情報を表示できる。ウィジェットのクリック時にパネルを開いたり任意の処理を実行したりできる。 Jetpack SDK 0.9 では標準のウィジェットの大きさは 16×16 (Bug 596202、 Jetpack SDK 0.5～0.8 では 24×24 だった) であり、 width オプションで横幅を変更できる。

アドオンバーの表示／非表示を切り替えるには、 Firefox 4 の場合 App Button の [Options]-[Add-on Bar]、もしくはメニューバーの [View]-[Toolbars]-[Add-on Bar] にチェックする。 Firefox 3.6 では、Ctrl+Shift+U で表示／非表示を切り替えられる。

使い方

const widgets = require("widget");
widgets.add(widgets.Widget({
  label: "Widget with an image and a click handler",
  image: "http://www.google.com/favicon.ico",
  onClick: function(e){
    e.view.content.location = "http://www.google.com";
  }
}));

（https://jetpack.mozillalabs.com/sdk/latest/docs/#module/addon-kit/widget より）

image で指定する画像にリソースファイルを指定したい場合は、self.data.url() を使う。

onClick 等で設定するイベントハンドラには、第一引数としてイベントオブジェクトが渡される。 e.view.content.document で現在表示しているページの内容にアクセスできる。

Panel

[Panel スクリーンショット]

ブラウザ画面の上にフロート表示されるパネルを作成できる。パネル内には contentURL で指定されたページを表示できる。表示位置は Widget に登録した場合はその Widget の上、 show() メソッドで表示する場合は指定がなければブラウザ中央となる。 show() メソッドの引数に DOM 要素を指定すれば、その要素の位置にあわせて表示される。 Widget に登録する場合を除き、あらかじめ panels.add() でパネルを登録しておく必要がある。画面に表示されるのは show() メソッド呼び出し時だが、 add() メソッド実行時にバックグラウンドでページが読み込まれる。

使い方

const widgets = require("widget");
const panels = require("panel");

widgets.add(widgets.Widget({
  label: "asukaze.net",
  image: "http://www.asukaze.net/image/favicon.png",
  panel: panels.Panel({
    contentURL:  "http://www.asukaze.net/"
  })
}));

contentURL にリソースファイルの HTML を指定したい場合は、self.data.url() を使う。任意の HTML 文字列を表示するには、次のように data: スキームの URL を作成して指定する。

let url = "data:text/html," + encodeURIComponent("[HTML content]");
（https://bugzilla.mozilla.org/show_bug.cgi?id=588225 より）

Context Menu

コンテキストメニューを追加できる。

使い方

const contextMenu = require("context-menu");

var pageSourceItem = contextMenu.Item({
  label: "Edit Page Source",
  contentScript: 'on("click", function (node, data) {' +
                 '  postMessage(document.URL);' +
                 '});',
  onMessage: function (pageURL) {
    editSource(pageURL);
  }
});
contextMenu.add(pageSourceItem);

（https://jetpack.mozillalabs.com/sdk/latest/docs/#module/addon-kit/context-menu より）

SDK 0.9 でマルチプロセス対応のため API が変更された。ページコンテンツ上で動作するスクリプトは文字列として記述する。ページコンテンツ上では Jetpack の API は使えないため、必要に応じて postMessage/onMessage を使って Jetpack のプロセスとメッセージ通信を行う。 click イベントのイベントハンドラには、第一引数としてユーザのクリックした DOM ノードが、第二引数としてメニューアイテムのコンストラクタで記述した data プロパティが渡される。メニューを表示する対象は CSS のセレクタ形式などで指定できる。

Notifications

[Notifications スクリーンショット]

画面の右下に通知を表示する。

使い方

const notifications = require("notifications");
notifications.notify({
  text: "sample notifications",
  iconURL: "http://www.asukaze.net/image/favicon.png",
  data: "some data",
  onClick: function (data) {
    console.log(data);
  }
});

onClick で設定するイベントハンドラには、第一引数として data オプションの値が渡される。

更新履歴

2010/10/25: 0.9 の情報で Context Menu の説明を更新。ドキュメントのリンク先 URL を更新。
2010/10/03: 0.9pre の情報で Widget の説明を更新。
2010/08/21: 0.7rc1 の情報で全体を見直し。Notifications について追記。Page Mod を削除。
2010/06/05: リソースファイルの指定方法に関して追記。
2010/06/04: Panel を wip1 の情報に更新。
2010/05/28: ボタンに画像を表示する場合は content ではなく image に画像の URL を指定する。
2010/05/26: イベントハンドラの引数について追記。
2010/05/25: アドオンバーの表示切替について追記。
2010/05/21: 0.4rc1 の情報に更新。
2010/05/17: 初版作成。

（ Jetpack SDK に戻る｜このページの一番上へ）

目次

はじめに

Widget

使い方

Panel

使い方

Context Menu

使い方

Notifications

使い方

関連リンク

更新履歴

Menu