ただそれを取って背景ページに戻ることはできません

クロスドメインセキュリティポリシーがすべてです。 他のタブのページまたは拡張機能のバックグラウンドページへのアクセスは、他のドメインのページと見なされ、他の人のウィンドウやフレームと同様に、スクリプト環境への直接アクセスに制限があるため、意図的に制限されます。 メッセージメカニズムは、フレーム間のクロスドメインアクセス、および拡張ページ（バックグラウンド、設定、ポップアップなど）へのアクセスと同様に「保存」されます。



ブラウザ拡張機能では、Google Chrome（およびChromium）が機能上最も重要です-バックグラウンドページ。 chrome-extensionという形式の特別なURLがあります。// ciegcibjokpkcklhgbpnmnikpkmkhbjk /。ここで、長いドメイン名はブラウザーの腸で作成されたランダムな名前であり、OSサービスフォルダー内の拡張ディレクトリも参照します。 コンテンツスクリプト（ブラウザページで実行されるユーザースクリプトに類似）から、ファイルおよび拡張機能画像にアクセスできます。 しかし、多くの機能を実行することは不可能です。そのパスはバックグラウンドページにあります。実際のドメイン名のグループに関連するストレージを配置します。 拡張機能全体に共通の拡張機能設定を保存します。 Mordorのバックグラウンドページにアクセスするだけです。 ただし、URLだけではできません。

この説明は、Chromeのドキュメントのページにはありません。 むしろ存在しますが、「他のいくつかの」メソッドとオブジェクトのために、実際には修正されるまで、それは意味しません。 説明したメッセージングオブジェクトの動作は、StackOverflowへの応答のいくつかの例で確認されています。 毎回異なる例で答えを探すのは骨が折れるので、この混乱を終わらせるために、ここで1か所に集めてみましょう。 ダイレクトコールバックとコールバックの4つの組み合わせはすべて列挙されているため、目の前には常にそれらの動作パターンがあります。



テストとデモを行うには、3つのファイル（manifest.json、script.js、background.js）をコピーまたは作成し、Chromeで開発者モードでテスト拡張機能を作成し、コンソールのメッセージを2ページ（埋め込みスクリプトスクリプトのあるブラウザーウィンドウ）で確認する必要があります。 jsおよびbackground（background.jsバックグラウンドコンソールを見る-chrome：// extensions /の[ビューモードを確認：_generated_background_page.html]リンクをクリックしてください）。 記事のコードの2つのフラグメントをページに配置して実行すると、既製の拡張機能でも同じことが機能します。



Habréでは、2012年11月にhabrahabr.ru/post/159145で同様の問題が適用目的で解決されました。暗黙の修正と使用と同じ知識源です。 ロシア語のインターネットでは、同様の問題が2012年6月の記事で説明されています。GoogleChromeブラウザーの拡張スクリプトで実行されるという事実を考慮して、そのような問題を解決するために使用されるメカニズムを説明します。

同じドメインのウィンドウとフレームのページ（別のスクリプト環境のウィンドウなど）に直接アクセスできる場合、バックグラウンドページ、および他のタブとブラウザーページは、他のドメインのページとして機能します。 メッセージを送信して、弱く接続されたプロシージャのパターンを実現し、 シリアル化できるオブジェクトのみを送信できます。DOM、環境、その他の複雑なオブジェクトは送信できません。



背景ページのために努力することがあります。 スクリプトまたはユーザースクリプトでは考えられない機能を実行します。 すべてのページに共通のメモリだけではありません。 developer.chrome.com/extensions/api_index.htmlで説明されている多くのインターフェースの実装があり、将来さらに多くのインターフェースが期待されています。 わずかなメッセージインターフェースには、コールバック関数があり、与えられた場合、呼び出し側の関数の環境側で実行されますが、結果パラメーターは反対側から渡されます。



