先日、後輩にFirefoxの拡張機能であるJetpackがおもしろいですよと言われたので、ちょっと調べて作ってみました。
Jetpackとは
Firefoxにおける新しい拡張機能プラットフォームですが、そう言われてもイメージがわかないと思います。僕の印象では、Ubiquityに近い拡張機能です。Greasemonkeyにも似ていますが、メニューなども操作できるため、Greasemonkeyよりも自由度が高いです。
Firefox の拡張機能の開発と導入の敷居を下げる新しい拡張機能プラットフォームです。今までの拡張機能の開発には、XUL による UI の定義、ソースコードの作成、それらのパッケージングなどを必要としていました。Jetpack では主立った機能や UI へのアクセスを API として提供することで、 JavaScript によるソースコードのみで拡張の開発ができるようになりました。
Jetpack とは ≪ Mozilla Developer Street (modest)
Jetpackの作り方
- 通常のアドオン同様に、以下のサイトでJetpackインストールします。
- インストールが完了したら、ロケーションバーにabout:jetpackと入力すると、jetpackの設定画面が表示されます。Developのリンクを選択すると、テキストエリアが表示されるので、そこにJavaScriptのコードを書いていきます。
Hello World
まずはHello Worldを表示するスクリプトを作ってみます。テキストエリアに以下のコードを張り付けて、try out this codeをクリックすると、Hello Worldが通知されます。
jetpack.notifications.show("hello world");
はてなブックマーク数(users)のリンクをつくるJetpack
試しに以下のブックマークレットをJetpackでリライトしてみました。その際、Firefoxのメニューをいじくって、専用のメニューから呼び出すようにしてみました。
// Firefoxのメニューを操作する機能のインポート jetpack.future.import("menu"); // メニューをリセットする。(Jetpack で操作する前の状態に戻ります) jetpack.menu.file.reset(); // 新しいメニューを作成する var menu = new jetpack.Menu({ label: "はてなブックマーク数(users)のリンクをつくる", command: MakeHatebuLink }); jetpack.menu.tools.add(menu); // メニューが選択された場合の処理 function MakeHatebuLink() { // 現在アクティブであるタブのドキュメントを取得する var doc = jetpack.tabs.focused.contentDocument; var tmp = "<a href='" + doc.location.href + "'>" + doc.title + "</a>"; var entryURL = "<a href='" + "http://b.hatena.ne.jp/entry/" + doc.location.href + "'>"; var imgURL = "<img src='" + "http://b.hatena.ne.jp/entry/image/" + doc.location.href + "' />"; var url = entryURL + imgURL + "</a>"; var query = jetpack.tabs.focused.contentWindow.prompt('', tmp + url); }
感想
Firefoxの拡張機能を簡単に作れると言っても、やはり敷居は高いという印象です。このスクリプト作るだけで結構時間かかりました。スクリプトが動作しない場合の原因特定は難しかったです。
今までは拡張機能のUIを作成するにはXULを覚える必要がありましたが、Jetpackではそれらの機能がAPIによって提供されているため、以前よりは簡単に作成できるようです。