2012-03-02 24 views
9

popup.html(またはpopup.js)とバックグラウンドスクリプトの間に情報を渡す方法はありますか?ポップアップからbackground.jsとやり取りする方法は?

私は、ユーザーのアカウントからの情報を表示したり、ログインを許可したり、background.jsで認証やその他のロジックを処理させたいと考えています。私はマニフェストで宣言されたbackground.jsを持っていますが、それがまったく使われているという印はないようです。

編集:これについてすべて間違っていて、これを行うにはより良い方法があるとすれば、それも素晴らしいでしょう。

+0

関連:[バックグラウンド・コンテキストでスクリプト(バックグラウンドスクリプトは、ブラウザアクション、ページアクション、オプションページ、など)間の通信します] (//stackoverflow.com/q/41420528) – Makyen

+0

[chrome拡張子のpopup.jsとbackground.jsの通信方法](https://stackoverflow.com/questions/13546778/how-to-communicate) -pop-up-js-and-background-js-in-chrome-extension) – JerryGoyal

答えて

9

chrome.extension APIを使用してください。

要求を前後に送信したり、連続した通信にポートを使用することもできます。

この例では、ポップアップを開いたときに接続するポップアップとバックグラウンドのページ間に双方向通信を作成します。

バックグラウンドページとポップアップページの両方に含まれるsocket.jsファイルを作成するだけです。そして、それぞれの上に、あなただけの宣言できます

new Socket(); 

をここsocket.jsの実装です:

var Socket = function() { 
    window.socket = this; 

    this.port = chrome.extension.connect({name:"popupToBackground"}); 

    chrome.extension.onConnect.addListener(function(port) { 
     if(port.name == "backgroundToPopup") {} 
      else if(port.name == "popupToBackground") { 
      window.socket.port = chrome.extension.connect({name:"backgroundToPopup"}); 
     } 
     else { 
      return; 
     } 

     port.onMessage.addListener(function(msg) { 
      try { 
       window[msg.namespace][msg.literal][msg.method].apply(this, msg.args); 
      } 
      catch(error) { 
       // your failed action goes here. 
      } 
     }); 
    }); 
}; 

はあなたのためのメッセージ・リスナーの作業でジェネリックメソッドの呼び出しを行うことを確認してください。私は上記のフォーマットが好きです。非常に堅牢です。ただソケットにそれらを投稿する前後にメッセージを送信するには:これは、ポップアップページから実行された場合

socket.post({ namespace: "myNamespace", 
       literal: "myLiteral", 
       method: "myMethod", 
       args: ["argOne", "argTwo"] 
      }); 
}); 

それでは背景ページは呼び出します。

window.myNamespace.myLiteral.myMethod(argOne, argTwo); 

を私に、これは非常にいいです再利用可能なjavascriptオブジェクト。あなたが好きならばあなたも、特定のプロトタイプの機能を追加することができます - このようにその送信も簡単メッセージ:

Socket.prototype = { 
    sendOneTwo: function() { 
     socket.post({ namespace: "myNamespace", 
         literal: "myLiteral", 
         method: "myMethod", 
         args: ["argOne", "argTwo"] 
    }); 
}; 

今、あなたが言っているすべては次のとおりです。

socket.sendOneTwo(); 
27

なお、背景ページとポップアップは同じプロセス(拡張プロセス)で生きているので、あるページは他のページのDOMウィンドウを取得して関数を呼び出したり、変数を直接設定したりすることができます。たとえば、ポップアップが背景変更するchrome.extension.getBackgroundPageを呼び出すことができます。

chrome.extension.getBackgroundPage().variable = 42; 

を背景ページがポップアップを取得するためにchrome.extension.getViewsを呼び出すことができます共有変数を設定する

var popups = chrome.extension.getViews({type: "popup"}); 
if (0 < popups.length) 
    popups[0].variable = 42; 

もう一つの方法は、伝統的なDOMを使用することです各エクステンションは偽の原点を取得しているため(例: "eakjnniffhfegdpfehmnpcmjiameincp")、APIを使用しています。だから、localStoragedocument.cookie、またはIndexedDBをバックグラウンドで変更すると、ポップアップでそれを読み取ることができます。

つまり、コードをより統一的にする可能性があるため、メッセージ転送APIを拡張プロセスのページ内で使用したいことがあります。メッセージの受け渡しは、コンテンツスクリプトと通信する唯一の方法です。ただ、デバッグ目的のために

3

私はポップアップJSでこのかなり便利見つける:

console = chrome.extension.getBackgroundPage().console 
関連する問題