▼ 2011/08/27(土) Chrome Extensionでページの更新を監視してみる
試した環境
内容
| OS | Windos 7 Professional SP1(64bit) |
|---|---|
| Google Chrome | 13.0.782.215 m Windows |
| jQuery | 1.6.2 |
- Google Chrome Extensionsでバックグラウンドで定期的な処理をする方法
- Google Chrome ExtensionsでWebページを取得してページの特定の箇所を取得する方法
- Google Chrome Extensionsでユーザに情報を通知する方法
■ はじめに
APIが公開されているわけでもないWebページの特定の箇所が更新されているかを定期的にチェックしたいというシチュエーションがありました。環境がMacだったのでperl+Growlでもいいかなと思ったんですが、Google Chrome Extensionsで作ればWindowsでもMacでもどちらでも使えていいかも、ということでGoogle Chrome Extensionsで試してみることにしました。
結論から書くと、Background Pagesで任意の間隔でページを読み込んで、そのページをjQueryでパースすると楽な感じでした。
注意：
- 高頻度でWebページにアクセスし続けることはサーバに負荷がかかり迷惑をかけることになるため自重すべきです
- 誰かの作ったウェブサービスに対して作る場合は利用規約を確認しましょう
■ サンプル
どこかのページを対象にしたサンプルを作るのもあれなので、このBlogの更新をチェックする誰得なサンプルを公開します■ こんな感じ
用意するもの| manifest.json | Google Chrome Extensionsなので |
| background.html | 裏で動き続けるHTMLファイル |
| jquery-1.6.2.js | jQueryを使うとページの解析が簡単 |
| core.js | 処理本体 |
manifest.json
{
"name": "Background Notifier",
"version": "0.1",
"description": "backgroundでページを監視して変更を通知するよ",
"background_page": "background.html",
"permissions": [
"notifications",
"http://example.com/"
]
}
example.comのところを自分が監視したいページのURLに書き換えbackground.html
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="jquery-1.6.2.js"></script> <script type="text/javascript" src="core.js"></script> <script type="text/javascript"> initialize(); </script> </head> <body> </body> </html>スクリプトを読み込んで走らせるだけ
core.js
// Settings
// timespan
var delay_seconds = 60 * 5;
// target url
var target_url = "http://example.com/";
// AJAX Object
var ajax_transport = new XMLHttpRequest();
var previous_post_time = 0;
var XMLHttpRequest_STATE_COMPLETE = 4;
function initialize() {
// first check
check_update();
}
function check_update() {
// send request
ajax_transport.open("GET", target_url, true);
ajax_transport.onreadystatechange = process;
ajax_transport.send()
// next check
setTimeout(check_update, 1000 * delay_seconds);
}
function process() {
if (ajax_transport.readyState != XMLHttpRequest_STATE_COMPLETE) {
return;
}
var response = ajax_transport.responseText;
// create jQuery Object from HTML text
var jobj = $(response);
// find check point
var latest_post_time = jobj.find('.foo').find('.bar').first().find('.time').val();
console.log("latest post time: " + latest_post_time, "previous checked time: " + latest_post_time);
// compare between previous check time and latest check
if (latest_post_time > previous_post_time) {
notify();
}
previous_post_time = latest_post_time;
}
function notify() {
var note = webkitNotifications.createNotification(null,"notifier","found new elements");
note.show();
}
バックグラウンドでの処理の実行
バックグラウンドで動き続けるスクリプトを走らせたいです。公式リファレンスによるBackground Pagesは
A common need for extensions is to have a single long-running script to manage some task or state. Background pages to the rescue.とのことなので何となくできそうな感じ。
Background Pagesの仕組みを使うには、manifest.jsonに次の項目を記述します
"background_page": "background.html"background.htmlが裏で動いているページになります。
今回は、このページを次のようにしました
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="jquery-1.6.2.js"></script> <script type="text/javascript" src="core.js"></script> <script type="text/javascript"> initialize(); </script> </head> <body> </body> </html>普通にHTMLを書いてJavaScriptを走らせているだけですね。
このcore.jsの中で定期的にページを取得して更新をチェックすれば実現できそうです。
Webページの取得とページ要素の取得
Webページの取得はXMLHttpRequestで行いました。公式リファレンスを参考に……。
var ajax_transport = new XMLHttpRequest();
ajax_transport.open("GET", "http://example.com/", true);
ajax_transport.onreadystatechange = process;
ajax_transport.send();
function process() {
if (ajax_transport.readyState != 4) {
return;
}
// この中で取得したページに対してあれこれする
}
取得したページはjQueryで解析すると簡単
// レスポンスをテキストで取得
var response = ajax_transport.responseText;
// HTMLテキストからjQueryオブジェクトを作成
var jobj = $(response);
// 任意の情報を取得
var latest_post_time = jobj.find('.foo').find('.bar').first().find('.hoge').val();
通知方法
公式リファレンスmanifest.jsonにパーミッションを追加
"permissions": ["notifications"]簡素なパターン
var note = webkitNotifications.createNotification(null,"notify title","notify body"); note.show();特定のURLを表示するパターン
var note = webkitNotifications.createHTMLNotification('http://example.com/');
note.show();
あらかじめ用意したHTMLファイルを表示するパターン
var note = webkitNotifications.createHTMLNotification('note.html');
note.show();
簡単でした■ 参考文献
- Chrome Extensions自体の作り方などはこのページで
- Background Pagesの使い方や更新チェックの仕組みについてこのスクリプトを凄く参考にしました
- 通知の方法
- デバッグ方法
▼ コメント（0件）
- TB-URL http://mitc.s279.xrea.com/adiary.cgi/0103/tb/
