Operaの拡張機能：メッセージング

エントリー

拡張機能の助けを借りて、新しい印象的な機能を作成してOperaブラウザーに追加できます。他の記事で述べたように、Operaの拡張機能には、バックグラウンドスクリプト、埋め込みスクリプト、およびポップアップが含まれています。この記事では、これら3つのコンポーネント間でデータを確実に交換する方法について説明します。

続行する前に、3つの拡張機能をダウンロードし、 Opera 11 alpha browserにインストールする必要があります。これらの拡張機能のコードを使用してトピックを検討します。

バックグラウンドスクリプトと埋め込みスクリプトの間のデータ交換を示す拡張機能の例
バックグラウンドスクリプトとポップアップの間のデータ交換を示す拡張機能の例
ポップアップウィンドウと埋め込みスクリプトの間のデータ交換を示す拡張機能の例（バックグラウンドスクリプトの少しの助けを借りて）

バックグラウンドスクリプトと埋め込みスクリプト間のデータ交換

OperaはpostMessage（）メソッドを使用してメッセージを送信します。バックグラウンドスクリプトから埋め込みスクリプトにデータを送信する場合は、バックグラウンドスクリプトで次のコードを記述する必要があります。

opera.extension.broadcastMessage("Hello there");

メッセージを送信した後、挿入されたスクリプトはそれを受け入れる必要があります。これは次のように実行できます。

 var thecatch; opera.extension.onmessage = function(event) { thecatch = event.data; // event.data       "Hello there" } }

とても簡単です。上記のコードでは、バックグラウンドスクリプトはbroadcastMessageメソッドを使用して埋め込みスクリプトにデータを送信し、埋め込みスクリプトはそれらを受信します。データを受信した後、catch変数に保存します。 broadcastMessageメソッドを使用して、すべての埋め込みスクリプトとポップアップにメッセージを送信するため、このメソッドは慎重に使用する必要があることに注意してください。通常、postMessageメソッドまたはメッセージチャネルを使用して、1つのポップアップウィンドウまたは埋め込みスクリプト（拡張機能に含まれるスクリプト）のみにアクセスする必要があります。

これを最初のテストケースで示します。

バックグラウンドスクリプトには、setupConnection関数を呼び出すロードイベントフックがあります。エラーコンソール（[ツール]> [詳細設定]> [エラーコンソール]）でopera.postErrorメソッドの出力を確認できます。

 window.addEventListener("load", setupConnection, false); function setupConnection() { //    ,      opera.extension.onconnect = function(event) { //   ,     (     ) event.source.postMessage("something"); //    Error Console opera.postError("sent message to injected script"); } //   opera.extension.onmessage = function(event){ //   (   )  Error Console opera.postError("This is what I got from injected script: "+event.data); } }

次のコードに注意してください。

 opera.extension.onconnect = function(event) { event.source.postMessage("something"); opera.postError("sent message to injected script"); }

onconnectメソッドは、ドキュメントで埋め込み拡張スクリプトがアクティブ化され、バックグラウンドスクリプトに接続されると実行されます。つまり、挿入されたスクリプトがロードされるとすぐに、onconnectメソッドが実行されます。

バックグラウンドスクリプトのonconnectハンドラーは、event.sourceオブジェクトを介して挿入されるスクリプトへのリンクを取得します。 event.source.postMessage（）メソッドを使用して文字列「something」を送信することで示されるように、このメッセージポートは埋め込みスクリプトとの直接通信に使用できます。途中で、エラーコンソールに小さな通知を送信して、何が起こっているかを追跡します。

バックグラウンドスクリプトをしばらくそのままにして、実装されているスクリプトに注意を向けます。

 opera.extension.onmessage = function(event){ //    . var message = event.data; opera.postError("Background script sent: " + message); //   . var reply = "Background script's message only had " + (message ? message.length : 0) + " characters."; event.source.postMessage(reply); };

onmessageメソッドは、埋め込みスクリプトがメッセージを受信すると呼び出されます。メッセージの内容をメッセージ変数に保存します。次に、opera.postErrorメソッドを使用して、エラーコンソールに通知を送信します。

メッセージの受信を確認するために、event.sourceオブジェクトを使用してバックグラウンドスクリプトに戻り応答を送信します。要確認：event.sourceは常にメッセージのソースを指します。

そのため、埋め込みスクリプトによるメッセージの受信方法と、応答をバックグラウンドスクリプトに送信する方法を確認しました。

次のステップは、バックグラウンドスクリプトでメッセージを受信して処理することです。バックグラウンドスクリプトに戻り、別のコードを見てみましょう。

 //   opera.extension.onmessage = function(event){ //   (   )  Error Console opera.postError("This is what I got from injected script: "+event.data); }

ここで、メッセージを受信した時点で、スクリプトはメッセージの内容とともにその受信についてエラーコンソールに通知を送信します。

それが拡張機能で起こることです：

バックグラウンドスクリプトは、埋め込みスクリプトにメッセージを送信します
挿入されたスクリプトはメッセージを受信し、メッセージの内容を含む通知をエラーコンソールに送信します
挿入されたスクリプトは応答を返します
バックグラウンドスクリプトは応答を受信し、応答の内容を含む通知をエラーコンソールに送信します

拡張機能をインストールした場合（埋め込みスクリプトが適用されるようにページを更新する場合）、エラーコンソールに移動します。図に示すメッセージが表示されます。 1：

図1 ：拡張機能から送信されたエラーコンソールと通知。

バックグラウンドスクリプトと埋め込みスクリプトがメッセージを送受信する方法を調べました。次に、ポップアップウィンドウを使用してこれを行う方法を見てみましょう。

ポップアップスクリプトとバックグラウンドスクリプト間のメッセージング

この章では2番目の拡張例を使用します。 includeフォルダーとその中に埋め込まれたスクリプトはないことに注意してください-これは単なるバックグラウンドスクリプト、htmlファイル、config.xml、およびアイコンです。

前の記事から、buttonなどのUI要素を作成する方法を既に知っているので、これに焦点を合わせません。 background.jsの次のコードを見てみましょう。

 opera.extension.onconnect = function(event){ event.source.postMessage("sending something"); opera.postError("sent message to popup"); }

前の例からわかるように、バックグラウンドスクリプト（この場合はポップアップウィンドウ）に何かが接触すると、このコードが実行されます。この関数は、エラーコンソールでポップアップウィンドウに「何かを送信しています」メッセージと「ポップアップに送信されたメッセージ」通知を送信します。

次に、ポップアップページを見てください。

 <script> window.addEventListener("load", function(){ opera.extension.onmessage = function(event){ event.source.postMessage("do whatever you want with this message"); opera.postError("sent from popup to background script"); } }, false); </script>

ここでは、着信メッセージをインターセプトし、応答をソースに送り返します。また、通常どおり、エラーコンソールに通知を送信します。これで、ポップアップウィンドウがメッセージを受け取り、バックグラウンドスクリプトに回答を送信します。バックグラウンドスクリプトでこの答えを取得するだけです。

再びbackground.jsにアクセスして、コードを確認します。

 opera.extension.onmessage = function(event){ opera.postError("This is what I got from injected script: " + event.data); }

ここで、バックグラウンドスクリプトはメッセージをインターセプトし、メッセージの内容を含む通知をエラーコンソールに送信します。ご覧のとおり、埋め込みスクリプトの場合と同じコードを使用できます。

それが拡張機能で起こることです：

バックグラウンドスクリプトはポップアップにメッセージを送信します
ポップアップウィンドウがメッセージを受信し、メッセージの内容を含む通知をエラーコンソールに送信します
ポップアップは応答を送り返します
バックグラウンドスクリプトは応答を受信し、応答の内容を含む通知をエラーコンソールに送信します

すべては前の例とまったく同じ方法で行われますが、唯一の違いは埋め込みスクリプトがなく、ポップアップウィンドウにアクセスすることです。

拡張機能をインストールした場合は、ブラウザーパネルのボタンをクリックしてメッセージングを開始し、エラーコンソールを開いて図に示すものを表示します。 2：

図2 ：エラーコンソールと拡張機能から送信された通知。

ポップアップと埋め込みスクリプト間のメッセージング

次に、ポップアップウィンドウと埋め込みスクリプトの間でデータを交換する方法を見てみましょう。バックグラウンドスクリプトは接続の初期化にのみ使用され、ポップアップウィンドウと埋め込みスクリプトは直接通信します。

これを実現するには、通信チャネルを作成します。拡張機能でのメッセージングの基礎であるHTML5のクロスドキュメントメッセージング仕様で、通信チャネルの詳細を学ぶことができます。

3番目の拡張例でこれを見ていきますので、テキストエディターを起動してコードを見てください。まず、バックグラウンドスクリプトを見てください。ボタンやポップアップの追加など、おなじみの要素に気付くでしょう。もっと興味深いサイトに行きましょう。

最初に、後で使用するグローバル変数ポートを定義します。 onconnectハンドラーを見てみましょう。

 opera.extension.onconnect = function( event ){ if( port ) event.source.postMessage( "Respond to the port", [port] ); }

バックグラウンドスクリプトへの接続時に、「ポートに応答」というメッセージが送信されます。メッセージを送信するポートを指定しますが、ポート変数はまだ重要ではないため、メッセージはそのまま送信されます。

次に、実装されているスクリプトを見てみましょう。

 var channel = new MessageChannel(); opera.extension.postMessage( "Respond to this immediately", [channel.port2] );

ここで、新しいメッセージチャネルを作成します。メッセージチャネルには2つのポートがあり、これらの2つのポートを介してデータを送受信できます。ここでは、2番目のポートを介してデータを送信し、最初のポートを介して受信します。次に、メッセージチャネルの2番目のポートを介してpostMessage（）メソッドを使用してメッセージを送信します。

バックグラウンドスクリプトに戻りましょう。

 opera.extension.onmessage = function( event ) { if (event.ports) port = event.ports[0]; }

バックグラウンドスクリプトは、埋め込みスクリプトからメッセージを受け取ります。これで、2番目のチャネルポートへのリンクはevent.ports [0]オブジェクトを介してアクセスでき、ポート変数に格納されます。これで、バックグラウンドスクリプトでポップアップウィンドウを接続する準備ができました。これが発生すると、onconnectメソッドが再度呼び出されます。

 opera.extension.onconnect = function( event ){ if( port ){ event.source.postMessage( "Respond to the port", [port] ); } }

現在、ポート変数の値は空ではありません。メッセージチャネルポートへのリンクが含まれています。

ポップアップファイルを見てください。

 opera.extension.onmessage = function( event ){ if( event.ports ){ opera.postError( "Responding to port" ); event.ports[0].postMessage( "Hi from popups side!" ); } }

ポップアップウィンドウはメッセージを受け取り、ポートへのリンクが含まれている場合、エラーコンソールに通知を送信し、さらに重要なこととして、指定されたポートを介して応答を送信します。実装されたスクリプトでこのメッセージを受信するだけです。実装されたスクリプトには、次のコードがあります。

 channel.port1.onmessage = function( event ){ opera.postError("Here is what i got in the injected script for port1: " + event.data); }

挿入されたスクリプトは、メッセージチャネルのport1でリッスンします。メッセージを受信すると、ポップアップウィンドウから受信したメッセージの内容とともにエラーコンソールに通知を送信します。

それが拡張機能で起こることです：

挿入されたスクリプトがロードされています。
onconnectメソッドはバックグラウンドスクリプトで実行され、埋め込みスクリプトにメッセージを送信します。
挿入されたスクリプトはメッセージを受信し、メッセージチャネルを作成します。
挿入されたスクリプトは、2番目のポートへのリンクとともにメッセージをバックグラウンドスクリプトに送信します。
バックグラウンドスクリプトはメッセージを受信し、ポートへのリンクを保存します。
ポップアップウィンドウがバックグラウンドスクリプトに接続します。
onconnectメソッドが再度実行されますが、今回は、挿入されているスクリプトのポートへのリンクとともに戻りメッセージを送信します。
ポップアップウィンドウはメッセージを受け入れ、そのポートへのリンクを確認します。ある場合、このポート（これは通信チャネルのポート2）に戻りメッセージを送信します。
挿入されるスクリプトはメッセージを受け取ります。その後、彼はポップアップウィンドウから受け取ったテキストと共にエラーコンソールに通知を送信します。

このシナリオでは、バックグラウンドスクリプトは仲人として機能します。最初に、彼女は最初のメンバー（挿入されるスクリプト）に連絡します。参加者は自分の番号（2番目のポート）を仲人に渡し、仲人はそれを保存します。別の参加者（ポップアップウィンドウ）が仲人に連絡します。これが発生すると、仲人は最初の参加者（埋め込みスクリプト）の番号を2番目の参加者（ポップアップウィンドウ）に送信します。これで、2人の参加者間ですべてのコミュニケーションが直接行われ、仲人が方程式から削除されます。

まとめると

onconnectおよびonmessageハンドラーでpostMessageメソッドを使用する方法を学んだ後、拡張機能のさまざまな部分間でデータを交換するのは非常に簡単です。メッセージチャネルを使用してデータを転送することもできます。この方法は、ポップアップウィンドウと埋め込みスクリプトの間でデータを転送する場合に必要です。この記事では、バックグラウンドスクリプトと埋め込みスクリプトの間、バックグラウンドスクリプトとポップアップウィンドウの間、ポップアップウィンドウと埋め込みスクリプトの間の3つのシナリオでデータ転送に少し光を当てます。

APIリンク

バックグラウンドスクリプト関連のメソッド

実装されているスクリプトに関連するメソッド

ポップアップメソッド

All Articles