Wie greife ich auf die Popup-Seite DOM von der bg-Seite in der Chrome-Erweiterung zu?

Question

In Google Chrome extension developer section, heißt es

Die HTML-Seiten innerhalb einer Verlängerung haben vollen Zugriff auf jedes DOMs des anderen, und sie können auf jeweils andere Funktionen aufrufen. ... Der Inhalt des Popups ist eine Webseite, die durch eine HTML-Datei (popup.html) definiert wird. Das Popup nicht müssen Code duplizieren, die Hintergrund Seite (background.html) im ist weil das Popup-Funktionen aufrufen kann auf dem Hintergrund Seite

ich geladen habe und getestet jQuery und kann zugreifen DOM-Elemente in background.html mit jQuery, aber ich kann nicht herausfinden, wie man Zugriff auf DOM-Elemente in popup.html von background.html bekommt.

Answer 1

können Sie diskutieren, warum Sie das tun möchten? Eine Hintergrundseite ist eine Seite, die für die Lebensdauer Ihrer Erweiterung für immer lebt. Während die Popup-Seite nur lebt, wenn Sie auf das Popup klicken.

Meiner Meinung nach sollte es anders herum umgestaltet werden, Ihr Popup sollte etwas von der Hintergrundseite anfordern. Sie tun dies nur im Popup den Hintergrund ist: chrome.extension.getBackgroundPage()

Aber wenn Sie darauf bestehen, können Sie einfach die Kommunikation mit der Zusatzblätter mit sendRequest() und onRequest verwenden. Vielleicht können Sie verwenden chrome.extension.getViews

Answer 2

Ich verstehe, warum Sie dies tun möchten, wie ich selbst in das Problem geraten bin.

Die einfachste Sache, die ich denken konnte, war Googles Methode eines Rückrufs - die Methoden sendRequest und onRequest funktionieren auch, aber ich finde sie klobig und weniger einfach.

Popup.js

chrome.extension.getBackgroundPage().doMethod(function(params) 
{ 
    // Work with modified params 
    // Use local variables 
}); 

background.html

function doMethod(callback) 
{ 
    if(callback) 
    { 
     // Create/modify params if needed 
     var params; 

     // Invoke the callback 
     callback(params); 
    } 
} 

Answer 3

Wie andere Antworten erwähnen, können Sie background.js Funktionen von popup.js wie so nennen:

var _background = chrome.extension.getBackgroundPage(); 
_background.backgroundJsFunction(); 

Aber zu Zugang popup.js oder popup.html von background.js, Sie sollen wie so die Nachrichten-Architektur verwenden:

// in background.js 
chrome.runtime.sendMessage({ property: value }); 

// in popup.js 
chrome.runtime.onMessage.addListener(handleBackgroundMessages); 
function handleBackgroundMessages(message) 
{ 
    if (message.property === value) 
     // do stuff 
} 

Allerdings scheint es, dass Sie synchron popup.js von background.js zugreifen können, nur wie Sie können umgekehrt umgekehrt zugreifen. chrome.extension.getViews können Sie das Popup-Objekt window erhalten, und Sie können damit Funktionen aufrufen, auf Variablen zugreifen und auf das DOM zugreifen.

var _popup = chrome.extension.getViews({ type: 'popup' })[0]; 
_popup.popupJsFunction(); 
_popup.document.getElementById('element'); 
_popup.document.title = 'poop' 

Beachten Sie, dass getViews()[] zurück, wenn das Popup nicht geöffnet ist, so dass Sie das handhaben müssen.

Ich bin mir nicht sicher, warum niemand sonst dies erwähnte. Vielleicht gibt es ein paar Fallstricke oder schlechte Praktiken, die ich übersehen habe? Aber in meinen begrenzten Tests in meiner eigenen Erweiterung scheint es zu funktionieren.