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でてますけど・・・w

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

0 コメント:

コメントを投稿