オガリア開発チームの浜田です。

1月の後半、寒いですね。
こんな寒い日は鍋にビール。あ、焼肉にマッコリもいいですね～。
バァーッと仕事してザザァーッと帰りましょう。

さて、近頃マルウェア問題で不本意ながら注目を浴びているChromeの拡張機能ですが、
弊社でも絶賛開発中であります。

※この記事は、2014年1月現在のChrome extensions APIに準拠しています。

Chrome拡張機能ではブラウジングに関する様々なアクションができるので
非常に便利なんですが、今回はその中でも「メッセージ通信」について
記事を書かせていただきます。

メッセージ通信とは？

Chrome拡張機能同士を連携させる機能。
現在表示している画面でのイベントをハンドリングし、
それを別のjavascriptで処理させたりできます。

Chrome拡張機能におけるjavascriptは、大まかに

• htmlを用意したページがあり、その中での呼び出し（通常ページ）
• コンテンツ・スクリプト
• イベントページ（＝バックグラウンドページ）

に分かれています。
ポップアップページも通常ページに含まれますね。

そこでやりたくなる

ページを遷移させて、そこにパラメータを渡したい

それを実現してくれるのがメッセージ通信です。
つまり、めちゃめちゃ有用です。
これ無しではChrome拡張は語れません。

では早速サンプルを見てみましょう。

今回は「開いたタブにパラメータを渡す」です。

シーザー.jsからジョジョ.jsへパラメータを送ります。
託すパラメータはもちろんツェペリの魂、人間の魂だッ！！

//タブを作成
chrome.tabs.create({
    url: "jojo.html"
});

//メッセージリスナー
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if (request.name === "Joseph") {
        var response = {data: "ツェペリの魂！！"};
        sendResponse(response);
    }
});

//メッセージ送信
chrome.runtime.sendMessage({name: "Joseph"}, function(response) {
    console.log(response);
});

上記がシーザー.jsとジョジョ.jsのコードです。
まずjojo.htmlを新規タブで開きますので作っておき、
中ではjojo.jsを呼び出すようにしておいてください。

上記コードの流れとしては、
caesar.jsでjojo.htmlのタブを作成
↓
jojo.htmlからjojo.jsがロードされたら
sendMessage()でメッセージを送信。
↓
caesar.jsでメッセージを受け取ったら、
レスポンスとしてツェペリの魂を返却しています。

— ポイント —
今回のポイントは、
・メッセージ通信で渡すパラメータはjson文字列であること
・メッセージ送信先は指定しない
という事です。
特にメッセージの送信先については、アクティブなjavascript
全てに送られているため指定しないというGoogleの仕様です。

そのため、シーザー.jsのリスナーではパラメータをチェックし、
ジョジョからの送信の場合のみ処理を行う事としています。

— 注意点 —
今回の注意点は、
シーザー.jsでジョジョ.htmlタブを生成し、
“シーザー.jsからはメッセージを送信しない”という事です。
tabs.create()の直後ではjojo.jsの読み込みが完了していないため、
タブ生成⇒メッセージ送信の流れができないのです。
以上が基本的なメッセージの送信になります。

コンテンツ・スクリプトにメッセージの送信を行う時は
送信先としてタブIDを指定するのですが、それはまた
別の記事として書かせていただきます。

最後まで読んでいただきありがとうございます！！！

Pocket

Tweet