onConnectの挙動超概略

最近全然ネタをメモってないっす・・・
とりあえず昔(と言っても半年位前)に書いたネタで
イケそうな奴をちょこちょこっと公開します。
今回はChromeExtensionsネタですが、
Google先生は変化のスピードが尋常じゃないので、
もしかしたら今はもう通用しないかもしれません。
ネタメモをほぼそのままコピペなので始まりが唐突です。
書いた当時はChromeExtensionsを触っていて、
contents.jsとbackground.html間のやりとりを
追いかけた時のメモです。

onConnectの挙動超概略


まずはコンテントスクリプトから

var port = chrome.extension.connect({name:"test"});

でバックグラウンドページに対してラブコールを送る
(ちなみにここで引数として渡してるname:"test"で
portの名前が決まる。今回のコードでは"test"になる。)

バックグラウンドページは

chrome.extension.onConnect.addListener(function(port) {});

この関数がコンテントスクリプトからのラブコールを受け取る受け口を用意する。
ラブコールを受け取る受け口の中でさらに

port.onMessage.addListener(function(msg){});

を宣言しておく。これが実際にラブコールの応酬をやり取りする関数になる。

全体の流れとしては

コンテントスクリプトでonConnectしてバックグラウンドページに対しての道を開ける。

道が開いたらコンテントスクリプトからport.postMessge({key:"value"});
で値を送信する。コンテントスクリプトから値が送信されたら、
バックグラウンドページは
onConnect.addListenerの中で宣言している
port.onMessageでコンテントスクリプトのpostMessageを受け取る。
んでバックグラウンドでやりたい処理(まぁ基本的にはXHR的な処理だと思うけど)
ゴニョゴニョやったらその結果をport.postMessage({key:"value"});
でコンテントスクリプトに返してあげる。
んでコンテントスクリプト側での
port.onMessage.addListener
で送信されたデータを受け取る。
もらったデータを受け取ってコンテントスクリプト内で
やりたいことをゴニョゴニョやるって寸法ですね。


最初はconsole.logの追い方がわからなかったのもあるんですが、
個人的にはコンテントスクリプト側もバックグラウンド側も
送受信に使う関数名が一緒なのがちょっと理解に時間を要した原因かも。
だからといって変えられる訳でもないんですけど。


とりあえず冒頭で紹介した、動きの追い方を把握すれば難なく理解できると思います。
console.logの嵐でね!

0 コメント:

コメントを投稿