Come posso accedere al DOM della pagina popup dalla pagina bg nell'estensione di Chrome? - google-chrome, google-chrome-extension

In Google Chrome "s sezione sviluppatore di estensioni, dice

Le pagine HTML all'interno di un'estensione avere completatoaccesso a vicenda "s DOM e possono richiamare funzioni su l'un l'altro. ... Il contenuto del popup sono una pagina web definita da un file HTML (Popup.html). Il popup non ha bisogno duplicare il codice che si trova nel pagina di sfondo (background.html) perché il popup può richiamare funzioni sulla pagina di sfondo

Ho caricato e testato jQuery e posso accedere agli elementi DOM in background.html con jQuery, ma non riesco a capire come ottenere l'accesso agli elementi DOM in popup.html da background.html.

risposte:

7 per risposta № 1

puoi discutere perché vorresti farlo? Una pagina di sfondo è una pagina che vive per sempre per la durata della tua estensione. Mentre la pagina popup vive solo quando fai clic sul popup.

A mio parere, dovrebbe essere rifattorizzato il contrario, il tuo popup dovrebbe richiedere qualcosa dalla pagina di sfondo. Basta farlo nel popup per accedere alla pagina di sfondo: chrome.extension.getBackgroundPage ()

Ma se insisti, puoi usare la semplice comunicazione con le pagine di estensione con invia richiesta() e su richiesta. Forse puoi usare chrome.extension.getViews

---

3 per risposta № 2

Capisco perché vuoi farlo come ho incontrato io stesso il problema.

La cosa più facile che potevo pensare era usare il metodo di callback di Google - anche i metodi sendRequest e onRequest funzionano, ma li trovo molto goffi e meno diretti.

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

---

1 per risposta № 3

Come menzionano altre risposte, puoi richiamare le funzioni background.js da popup.js in questo modo:

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

Ma per accedere a popup.js o popup.html da background.js, devi usare l'architettura dei messaggi in questo modo:

// 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
}

Tuttavia, sembra che tu possa accedere in modo sincrono a popup.js da background.js, proprio come puoi accedere in modo sincrono al contrario. chrome.extension.getViews puoi farti il ​​popup window oggetto, e puoi usarlo per chiamare funzioni, accedere a variabili e accedere al DOM.

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

Nota che getViews() sarà di ritorno [] se il popup non è aperto, devi gestirlo.

Non sono sicuro del motivo per cui nessun altro ha accennato a questo, forse ci sono alcune insidie ​​o cattive pratiche a questo che ho trascurato, ma nei miei test limitati nella mia estensione, sembra funzionare.

---