Chrome拡張で他サイトの情報を定期取得(スクレイピング)

気になる情報を、サイトから定期的自動取得し、Chromeツールバーのアイコンに表示させる拡張を作りました。
例えば「0670」は為替USD/JPYのレート「106.70」の最後四桁です。
為替はいつも変化しているもので、10秒毎に新しいレートを指定のサイトから取得してくれます。
レートが10秒前より下がった場合は青アイコン、上がった場合は赤アイコンに差し替えられる。
スクリーンショット 2014-09-10 23.12.52

これを実装したときに使ったコードをメモします。

設定部分(manifest.json)

サイトアクセス許可

直接アドレスを入れればいいです。
自分用なら、「<all_url>」ですべてのURLを許可してもよいでしょう。

"permissions": [
    "http://www.google.com/"
    // ,"all_url"
]

バックグランドで定期実行

実際の情報取得の実装はbackground.jsですが、
jQueryを借りて書いたので、jQeuryのライブラリもダウンロードして、一緒に置きます。
persistentは持続実行させるため、trueにします。

"background" : {
    "scripts": [
        "jquery-1.11.1.min.js",
        "background.js"
    ],
    "persistent": true
}

機能部分(background.js)

他サイトのHTMLを取得

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(data) {
    if (xhr.readyState == 4) {
        if (xhr.status == 200) {
            var contents = xhr.responseText;
            // xhr.responseTextが取得したHTMLなど

            // 取得したHTMLに対する処理
            // 処理した後、必要な情報をツールバーのアイコンに表示する処理
        }
    }
};
var url = 'http://www.google.com/';    //情報源のURL
xhr.open('GET', url, true);
xhr.send();    //定義したonreadystatechange()が実行される

文字列をJSONに変換

取得されたxhr.responseTextがJSON形式の場合、
jQueryで文字列をJSONに変換します。
あるいはsubstring()で文字列からJSON部分を抽出して変換します。

var jsonContents = jQuery.parseJSON( xhr.responseText );

ツールバーのアイコンと文字を変更

文字列変更(バッジと呼ばれる。最大は四文字しか表示できない)

chrome.browserAction.setBadgeText ( { text: "TEST" } );
// "TEST"が表示される文字列

アイコン変更

chrome.browserAction.setIcon( { path : "./images/another-icon.png" } );
//"./images/another-icon.png"が新しいアイコンのファイルパス

定期更新

実装は全部に実現されたので、定期実行させればいいです。
setIntervalで、更新間隔を指定して、コールバックメソッドが機能の実装です。
間隔はミリ秒で、10000が10秒になります。
短い間隔は情報源のサーバを負担をかけるので、良心を持って設定しておいたほうがいいかな。

setInterval(function(){
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(data) {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                // 
                // 実装部分
                // 
            }
        }
    }
    
    var url = 'http://www.google.com/';
    xhr.open('GET', url, true);
    xhr.send();

} , 10000);

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>