Zugreifen auf aktuelle Registerkarte DOM-Objekt von "popup.html"?

Question

Ich entwickle eine Erweiterung für Google Chrome Browser. Ich konnte nicht herausfinden, wie man auf das aktuelle Tab-DOM-Objekt von der "popup.html" Seite zugreift. irgendwelche Vorschläge?

Answer 1

Standardmäßig bezieht sich das Objekt "Dokument" innerhalb von popup.js/popup.html nur auf das Dokument des Popup-Fensters der Erweiterung. Um das DOM für eine bestimmte Registerkarte (z. B. die derzeit aktive Registerkarte) abzurufen, müssen Sie content scripts communications verwenden. Zum Beispiel müssen wir über popup, einen Antrag der extension auf Ihren Content-Skript senden, so in der popup.html Sie so etwas tun:

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

Jetzt im Content-Skript, müssen wir listen for those events von der kommenden Erweiterung, so dass in einigen Datei mit dem Namen wir 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.. 
}); 

einrichten erinnern Sie nun Ihre manifest den Inhalt Skript und Registerkarte Berechtigung aufzunehmen.

Answer 2

Diese Antwort scheint nicht mit der neuesten API zu funktionieren. Dies ist ein funktionierendes Beispiel.

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

relevanten Teile manifest.json:

{ 
    "permissions": [ 
     "tabs" 
    ], 

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

Answer 3

Dies ist die neueste fix:

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

(Hinweis: die oben console.log (response.farewell) ist für popup.html, nicht aktuellen Tab)

contentscript.js

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

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