Question

在谷歌浏览器的extension developer section中，它说

扩展程序中的HTML页面可以完全访问彼此 DOM，他们可以调用函数彼此。 ...弹出窗口的内容是由HTML文件定义的网页（popup.html）。弹出窗口不需要复制中的代码背景页面（background.html）因为弹出窗口可以调用函数在背景页面

我已经加载并测试了jQuery，并且可以使用jQuery访问background.html中的DOM元素，但我无法弄清楚如何从background.html访问popup.html中的DOM元素。

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

正如其他答案所提到的，你可以从popup.js中调用background.js函数，如：

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

但是要从background.js访问popup.js或popup.html，你应该像这样使用消息体系结构：

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

但是，您似乎可以从background.js同步访问popup.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()将返回[]，因此您必须处理此问题。

我不确定为什么没有人提到这一点。也许我忽略了一些陷阱或不良做法？但是在我自己的扩展中的有限测试中，它似乎有效。

如何从Chrome扩展程序中的bg页面访问弹出页面DOM？

3 个答案: