How do I access the popup page DOM from bg page in Chrome extension?

Question

In Google Chrome's extension developer section, it says

The HTML pages inside an extension have complete access to each other's DOMs, and they can invoke functions on each other. ... The popup's contents are a web page defined by an HTML file (popup.html). The popup doesn't need to duplicate code that's in the background page (background.html) because the popup can invoke functions on the background page

I've loaded and tested jQuery, and can access DOM elements in background.html with jQuery, but I cannot figure out how to get access to DOM elements in popup.html from background.html.

Answer 1

can you discuss why you would want to do that? A background page is a page that lives forever for the life time of your extension. While the popup page only lives when you click on the popup.

In my opinion, it should be refactored the other way around, your popup should request something from the background page. You just do this in the popup to access the background page: chrome.extension.getBackgroundPage()

But if you insist, you can use simple communication with extension pages with sendRequest() and onRequest. Perhaps you can use chrome.extension.getViews

Answer 2

I understand why you want to do this as I have run into the problem myself.

The easiest thing I could think of was using Google's method of a callback - the sendRequest and onRequest methods work as well, but I find them to be clunky and less straightforward.

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 other answers mention, you can call background.js functions from popup.js like so:

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

But to access popup.js or popup.html from background.js, you're supposed to use the messages architecture like so:

// 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 seems that you can synchronously access popup.js from background.js, just like you can synchronously access the other way around. chrome.extension.getViews can get you the popup window object, and you can use that 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 have to handle that.

I'm not sure why no one else mentioned this. Perhaps there's some pitfalls or bad practices to this that I've overlooked? But in my limited testing in my own extension, it seems to work.