気になる情報を、サイトから定期的自動取得し、Chromeツールバーのアイコンに表示させる拡張を作りました。
例えば「0670」は為替USD/JPYのレート「106.70」の最後四桁です。
為替はいつも変化しているもので、10秒毎に新しいレートを指定のサイトから取得してくれます。
レートが10秒前より下がった場合は青アイコン、上がった場合は赤アイコンに差し替えられる。
これを実装したときに使ったコードをメモします。
設定部分(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);