Come interagire con background.js dal popup?

Question

C'è un modo per passare le informazioni tra il popup.html (o popup.js) e uno script in background?

Vorrei che il popup visualizzasse le informazioni dall'account di un utente o consentisse loro di accedere, ma hanno background.js che gestisce l'autenticazione e altra logica. Ho dichiarato background.js nel manifest, ma sembra che non ci sia alcuna indicazione che venga usato del tutto.

Edit: Se sto andando tutto sbagliato e c'è un modo migliore per farlo, sarebbe fantastico.

Answer 1

Utilizzare chrome.extension API.

È possibile inviare richieste avanti e indietro o utilizzare ancora meglio una porta per la comunicazione continua.

L'esempio che fornisco creerà una comunicazione bidirezionale tra la finestra popup e la pagina di sfondo che si connettono quando il popup è aperto.

Basta creare un file socket.js incluso nella pagina di sfondo e nella pagina popup. Poi su ciascuna si può semplicemente dichiarare:

new Socket(); 

Qui è l'attuazione di 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. 
      } 
     }); 
    }); 
}; 

assicuratevi di fare il metodo generico chiama nel lavoro messaggio listener per voi. Mi piace il formato che ho dato sopra: è molto robusto. Per inviare messaggi avanti e indietro semplicemente inviare alla presa:

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

Quindi, se questo fosse eseguito dalla pagina popup poi lo sfondo della pagina chiamerei:

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

Per me questo è un posto molto bello oggetto javascript riutilizzabile. È anche possibile aggiungere funzioni di prototipo specifiche se si desidera - in questo modo la sua ancora più facile per inviare messaggi:

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

ora tutto quello che ho da dire è:

socket.sendOneTwo(); 

Answer 2

Si noti che lo sfondo della pagina ed il popup live nello stesso processo (il processo di estensione), in modo che una pagina possa ottenere la finestra DOM dell'altro e quindi chiamare le funzioni o impostare direttamente le variabili. Ad esempio, il pop-up può chiamare chrome.extension.getBackgroundPage per modificare lo sfondo:

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

e lo sfondo della pagina può chiamare chrome.extension.getViews per ottenere il popup:

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

Un altro modo per impostare le variabili condivise è quello di utilizzare DOM tradizionale API, poiché ogni estensione ha un'origine falsa (come "eakjnniffhfegdpfehmnpcmjiameincp"). Pertanto, quando si modifica, document.cookie o IndexedDB sullo sfondo, può essere letto nuovamente nel popup.

Detto questo, è possibile continuare a utilizzare le API di trasmissione dei messaggi anche all'interno delle pagine nel processo di estensione, poiché potrebbe rendere il codice più uniforme. Il passaggio dei messaggi è l'unico modo per comunicare con gli script di contenuto.

Answer 3

Per scopi di debug solo Trovo che questo sia piuttosto comodo nel popup JS:

console = chrome.extension.getBackgroundPage().console