Как получить доступ к всплывающей странице DOM из страницы bg в расширении Chrome?

Question

В разделе для разработчиков расширений Google Chrome написано

HTML-страницы внутри расширения иметь полный доступ друг к другу DOM, и они могут вызывать функции на друг с другом. ... содержимое всплывающего окна веб-страница, определенная файлом HTML (Popup.html). Всплывающее окно не нужно дублировать код, который находится в фоновая страница (background.html) потому что всплывающее окно может вызывать функции на фоновой странице

Я загрузил и протестировал jQuery и могу обращаться к элементам DOM в background.html с помощью jQuery, но я не могу понять, как получить доступ к элементам DOM в popup.html из background.html.

Answer 1

Вы можете обсудить, почему вы хотите это сделать? Фоновая страница - это страница, которая живет вечно на протяжении вашего расширения. Пока всплывающая страница живет только при нажатии на всплывающее окно.

По моему мнению, это должно быть реорганизовано наоборот, ваше всплывающее окно должно запросить что-то с фоновой страницы. Вы просто делаете это во всплывающем окне для доступа к фоновой странице: chrome.extension.getBackgroundPage ()

Но если вы настаиваете, вы можете использовать простое взаимодействие со страницами расширений с помощью sendRequest () и onRequest . Возможно, вы можете использовать chrome.extension.getViews

Answer 2

Я понимаю, почему вы хотите сделать это, поскольку я сам столкнулся с проблемой.

Самой простой вещью, о которой я мог подумать, было использование метода обратного вызова Google - методы sendRequest и onRequest также работают, но я нахожу их неуклюжими и менее простыми.

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

Как уже упоминалось в других ответах, вы можете вызывать функции background.js из popup.js следующим образом:

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

Но чтобы получить доступ к popup.js или popup.html из background.js, вы должны использовать архитектуру сообщений следующим образом:

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

Однако, похоже, что вы можете синхронно обращаться к popup.js из background.js, так же как вы можете синхронно получать доступ наоборот. chrome.extension.getViews может получить всплывающий объект window, и вы можете использовать его для вызова функций, доступа к переменным и доступа к DOM.

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

Обратите внимание, что getViews() вернет [], если всплывающее окно не открыто, поэтому вы должны с этим справиться.

Я не уверен, почему никто другой не упомянул это. Возможно, есть некоторые подводные камни или плохие практики, которые я упустил из виду? Но в моем ограниченном тестировании в моем собственном расширении это похоже на работу.