Google Hackathon for Chrome Extensions in Fukuiに参加しました!

id:rch850とY氏とチームを組んで挑んだGoogle Hackathon。なんと第2位に選んでもらいました!当日はY氏が来れなくなるというアクシデントが発生しましたが、アイデアソンで予定していた2つの拡張機能をなんとか作り上げました。といっても僕たちのチームだけ2つも作ったのでちょっと反則といえば反則なんですけどw
そこでなにを作ったかというと

  • Googleのロゴが変わったら教えてくれる(Logo Stalker)
  • Googleで検索すると、同時にBingとYahoo!の検索結果の上位を表示してくれる(Scouter)

という拡張機能です。詳しくはid:rch805の方にも書いてあるので、ここではやりながら気が付いたことを書きます。

Logo Stalker

Googleのロゴの変化はスクレイピングを行って判断しています。Googleのトップサイトのロゴにはid="logo"というidが割り振られているのでそれを頼りにimgのsrcを取得し、いつも表示されているロゴのsrcと比較して変化していないかを確認しています。それだけ!srcを取得するには、jQueryを使って

$("#res").load("http://www.google.co.jp #logo", function(){
    var src = $('#logo').attr('src')
   ...
}

これだけです。あとはこのsrcをいつものlogoのsrcと比較するだけです。
そして、これを調査していたときに気が付いたのが、

<img alt="Google" height="110" src="/intl/ja_jp/images/logo.gif" width="276" id="logo" onload="window.lol&&lol()">

Googleのロゴのタグですけど、onloadのところになぜかlolがあるw こんなところに笑いがあるなんてとってもGoogleらしい!!

Stalker

これはGoogleの検索が行われると同時にバックグラウンドでBingなどの他の検索を走らせているんですけど、バックグラウンドでのデバッグの方法が分からなくて苦戦していました。console.logでログをはき出しても出力されないので、id:rch850が作るContentScriptの方と自分が作るバックグラウンドの方でログをはき出すルールを決めて、バックグラウンドからContentScriptの方へログを送るようにしていました。
しかし、先日バックグラウンドのデバッグ拡張機能の画面から行えることを知り、さらに太田さんからポップアップのデバッグはブラウザアクションのアイコンを右クリックしてInspect popupからいけることを教えてもらいました。環境を知っておくことは大切ですね。それだけで効率が大きく変わります。
これらの2つの拡張機能はもう少しブラッシュアップして公開する予定です。
最後にスタッフの皆さん、参加者の皆さん、そしてid:rch850、楽しいひとときをどうもありがとうございました!