¿Cómo interactuar con background.js desde la ventana emergente?

Question

¿Hay alguna manera de pasar información entre popup.html (o popup.js) y un script de fondo?

Me gustaría que la ventana emergente muestre información de la cuenta de un usuario o les permita iniciar sesión, pero haga que background.js maneje la autenticación y otra lógica. Tengo background.js declarado en el manifiesto, pero parece que no hay ninguna indicación de que se esté utilizando en absoluto.

Editar: Si estoy haciendo todo mal y hay una mejor manera de hacerlo, también sería genial.

Answer 1

Uso del chrome.extension API.

Puede enviar solicitudes de ida y vuelta o incluso mejor utilizar un puerto para la comunicación continua.

El ejemplo que proporciono creará una comunicación bidireccional entre la ventana emergente y la página de fondo que se conectan cuando se abre la ventana emergente.

Simplemente cree un archivo socket.js que se incluye tanto en la página de fondo como en la página emergente. Luego, en cada puede declarar:

new Socket(); 

Aquí es la implementación de 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. 
      } 
     }); 
    }); 
}; 

asegurarse de que hace el método genérico de llamadas en el trabajo de escucha de mensajes para usted. Me gusta el formato que he dado arriba, es muy robusto. Para enviar mensajes de ida y vuelta simplemente publicarlos a la toma:

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

Así que si esto hubiera ejecutado desde la página emergente entonces la página de fondo llamarían:

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

Para mí este es un muy buen objeto javascript reutilizable. Incluso puede agregar funciones prototipos específicos si desea - de esta manera sus aún más fácil para enviar mensajes:

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

ahora todo lo que tiene que decir es:

socket.sendOneTwo(); 

Answer 2

Tenga en cuenta que la página de fondo y la ventana emergente en vivo en el mismo proceso (el proceso de extensión), por lo que una página puede obtener la ventana DOM de la otra y luego llamar funciones o establecer variables directamente. Por ejemplo, la ventana emergente puede llamar chrome.extension.getBackgroundPage para modificar el fondo:

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

y la página de fondo puede llamar chrome.extension.getViews para obtener el emergente:

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

Otra forma de establecer las variables compartidas está utilizando DOM tradicional API, ya que cada extensión tiene un origen falso (como "eakjnniffhfegdpfehmnpcmjiameincp"). Así que cuando se modifica localStorage, document.cookie o IndexedDB en el fondo, que se puede leer de nuevo en la ventana emergente.

Dicho esto, es posible que desee utilizar el mensaje pasando API incluso dentro de las páginas en el proceso de extensión, ya que puede hacer que su código sea más uniforme. La transmisión de mensajes es la única forma de comunicarse con las secuencias de comandos de contenido.

Answer 3

Para los propósitos de depuración solo Me parece muy bien en medio emergente JS:

console = chrome.extension.getBackgroundPage().console