Chromeエクステンション「Pull de Reload」

2012.12.23crossnodeBrowser | JavaScript


iOSアプリのように画面を下にグイッとスクロールしてリロードするエクステンション「Pull de Reload」を作りました。これでiPhoneユーザーのみなさんのブラウジングがストレスフリーになることうけあいです。ただし、残念ながら動作するのはマイナス方向へスクロールできるMac OSのLion以降に限られます。(2012.12.23現在)

本作のソースを見ながらエクステンションの作成方法を解説していきます。
これを参考にぜひみなさんも便利なエクステンションを作ってみてください。
公式ドキュメンテーションも丁寧に解説されているのでご参照ください。英語が苦手な人もいるとは思いますが、ソースの例文も多いのでしばらく眺めていればなんとなく分かると思います。たぶん。

▼Chromeウェブストアページ
icon
「Pull de Reload」
https://chrome.google.com/webstore/detail/pulldereload/fcacgalkmpjkobjhhgkbpeahdhpmhplj?hl=ja&gl=JP
※対応OS : Lion以降

▼公式ドキュメンテーション
「Hello There! – Google Chrome」
http://developer.chrome.com/extensions/docs.html

0. 構成ファイル

「PulldeReload」の場合下記のファイルで構成されています。

manifest.json
background.js
styles.css
icon16.png
icon48.png
icon128.png

1. manifest.json

設定ファイルです。ファイル名は必ず「manifest.json」とします。
※参考サイト:Formats: Manifest Files – Google Chrome
 http://developer.chrome.com/extensions/manifest.html

{
    "name":"PulldeReload",
    "version":"1.0",
    "manifest_version":2,
    "description":"Pull to Reload",
    "icons":{
        "16":"icon16.png",
        "48":"icon48.png",
        "128":"icon128.png"
    },
    "content_scripts":[
        {
            "matches":["<all_urls>"],
            "js":["background.js"],
            "css":["styles.css"]
        }
    ]
}

以下、項目ごとに見ていきましょう。

▼エクステンション名(※必須)

    "name":"PulldeReload",

▼エクステンションのバージョン(※必須)

    "version":"1.0",

▼設定ファイルの形式(※必須)

    "manifest_version":2,

Chrome19以降で使えるようにする場合はバージョン2になります。
※参考サイト:Tutorial: Migrate to Manifest V2 – Google Chrome
 http://developer.chrome.com/extensions/tut_migration_to_manifest_v2.html

▼説明文(※必須)

    "description":"Pull to Reload",

▼アイコン

    "icons":{
        "16":"icon16.png",
        "48":"icon48.png",
        "128":"icon128.png"
    },

16px画像はアドレスバー横のボタン用です。
48px画像は管理画面のエクステンション一覧表示用です。
128px画像はインストール時の確認ダイアログに表示されます。
PNG, BMP, GIF, ICO, JPEGが使用可能ですが公式ガイドではPNG形式が推奨されています。ファイル名は自由です。
ちなみにアイコン画像が一切なくてもインストールして動作可能なので、画像はあとから用意する流れでも大丈夫です。
※参考サイト:Formats: Manifest Files – Google Chrome
 http://developer.chrome.com/extensions/manifest.html#icons

▼ファイル読み込み

    "content_scripts":[
        {
            "matches":["<all_urls>"],
            "js":["background.js"],
            "css":["styles.css"]
        }
    ]

