chrome.runtime.sendMessageでメッセージ通信

chrome.runtime API を使うと、background page からデータを取得したり、イベントを listen してレスポンスを返したりできます。chrome extension(chrome拡張)の開発において、chrome.runtime.sendMessage() の API を使って、content scripts から background.js を通して runtime にイベントハンドラを登録する例です。

スポンサーリンク

chrome.runtime.sendMessage()

content_script.js

上記のように、任意の箇所で chrome.runtime.sendMessage() でメッセージを送信する(リクエストを送る)。この時、第一引数に、ハッシュ形式で送信するデータを指定、第二引数にコールバックを指定。第二引数のコールバックの引数(response)に、戻ったレスポンスの結果が入るので、content script 側で任意の処理を行う。ここでは、単に alert させてます。

chrome.runtime.onMessage.addListener()

続いて、background.js ではリクエストを待ち受けてイベントハンドラを addListener します。chrome.runtime.onMessage.addListener() を使う。

background.js

request.type に送られてきたリクエストの type が入っているので、それを switch 文で判定して addListener でイベントハンドラを登録。request.text にそれぞれ名前(Taka, Mike)が入っています。

実際には、イベントハンドラ(hello, night)は、background で行った処理による結果を callback に渡すようにする。JavaScript での非同期プログラミングは、コールバックを多用するので分けがわからなくなりやすいですが、ようやく面白くなってきました。

スポンサーリンク
スポンサーリンク
 
Twitterを使っていますのでフォローお願いたします!ブログの更新情報もつぶやいてます^^
(英語学習用)

Leave Your Message!