これらはすべて、JavaScriptのpostMessage環境のインターフェイスをわずかに変更したもので、クロスドメインアクセス規制の問題を解決するためにブラウザーで作成されたのはそれほど前ではありません。 これは通常、ウィンドウとフレームの間でスクリプトを通信するために使用され、ページのドメインが異なる場合の唯一の便利な通信手段です。 以前は、この問題を解決するために、使用されているオブジェクトのキーワードに従って、コード名「window.name」の下で「松葉杖」が使用されていました。 現在は動作しますが、複雑であり、代わりのpostMessageメソッドと比較して明らかに遅いです。 通常のpostMessageメカニズムは、Chrome拡張機能のデータ交換のメカニズムに基づいているため、どのように機能するかを思い出してください。

PostMessageインターフェース（クロスブラウザー、IE8 +）

メッセージの開始ページは、カスタムイベント「メッセージ」を作成します。メッセージを送信します。これは、そのドメインからではなく、アクセスしたいものから行います。 （IE8には制限があります-フレームの親ウィンドウのみにアクセスします）。

otherWindow.postMessage(message, targetOrigin); //message -    __  //targetOrigin -     otherWindow,  " "
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ドメイン名が推測されると、メッセージが送信されます。 otherWindowウィンドウで受信するには、いくつかの条件を満たす必要があります。

1）イベントハンドラーがあります。