「content_scripts」は各タブにファイルを読み込むという指定になります。
「content_scripts」には「matches」が必須で、適用するURLのパターンを指定します。「」と指定すると全てのサイトで適用されるのでローカルファイル表示時にも動作します。
特定のページを指定する場合はURLを記述します。複数指定時は[“http://aaa.com/bbb.html”,”http://ccc.com/ddd.html”]のようにカンマで区切って続ければOK。
指定したドメインやディレクトリの下階層を指定する場合は[“http://aaa.com/*”]のように記述します。「*」は「全て」というような意味でCSSの全称セレクタみたいなイメージですね。[“https://*/*”]とすればSSL接続時のみに絞り込めます。[“http://*/*”,”https://*/*”]とするとローカルファイルは除外されます。[“*://aaa.com/*”]とするとhttpでもhttpsでも当てはまるのでTwitter等のようなサイトを指定するときに使えるパターンです。
ちなみに「exclude_matches」で除外するパターンを指定することもできます。
「js」と「css」で今回使用するjs/cssファイルを指定しています。その他に「html」でhtmlファイルを読み込むこともできます。
※参考サイト:Content Scripts – Google Chrome
 http://developer.chrome.com/extensions/content_scripts.html
※参考サイト:Match Patterns – Google Chrome
 http://developer.chrome.com/extensions/match_patterns.html

2. background.js

動作を実装しているJSファイルです。

var PulldeReload = {
    init:function () {
        var bar = document.createElement('div');
        bar.id = "pulldereload";
        bar.innerHTML = 'Reload?';
        document.body.appendChild(bar);
        window.addEventListener('scroll', PulldeReload.scroll, false);
    },
    scroll:function () {
        if (document.readyState === 'complete') {
            var posY = document.body.scrollTop;
            if (posY < 0) {
                document.getElementById('pulldereload').style.top = (posY * -1) - 40 + 'px';
                if (posY < -40) {
                    document.getElementById('pulldereload').style.color = '#fff';
                    document.getElementById('pulldereload').innerHTML = 'Reloading...';
                    document.getElementById('pulldereload').style.top = '0';
                    window.removeEventListener('scroll', PulldeReload.scroll, false);
                    window.location.reload();
                }
            }
        }
    }
}
PulldeReload.init();

▼イニシャライズ

    init:function () {
        var bar = document.createElement('div');
        bar.id = "pulldereload";
        bar.innerHTML = 'Reload?';
        document.body.appendChild(bar);
        window.addEventListener('scroll', PulldeReload.scroll, false);
    },

まずローディング表示用のdiv要素を生成しておきます。CSSで表示位置を画面外に指定しているのでデフォルトでは見えないようになっています。
イベントリスナーをでスクロールイベントを監視します。

▼スクロールイベント取得時の動作

    scroll:function () {
        if (document.readyState === 'complete') {
            var posY = document.body.scrollTop;
            if (posY < 0) {
                document.getElementById('pulldereload').style.top = (posY * -1) - 40 + 'px';
                if (posY < -40) {
                    document.getElementById('pulldereload').style.color = '#fff';
                    document.getElementById('pulldereload').innerHTML = 'Reloading...';
                    document.getElementById('pulldereload').style.top = '0';
                    window.removeEventListener('scroll', PulldeReload.scroll, false);
                    window.location.reload();
                }
            }
        }
    }

2重読み込みしないように、全ての要素の読み込みが完了しているかのチェックを最初に入れています。
次に、スクロールがマイナスだったらスクロール幅に応じてdiv要素を下にずらします。
さらに、スクロール幅が-40pxを超えたらローディング中表示の切り替えとイベントリスナーのリムーブをしてリロードを開始します。

なお、今回のように「content_scripts」指定で読み込まれるファイルは、DOMのパース後実行されます。つまりdocument.readyStateのステータスでいう「loading」状態が終わった後の「interactive」状態に入るタイミングです。そのため、画像の読み込みはまだ終わっていない可能性があるので「complete」状態になっているかのチェックをしています。
※参考サイト:Content Scripts – Google Chrome
(「run_at」の項に実行タイミングについて記載されています)
 http://developer.chrome.com/extensions/content_scripts.html

3. styles.css

ローディング表示用のdiv要素の装飾をしています。

#pulldereload{
    display:block;
    position:fixed;
    color:#999;
    top:-40px;
    left:0px;
    width:100%;
    height:40px;
    font-size:20px;
    line-height:35px;
    text-align:center;
    background:-webkit-linear-gradient(bottom, rgba(20, 20, 20, 0.9) 5%, rgba(64, 64, 64, 0.9) 53%);
    z-index:999999;
}

特殊なことはしていません。「top:-40px;」という指定はデフォルトで画面外に配置しているということです。


ページトップへ