google chrome extension - how - enviando mensaje a la extensión de Chrome desde una página web

how to do a chrome extension

Question

Deseo enviar un mensaje desde la consola de la página web aleatoria a mi extensión de Chrome. chrome.extension.sendMessage no parece funcionar.

Answer 1

Además de @hewigovens, no tengo suficientes puntos para comentar ... Estoy explicando @renatoargh y @sbichenko Si se envía un mensaje desde una página web predeterminada:

1) la página web debe ser citada en el manifiesto. p.ej:

"externally_connectable": {
  "matches": ["http://abcde/abcde/main.aspx*"]
}

2) la background.js (página de fondo) exceptúa la llamada con onMessageExternal, por ejemplo (llamando a una extensión):

var host_name = "com.my_chrome_extension.com";
 chrome.runtime.onMessageExternal.addListener(function(message, sender, sendResponse) {
    chrome.runtime.sendNativeMessage(host_name, {"run":message});
    sendResponse({"success": "success"});
    return true;
});

Answer 2

Aquí hay una cita de la última chrome.runtime.onMessageExternal , es mucho más simple para admitir este tipo de función ahora, así es cómo:

Enviando mensajes desde páginas web

De forma similar a los mensajes de extensión cruzada, su aplicación o extensión puede recibir y responder mensajes de páginas web normales. Para usar esta función, primero debe especificar en su manifest.json qué sitios web desea comunicarse. Por ejemplo:

"externally_connectable": {
  "matches": ["*://*.example.com/*"]
}

Esto expondrá la API de mensajería a cualquier página que coincida con los patrones de URL que especifique. El patrón de URL debe contener al menos un dominio de segundo nivel, es decir, los patrones de nombre de host como " ", " .com", " .co.uk" y " .appspot.com" y <all_urls> están prohibidos. Desde la página web, use las API runtime.sendMessage o runtime.connect para enviar un mensaje a una aplicación o extensión específica. Por ejemplo:

// The ID of the extension we want to talk to.
var editorExtensionId = "abcdefghijklmnoabcdefhijklmnoabc";

// Make a simple request:
chrome.runtime.sendMessage(editorExtensionId, {openUrlInEditor: url},
  function(response) {
    if (!response.success)
      handleError(url);
  });

Desde su aplicación o extensión, puede escuchar los mensajes de las páginas web a través de las API runtime.onMessageExternal o runtime.onConnectExternal, de forma similar a los mensajes de extensión cruzada. Solo la página web puede iniciar una conexión. Aquí hay un ejemplo:

chrome.runtime.onMessageExternal.addListener(
  function(request, sender, sendResponse) {
    if (sender.url == blacklistedWebsite)
      return;  // don''t allow this web page access
    if (request.openUrlInEditor)
      openUrl(request.openUrlInEditor);
  });

Answer 3

Entonces, para elaborar, un ejemplo más claro: un problema con el estilo chrome.runtime.sendMessage(...) es que debes especificar la pag en la que estás chrome.runtime.sendMessage(...) como externally_connectable, que no toma un comodín global como "https: / / / ". Entonces, si quieres esa habilidad, debes usar la comunicación de style postMessage . Capture el mensaje de la ventana en el contentscript , luego desde el contentscript , puede enviarlo a otra parte (si lo desea, como background.js etc.)

Por lo tanto, en la página web normal, o en la fuente inyectada que inserta en la página normal, desde su contentscript.js , envíe un mensaje como este:

window.postMessage({ type: "FROM_PAGE_TO_CONTENT_SCRIPT", 
     text: "Hello from the webpage!" }, "*");

por ejemplo, podrías agregarlo a un botón como este:

document.getElementById("theButton").addEventListener("click",
    function() {
       window.postMessage({ type: "FROM_PAGE_TO_CONTENT_SCRIPT", 
                            text: "Hello from the webpage!" }, "*");
}, false);

Luego, para capturarlo en contentscript.js y "enviarlo" al resto de la extensión, la única advertencia es que solo desea "seleccionar" mensajes que parecen ser los que le interesan:

window.addEventListener("message", function(event) {
  // We only accept messages from this window to itself [i.e. not from any iframes]
  if (event.source != window)
    return;

  if (event.data.type && (event.data.type == "FROM_PAGE_TO_CONTENT_SCRIPT")) {        
    chrome.runtime.sendMessage(event.data); // broadcasts it to rest of extension, or could just broadcast event.data.payload...
  } // else ignore messages seemingly not sent to yourself
}, false);

Answer 4

Puede cambiar al contexto de ejecución JS de su secuencia de comandos de contenido utilizando el menú <page context> en la parte inferior de la consola JS del desarrollador de la página, luego use chrome.runtime.sendMessage y otras API chrome.* chrome.runtime.sendMessage como lo haría dentro del script de contenido .

Answer 5

De acuerdo con los documentos oficiales , debe utilizar postMessage en el emisor y el detector de eventos de message en el receptor.

Aquí hay un ejemplo:

La página de su sitio web.html

var data = { type: "FROM_PAGE", text: "Hello from the webpage!" };
window.postMessage(data, "*");

Script de contenido: (inyectado usando chrome.tabs.executeScript(tabid, {code:... )

window.addEventListener("message", function(event) {
    // We only accept messages from ourselves
    if (event.source != window)
        return;

    if (event.data.type && (event.data.type == "FROM_PAGE")) {
        console.log("Content script received message: " + event.data.text);
    }
});

Aquí page.html (que no forma parte de la extensión) se envía mensajes a sí mismo, que son interceptados e inspeccionados por el script de contenido. Lo contrario es posible a través de medios similares.

Para pasar de la secuencia de comandos de contenido a la extensión, deberá usar una de las técnicas de transmisión de mensajes disponibles .

Parece complicado y es algo complicado, pero todo este juego de palabras es muy seguro.