How do I access the DOM page of a pop-up page from a bg page in a Chrome extension?

Question

The Google Chrome extension section says:

HTML pages inside the extension have full access to each other's DOM, and they can refer to functions on each other .... Pop-up content is a web page defined by an HTML file (Popup.html). The popup does not need to duplicate code that is in the background page (background.html) because the popup can call functions on the background page

I downloaded and tested jQuery and can access the DOM elements in background.html using jQuery, but I cannot figure out how to access the DOM elements in popup.html from background.html.

Answer 1

Can you discuss why you want to do this? A background page is a page that lasts forever throughout your renewal. So far, the popup page only works when you click on the popup.

In my opinion, it should be reorganized the other way around, your pop-up should ask for something from the man page. You just do this in a popup to access the original page: chrome.extension.getBackgroundPage ()

But if you insist, you can use a simple link to the extension pages with sendRequest () and onRequest . Maybe you can use chrome.extension.getViews

Answer 2

I understand why you want to do this, as I myself ran into a problem.

The easiest thing I could think of was to use the Google callback method - the sendRequest and onRequest methods also work, but I find them awkward and less comprehensible.

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

As the other answers are mentioned, you can call the background.js functions from popup.js as follows:

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

But to access popup.js or popup.html from background.js you have to use the message architecture as follows:

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

However, it looks like you can synchronously access popup.js from background.js, just as you can synchronously access another. chrome.extension.getViews can provide you with a popup window object, and you can use it to call functions, access variables, and access the DOM.

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

Note that getViews() will return [] if the popup is not open, so you need to handle this.

I do not know why no one mentioned this. Perhaps there are some pitfalls or bad practices that I forgot? But in my limited testing in my own extension it works.