content.jsとbackground.htmlのやり取りの追跡方法

extension開発でXHRを使いたかったんだけど、
めちゃめちゃハマったのでまとめてみる。
content.jsからbackground.htmlにデータを送って
background.htmlでXHRを使うってのは前情報で知ってたんだけど、
実際にそのデータをやり取りする経路の追い方がわからなくて
かなりハマりました。


結論から言うと、

content.jsとbackground.htmlのログ出力場所は別だった！

ΩΩΩ＜な、なんだってー！

ということですね。
じゃあどこなんだよ！って事で以下SSを交えて簡単に説明。

<---- 前提 ---->
以下で語る事の前提として、
ログの出力とはconsole.logで吐き出す文字列の事を指します。
<- 前提ここまで->

content.jsのログが出る場所は説明するまでもなく、
manifest.jsonでextensionの挙動を許可しているURLのページですね。

extensionを許可しているページ上で右クリックして「要素を検証」を選択

自分はベータ版のChrome5を使ってるので画面上部に
Consoleのタブがありますが、安定版の4を使ってる人は
左下の左から2番目のボタンを押せばコンソールが出てきます。

content.jsでログを出力すればここにログが出ます。
まぁこれはみなさん周知の事実かと思われます。
問題は次ですね。
background.htmlでログを出力したときにどこにでるか！
それはここでした！

拡張機能のextensionのアイコンが出ているちょっと右下に
「 動作中のページを調査：」って書いてあって、
その下にbackgroundページに指定しているhtmlのファイル名がありますね？
そこをクリックすると！

ジャジャーン！

Web Inspectorが起動します！
ここでコンソールを表示すると

background.htmlで動いてるscriptのログが出力されます！！
画像だとsyntax errorでてますけど・・・ｗ

という感じで、content.jsとbackground.htmlそれぞれでログを出力すると
上記の二つの場所でログが出るので、
それがわかればcontent.jsとbackground.htmlとの
データのやり取りは制覇したも同然です！