IT戦記

プログラミング、起業などについて書いているプログラマーのブログです😚

Firefox 拡張を jQuery で書く！ Jetpack を使ってみた。

JavaScript Firefox

はじめに

JavaScript が書ければ、誰でも簡単に Firefox の拡張が書けてしまう。しかも、もれなく jQuery が付いて来る！
というものを Mozilla Labs がリリースしたみたいですね。
https://jetpack.mozillalabs.com/

というわけで

少し触ってみました

Jetpack Feature の書き方

Jetpack で書く Firefox 拡張を「Jetpack Feature」といいます。
これは、以下の 2 つのものを用意すれば誰でも簡単に公開することが出来ます。

  • JavaScript ファイル
  • 公開用 HTML ファイル
JavaScript ファイル

JavaScript ファイルには、 Jetpack Feature のアプリケーションコードを書きます。

(function() {
    Jetpack.statusBar.append({
        onReady: function(doc) {
            for (var i = 0; i < 10; i++)
                Jetpack.notifications.show('Hello, world!'); // Hello, world を 10 回表示
        }   
    }); 
})();

詳細は、公式ページの Tutorial や Reference を見たほうが早いです。

公開用 HTML ファイル

以下のような link 要素を含んだ HTML ファイルを書きます。

<!DOCTYPE html>
<html>
    <head>
        <link rel="jetpack" href="hello.js" />
        <title>Hello, Jetpack!</title>
    </head>
    <body>
        <h1>Hello, Jetpack!</h1>
    </body>
</html>

こうすることで、この hello.js で書かれた JavaScript を Jetpack Feature として公開することができます。
具体的には、 Jetpack をインストールした Firefox でこの HTML を見ると「この Jetpack Feature をインストールしますか？」的なメッセージが表示されます。

更新チェッカーを書いてみた

Hello, world だけじゃあまりにもあまりなので、

(function() {
    Jetpack.statusBar.append({
        onReady: function(doc) {

            // データの永続化は Jetpack.sessionStorage で
            if (!Jetpack.sessionStorage.feedUrl) {

                // グローバルに prompt がなかったのでコンテンツのを使う
                Jetpack.sessionStorage.feedUrl = Jetpack.tabs.focused.contentWindow.prompt('input feed url');
            }   

            var url = Jetpack.sessionStorage.feedUrl;

            // setInterval はある
            setInterval(function() {
                // jQuery の get 関数を使う
                $.get(url, function(content) {
                    // MD5 を取る
                    var md5 = CybozuLabs.MD5.calc(content);
                    // 更新をチェック
                    if (Jetpack.sessionStorage.feedMd5 != md5) {
                        // 更新をお知らせ
                        Jetpack.notifications.show('Contents updated! ' + Jetpack.sessionStorage.feedMd5 + ' to ' + md5);
                        // MD5 を取る
                        Jetpack.sessionStorage.feedMd5 = md5;
                    }   
                })  
            }, 10000);
        }   
    }); 
})();

/* 以下に CybozuLabs.MD5 ライブラリのコードをはり付ける */