11

在谷歌浏览器的扩展开发者部分，它说

扩展中的 HTML 页面可以完全访问彼此的 DOM，并且它们可以相互调用函数。...弹出的内容是由 HTML 文件 (popup.html) 定义的网页。弹出窗口不需要复制后台页面 (background.html) 中的代码，因为弹出窗口可以调用后台页面上的函数

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

4

3 回答 3

7

你能讨论一下你为什么要这样做吗？背景页面是在您的扩展程序的生命周期内永远存在的页面。而弹出页面仅在您单击弹出窗口时才存在。

在我看来，应该反过来重构它，你的弹出窗口应该从后台页面请求一些东西。您只需在弹出窗口中执行此操作即可访问后台页面： chrome.extension.getBackgroundPage()

但是，如果您坚持，您可以使用带有sendRequest()和onRequest的扩展页面的简单通信。也许你可以使用chrome.extension.getViews

于 2010-05-05T03:43:23.297 回答
4

我理解你为什么要这样做，因为我自己也遇到了这个问题。

我能想到的最简单的事情是使用 Google 的回调方法 - sendRequest 和 onRequest 方法也可以，但我发现它们笨拙且不那么简单。

Popup.js

chrome.extension.getBackgroundPage().doMethod(function(params)
{
    // Work with modified params
    // Use local variables
});

背景.html

function doMethod(callback)
{
    if(callback)
    {
        // Create/modify params if needed
        var params;

        // Invoke the callback
        callback(params);
    }
}
于 2011-01-04T01:01:32.830 回答
4

正如其他答案所提到的，您可以像这样从 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()它将返回，因此您必须处理它。[]

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

于 2017-06-13T06:44:31.157 回答