Accesso all'oggetto DOM della scheda corrente da "popup.html"?

Question

Sto sviluppando un'estensione per il browser Google Chrome. Non riuscivo a capire come accedere alla scheda corrente oggetto DOM dalla pagina "popup.html". qualche suggerimento?

Answer 1

Per impostazione predefinita, all'interno di popup.js/popup.html, l'oggetto "documento" si riferisce solo al documento della finestra popup dell'estensione. Per ottenere il DOM per una scheda specifica (ad esempio la scheda attualmente attiva), è necessario utilizzare content scripts communications. Per esempio abbiamo bisogno di inviare una richiesta del extension allo script contenuti tramite popup, così nel popup.html si fa qualcosa di simile:

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); 
    }); 
}); 

Ora nello script contenuti, abbiamo bisogno di listen for those events proveniente dal estensione, quindi in un certo file che abbiamo chiamato 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.. 
}); 

Ora ricordatevi di impostare il manifest per includere lo script contenuti e il permesso scheda.

Answer 2

Questa risposta sembra non funzionare con l'ultima API. Questo è un esempio funzionante.

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({}); 
     } 
    }); 
}; 

parti rilevanti della manifest.json:

{ 
    "permissions": [ 
     "tabs" 
    ], 

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

Answer 3

Questa è l'ultima correzione:

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: quanto sopra console.log (response.farewell) è per popup.html, non la vostra scheda corrente)

contentscript.js

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

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