如何在弹出窗口中与background.js进行交互？

Question

有没有办法在popup.html (或popup.js)和后台脚本之间传递信息？

我希望弹出窗口显示用户帐户的信息或允许他们登录，但让background.js处理身份验证和其他逻辑。我在清单中声明了background.js，但似乎没有任何迹象表明它正在被使用。

编辑:如果我把这一切都搞错了，有更好的方法去做，那也太好了。

Answer 1

请注意，后台页面和弹出窗口处于同一进程(扩展进程)中，因此一个页面可以获取另一个页面的DOM窗口，然后直接调用函数或设置变量。例如，弹出窗口可以调用chrome.extension.getBackgroundPage来修改背景：

chrome.extension.getBackgroundPage().variable = 42;

后台页面可以调用chrome.extension.getViews来获取弹出式窗口：

var popups = chrome.extension.getViews({type: "popup"});
if (0 < popups.length)
  popups[0].variable = 42;

另一种设置共享变量的方法是使用传统的DOM，因为每个扩展都有一个假的来源(比如"eakjnniffhfegdpfehmnpcmjiameincp")。因此，当您在后台修改localStorage、document.cookie或IndexedDB时，它可以在弹出窗口中回读。

也就是说，即使在扩展过程中的页面中，您也可能仍然希望使用消息传递API，因为它可以使您的代码更加统一。消息传递是与内容脚本通信的唯一方式。

Answer 2

使用chrome.extension API。

您可以来回发送请求，甚至更好地使用端口进行连续通信。

我给出的例子将创建弹出窗口和后台页面之间的双向通信，当打开弹出窗口时，这两个页面将连接起来。

只需创建一个同时包含在背景页和弹出页中的socket.js文件即可。然后，您只需在每一个上声明：

new Socket();

下面是socket.js的实现：

var Socket = function() {
    window.socket = this;

    this.port = chrome.extension.connect({name:"popupToBackground"});

    chrome.extension.onConnect.addListener(function(port) {
        if(port.name == "backgroundToPopup") {}
            else if(port.name == "popupToBackground") {
            window.socket.port = chrome.extension.connect({name:"backgroundToPopup"});
        }
        else {
            return;
        }

        port.onMessage.addListener(function(msg) {
            try {
                window[msg.namespace][msg.literal][msg.method].apply(this, msg.args);
            }
            catch(error) {
                // your failed action goes here.
            }
        });
    });
};

确保消息侦听器中的泛型方法调用为您所用。我喜欢我上面给出的格式--它非常健壮。要来回发送消息，只需将它们发送到套接字：

socket.post({ namespace: "myNamespace",
              literal: "myLiteral",
              method: "myMethod",
              args: ["argOne", "argTwo"]
           });
});

因此，如果这是从弹出页面执行的，则后台页面将调用：

window.myNamespace.myLiteral.myMethod(argOne, argTwo);

对我来说，这是一个非常好的可重用的javascript对象。如果你愿意，你甚至可以添加特定的原型函数-这样更容易发送消息：

Socket.prototype = {
    sendOneTwo: function() {
        socket.post({ namespace: "myNamespace",
                      literal: "myLiteral",
                      method: "myMethod",
                      args: ["argOne", "argTwo"]
    });
};

现在你要说的就是：

socket.sendOneTwo();

Answer 3

仅出于调试目的，我发现这在popup JS中非常方便：

console = chrome.extension.getBackgroundPage().console