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

スポンサーリンク

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

【お知らせ】 英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください!
画像付き英語辞書 Imagict | 英単語をイメージで暗記
【開発記録】
英単語を画像イメージで暗記できる英語辞書サービスを作って公開しました
スポンサーリンク

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 での非同期プログラミングは、コールバックを多用するので分けがわからなくなりやすいですが、ようやく面白くなってきました。

スポンサーリンク
 
スポンサーリンク

Leave Your Message!