小さい頃はエラ呼吸

いつのまにやら肺で呼吸をしています。


初心者のためのJetpack入門


Jetpackは、Mozilla LabsがリリースしたFirefoxの拡張機能です。Jetpackについては、以下の記事が非常に参考になります。

本エントリでは、Jetpack Featureを作成して、公開するところまでの手順をまとめてみました。

Jetpackのインストール

Jetpackのインストールは、以下から行います。

Jetpack Featureのコードを記述する
  1. メニューからツール-about:jetpackを選択します。(ロケーションバーに直接about:jetpackと入力してもOKです。)
  2. Developを選択すると、以下のような黒いテキストエリアが出現するので、そこにJavaScriptをJetpack Featureを作成していきます。

試しに、訪れたページのタイトルとURLを逐一コンソールにログ出力するJetpack Featureを書いてみます。コードの書き方はJetpackのAPI仕様書を参考にすると良いです。

jetpack.tabs.onReady(function(targetDocument) {
  console.info(targetDocument.title + ":" + targetDocument.location.href);
});

上記のコードをLoggingVisitedPages.jsというファイル名で保存し、続いてインストール用のHTMLファイルを作成します。

インストール用ページの作成

以下のコードをテキストエディタで作成し、適当な名前で保存します。(仮に、LoggingVisitedPages.htmlという名前で保存します。)

<!DOCTYPE html>
<html>
    <head>
        <link rel="jetpack" href="LoggingVisitedPages.js" />
        <title>LoggingVisitedPages</title>
    </head>
    <body>
        <h1>LoggingVisitedPages</h1>
    </body>
</html>
Jetpack Featureのインストール

Firefoxで、LoggingVisitedPages.htmlを表示します。ページの上部に、This page contains a Jetpack features. If you'd like to install it, please click the button to the right.というメッセージが表示されるので、Installボタンをクリックします。

続いて、以下のような警告画面が表示されますので、I know what I'm doing. Install it!をクリックします。

これでJetpack Featureの作成とインストールは、すべて完了です。試しにGoogleでJetpackと検索してみると、以下のような文字列がコンソールに出力されます。

jetpack - Google 検索:http://www.google.co.jp/search?q=jetpack&lr=lang_ja&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:ja:official&client=firefox-a

終わりに

Jetpack Featureの開発と公開の流れは以上です。Jetpackには、コンソールを操作するAPI以外にもストレージに関するAPIやFirefoxのメニューを操作するAPIなどが備わっているので、色々なことができるようです。まだ、開発途中の拡張機能ですが、すでに多くのJetpack Featureが公開されているようなので、調べてみるとおもしろいかもしれません。