Acceso al objeto DOM de la pestaña actual desde "popup.html"?

Question

Estoy desarrollando una extensión para el navegador Google Chrome. No pude encontrar la forma de acceder al objeto DOM de la pestaña actual desde la página "popup.html". alguna sugerencia?

Answer 1

De forma predeterminada, dentro de popup.js/popup.html, el objeto "documento" hace referencia solo al documento de la ventana emergente de la extensión. Para obtener DOM para una pestaña específica (por ejemplo, la pestaña actualmente activa), necesitaría usar content scripts communications. Por ejemplo tenemos que enviar una solicitud de la extension a su contenido a través de la escritura popup, por lo que en el popup.html haces algo como esto:

chrome.tabs.getSelected(null, function(tab) { 
    // Send a request to the content script. 
    chrome.tabs.sendRequest(tab.id, {action: "getDOM"}, function(response) { 
    console.log(response.dom); 
    }); 
}); 

Ahora en el guión de contenido, necesitamos listen for those events procedente de la extensión, por lo que en algún archivo nombramos dom.js

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) { 
if (request.action == "getDOM") 
    sendResponse({dom: "The dom that you want to get"}); 
else 
    sendResponse({}); // Send nothing.. 
}); 

Ahora recuerden a la configuración de su manifest para incluir el guión contenido y el permiso pestaña.

Answer 2

Parece que esta respuesta no funciona con la API más reciente. Este es un ejemplo de trabajo.

popup.js:

chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { 
    var tab = tabs[0]; 
    console.log(tab.url, tab.title); 
    chrome.tabs.getSelected(null, function(tab) { 
     chrome.tabs.sendMessage(tab.id, {greeting: "hello"}, function(msg) { 
      msg = msg || {}; 
      console.log('onResponse', msg.farewell); 
     }); 
    }); 
}); 

getDescription.js:

window.onload = function() { 
    chrome.runtime.onMessage.addListener(function(msg, _, sendResponse) { 
     console.log('onMessage', msg); 
     if (msg.greeting == "hello") { 
      sendResponse({farewell: "goodbye"}); 
     } else{ 
      sendResponse({}); 
     } 
    }); 
}; 

partes pertinentes de manifest.json:

{ 
    "permissions": [ 
     "tabs" 
    ], 

    "content_scripts": [ 
    { 
     "matches": ["http://*/*", "https://*/*"], 
     "js": ["getDescription.js"] 
    } 
    ] 
} 

Answer 3

Ésta es la última solución:

popup.js

chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { 
    chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"}, function(response) { 
     console.log(response.farewell); 
    }); 
}); 

(Nota: el console.log anterior (response.farewell) es para popup.html, no su ficha actual)

contentscript.js

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) { 
    if (request.greeting == "hello") 
     sendResponse({farewell: "goodbye"}); 
    }); 

Fuente: https://developer.chrome.com/extensions/messaging