Comment puis-je accéder à la page contextuelle DOM à partir de la page bg dans l'extension Chrome?

Question

Dans Google Chrome extension developer section, il dit

Les pages HTML à l'intérieur d'une extension ont un accès complet à l'autre de DOMs, et ils peuvent appeler des fonctions sur l'autre. ... Le contenu du popup est une page web définie par un fichier HTML (popup.html). Le pop-up n'a pas besoin dupliquer le code qui se trouve dans la page d'arrière-plan (background.html) parce que le menu contextuel peut appeler des fonctions sur la page d'arrière-plan

Je l'ai chargé et testé jQuery, et peut accéder à Les éléments DOM dans background.html avec jQuery, mais je n'arrive pas à comprendre comment accéder aux éléments DOM dans popup.html depuis background.html.

Answer 1

pouvez-vous discuter pourquoi vous voulez faire cela? Une page d'arrière-plan est une page qui demeure éternellement pendant toute la durée de votre extension. Alors que la page popup ne vit que lorsque vous cliquez sur le popup. À mon avis, il devrait être refactorisé l'inverse, votre popup devrait demander quelque chose de la page d'arrière-plan. Vous venez de faire cela dans le menu contextuel pour accéder à la page d'arrière-plan: chrome.extension.getBackgroundPage()

Mais si vous insistez, vous pouvez utiliser une communication simple avec des pages d'extension avec sendRequest() et onRequest. Peut-être que vous pouvez utiliser chrome.extension.getViews

Answer 2

Je comprends pourquoi vous voulez faire cela car j'ai moi-même rencontré le problème. La meilleure chose à laquelle je pouvais penser était d'utiliser la méthode de callback de Google - les méthodes sendRequest et onRequest fonctionnent également, mais je les trouve plutôt maladroites et moins directes.

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

Comme d'autres réponses mentionnent, vous pouvez appeler des fonctions de background.js de popup.js comme ceci:

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

Mais à popup.js d'accès ou popup.html de background.js, vous êtes censé utiliser l'architecture des messages comme ceci:

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

Cependant, il semble que vous pouvez accéder popup.js de manière synchrone background.js, juste comme vous pouvez accéder de manière synchrone dans l'autre sens. chrome.extension.getViews peut vous obtenir l'objet window popup, et vous pouvez l'utiliser pour appeler des fonctions, accéder aux variables, et accéder au DOM.

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

Notez que getViews() retournera [] si le popup est pas ouvert, donc vous devez gérer cela.

Je ne sais pas pourquoi personne d'autre ne l'a mentionné. Peut-être y a-t-il des pièges ou de mauvaises pratiques que j'ai oubliées? Mais dans mes tests limités dans ma propre extension, cela semble fonctionner.