2）ハンドラーは送信ドメインからのメッセージを「待機」し、2番目の引数でこれを確認します。

 window.addEventListener('message', function(event){ //  if(event.origin !== 'URL_-') // , , 'http://example.org' return; ...// event.data,  message  .postMessage ...// event.source - -  ,  //       }, false);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ウィンドウから背景ページにメッセージを送信する（Chrome）

拡張機能では、コールバックを追加し、ドメインチェックを自動化することにより、postMessageフレームワークが若干再設計されました。 レンガからメッセージを収集する場合よりも便利になりました。 最後に、利用可能なツールを使用して、次のsendMessageまたはsendRequestに魔法がないことを示す標準のpostMessageのコードを示します。これは単なるシェルです。 しかし、特別なプロトコル「chrome-extension：// *」でフレームを作成するための拡張権限が不十分であるため、postMessageを完了できませんでした。これについては、マニフェストファイル形式も何も認識せず、問題は官僚的な遅延にinれました 。 これは、なぜ彼らが交換機能を考え出さなければならなかったのかという質問に対する答えです。

上記の例は、 Chrome拡張機能のインストールページ spmbt.kodingen.com/bgMessageXmp/index.htmから動作を確認、テスト、調査できます。 拡張機能がインストールされていない場合、5つのリンクをクリックすると、拡張機能がないことが示されます。 インストール後（拡張子内-必要なファイルは3つのみ）、クリックすると以下に説明する例を実行します。



インストール方法 ：1）アーカイブをダウンロード、2）解凍（またはすぐにインストール）、3）Chromeで：//拡張機能/「開発者モード」に移動、4）「展開された拡張機能をダウンロード...」を実行し、アーカイブからディレクトリを選択、 5）拡張機能のダウンロード元のページを更新します。 5つのリンクでサンプルを実行できます。 実行後、chrome：// extensions /を使用してスクリプトを削除するだけで十分です。 このサンプルスクリプトは、拡張機能をテストまたは作成するためのフレームワークとして使用できます。 この記事では、テキストからスクリプトをデバッグし、タイプミスを排除するのを手伝いました。

例1

タブからバックグラウンドページに送信してそこで終了する必要がある場合、単純なメッセージ形式が使用されます。

  chrome.extension.sendMessage('   ');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

メッセージはバックグラウンドまたは他のページで受け入れられます：

 chrome.extension.onMessage.addListener(function(request){ if(request=='   ') //,        console.log('1. : ', request); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

例2

この機能のペアは、フィードバックの交換に適合しています。 スクリプトからパラメーターを追加します。

 chrome.extension.sendMessage(' backMsg', function(backMessage){ console.log('2.    :', backMessage); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

背景ページから：

 chrome.extension.onMessage.addListener(function(request, sender, f_callback){ if(request==' backMsg'){ //,        console.log('2.   : ', request); f_callback('backMsg'); //  } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

f_callback-（バックグラウンドページではなく） スクリプトで実行されますが、バックグラウンドでパラメーターが指定されています。

送信者オブジェクトの形式は次のとおりです。

 { active: true highlighted: true id: 34 //id  ()  incognito: false index: 0 pinned: false selected: true status: "complete" title: "HabrAjax by spmbt" //document.title url: "http://spmbt.kodingen.com/habrahabr/habrAjax/index.htm" //location.href windowId: 1 //id   }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

したがって、メッセージの送信者について彼から何かがわかります。 送信者からの値は使用しませんが、メッセージがどのタブまたはウィンドウから来たかを追跡し、他のタブにある場合は他のコンテンツスクリプトに変更を送信することができます。

（例2の終わり）



より複雑なものを渡す必要がある場合-文字列の代わりにハッシュまたは配列を埋め込むことは問題ありません。 引数のセットの代わりにハッシュを渡す-一般に、より高度な形式の交換-は1つの引数を取り、キーで自己文書化するため読みやすくなります。ハッシュ値は要素ごとに再配置および削除されます-順序を覚える必要がなく、値が欠落する心配がありません



引数をハッシュに置き換える手法では、すべてに3つの引数で十分であり、それぞれがその役割を果たします。 さらに進むと、キー{request：...、sender：...、callback：f（）{...}};を持つ1つの引数に置き換えることができます。 なぜそうしなかったのですか？ どうやら、彼らは3つの議論を考慮した-これは非常に紳士的な制限であり、覚えて（そしてさらに解読するために）恥ずかしいことではありません。 さらに、シンボルは自己文書化に費やされます。 引数が2〜3の場合、選択肢は位置引数に傾いています。



たとえば、コマンド名だけでなく、データを含むハッシュも送信する必要があります。 スクリプトから記述します。

 var data ='From page '; chrome.extension.sendMessage({cmd:'exec1', h:{data1: data, dataX: d+1}, function(backMessage) console.log(backMessage); }});
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

背景ページから：

 chrome.extension.onMessage.addListener(function(request, sender, callback){ if(request.cmd =='exec1'){ callback('backMsg'); //  console.log('Tis message in background page printed after' +' receive of data1 = ', request.h.data1, '; URL= ',sender.url); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

コンテンツページから頻繁に繰り返される呼び出しを短縮します。

 var inBg = function(cmd, h, f_back){ h.cmd = cmd; chrome.extension.sendMessage(h, f_back); }); ... inBg('exec1', {data1: data, dataX: d+1}, function(){ ... });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

（ 何らかの理由で、 3番目のコールバックは提供されません...管理は2回だけ再デプロイされます。）

背景ページからウィンドウにメッセージを送信する（Chrome）

例3

逆のタスクがある場合、バックグラウンドページから、たとえばアクティブなタブにメッセージを送信します。

バックグラウンドで次のように記述します。

 chrome.tabs.getSelected(null, function(tab){ //   ,     chrome.tabs.sendRequest(tab.id,{msg:"msg01"}); //   });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

コンテンツ内：

 chrome.extension.onRequest.addListener(function(req){ //   background console.log('3.   :', req.msg); //   });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

最初のケースではsendMessage-onMessageペアを使用し、2番目のケースではsendRequest-onRequestを使用することが重要ですか？ いいえ、1つのペアからのものである場合、どの方法でも機能します。



例4

逆コールバックでメッセージを送信する必要がある場合、バックグラウンドで次のように記述します。

 var inBack = function(tabId, cmd, h, f_back){ h.cmd = cmd; chrome.tabs.sendMessage(tabId, h, f_back); }; chrome.tabs.getSelected(null, function(tab){ inBack(tab.id,'exec0', {dat:'h'}, function(backMessage){ console.log('4.    : ', backMessage); }); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

コンテンツページで：

 chrome.extension.onMessage.addListener(function(request, sender, callback){ if(request.cmd =='exec0'){ // console.log('4.  :', request.dat); callback('12w3'); } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

あなたが見ることができるように、それは実行されます-ドキュメントに記載されていたが、developer.chrome.com/extensions/messaging.htmlのわずかに異なるオブジェクト（chrome.runtime）に対して、chrome.runtimeはこのタスクでは機能しません-メソッドがありませんsendMessage。

標準postMessageでの送信（失敗）

否定的な結果にもかかわらず、この転送の試みは、 postMessageの存在にもかかわらず、開発者が拡張機能で独自のデータ転送機能を処理しなければならなかった理由を推測します。



コンテンツスクリプトで実行可能な数少ない特別な拡張メソッドの1つはchrome.extension.getURL（ 'path'）です。 拡張リソースへのパスを返します。 それを開くと、拡張リソース（ディレクトリではなく）を取得します-それから画像とテキストを取得します。 ここでは別のドメインが役割を果たします。ページスクリプトに囲まれたテキストを取得するには、クロスドメインAjaxを実行する必要があります。 または、メッセージメカニズムを使用してドメインウォール経由でテキストを受信する方が簡単です。



例5

定義済みのプロトコル（「chrome-extension：」）を使用してドメイン（「// ciegcibjokpkcklhgbpnmnikpkmkhbjk」など）を使用してメッセージを送信します。

 var bgUrl = chrome.extension.getURL(''); console.log(bgUrl); // 
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

しかし、すべてが単純なわけではありません。 コンテンツスクリプトには、バックグラウンドページウィンドウへのアクセス権がありません。 メソッドは次のとおりです。

 chrome.extension.getBackgroundPage();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ただし、アクセスできません。

不明なエラー：「getBackgroundPage」は拡張プロセスでのみ使用できます。 詳細については、コンテンツスクリプトのドキュメントを参照してください。

コマンドーは落胆していません。 簡単に交換するには、フレームを作成する必要があります。 フレームの作成を妨げるものは何もありません。

 var ifr = document.createElement('iframe'); ifr.id ='ifr1'; ifr.src = bgUrl; document.body.appendChild(ifr);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

エラーが発生しました：

chrome-extensionのロードを拒否：// ciegcibjokpkcklhgbpnmnikpkmkhbjk / 。 拡張機能の外部のページでロードするには、リソースがweb_accessible_resourcesマニフェストキーにリストされている必要があります。

マニフェストにアクセス許可を追加します（chrome.extension.sendMessageを使用すると、これは不要になりました）。

「許可」：["chrome-extension：// *"、...]

Chromeでエラーが発生しました：//拡張機能/：

拡張機能をインストールするときに、警告がありました：

権限「chrome-extension：//」が不明であるか、URLパターンの形式が正しくありません。

アクセスが拒否されなかった場合、実行されたままになります。

 ifr.postMessage('Yep', bgUrl.replace(/\/$/,'') );
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そしてバックグラウンドで-

 window.addEventListener('message', function(ev){ console.log('origin: ', ev.origin); },!1);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これで例を終了することができます-他の理由で標準機能を介したアクセスが閉じられたことを示しました-バックグラウンドページをフレームで表示する必要があるためです（明らかに「manifest_version」：2）。 そのため、Chrome拡張機能では、構文の最適化と双方向交換の理由から、特別なメッセージング方法が考案されました。



例は、バックグラウンドページへのメッセージ送信に特別なトリックがないことを示しました。 ただし、拡張機能にはない特別な権限が必要です。 chrome.extensionオブジェクトのメソッドのprivate部分は冷静にこれを行いますが、他のものは提供しません。 （sandbox.htmlでこれを行う必要があります。背景ページを含むフレームを作成できますか。）



テスト拡張機能とテストページをインストールします。