javascript - Chrome 扩展程序弹出窗口在错误的时间关闭

Question

我有一个 Chrome 扩展，当前由一个背景页面和一个弹出页面组成。打开弹出窗口时会发生一些初始化。我正在使用 DOM 事件

doc.addEventListener('DOMContentLoaded', function() { ... }

而且行为是正确的。问题是关闭弹出窗口时。由于 chrome 弹出窗口不会引发 unload 事件，我正在使用建议的 here 。这是我的代码

popup.js

bgPage = chrome.extension.getBackgroundPage();
bgPageManager = bgPage.manager(); // This is the exposed api from bg page
bgPageManager.init(chrome.runtime.connect({
    name: 'P1'
}));

这里连接到运行时并将端口发送到后台页面，以便它可以监听 onDisconnect 事件。

背景.js

function init(port) {
    port.onDisconnect.addListener(function() {
        // Clean up happens here
        stateManager.unregister();
    });
}

这也有效。

但问题是，这个 onDisconnect 在弹出窗口打开时触发，而不是在关闭时触发

documentation onDisconnect 事件是

An object which allows the addition and removal of listeners for a Chrome event.

这并不是很有帮助;)

那么我做错了什么，或者有什么方法可以检测到弹出窗口关闭吗？

Answer 1

除非弹出页面中有东西正在监听chrome.runtime.onConnect(从您的评论来看，似乎并非如此)，chrome.runtime.connect()将返回一个立即关闭的端口(因为没有人愿意听)。

不过，涉及 getBackgroundPage 肯定会让事情变得比应有的更加困难。弹出窗口可以自行启动端口。您需要做的就是:

// popup code
var bgPort = chrome.runtime.connect({name: "P1"});

// background code
var popupPort;
chrome.runtime.onConnect.addListener(function(port) {
  if(port.name == "P1") {
    popupPort = port;
    popupPort.onDisconnect.addListener(function() {
      /* Clean up happens here */
    });
  }
});

如果您想保留已有的内容，则要放入弹出窗口的最少代码如下:

var bgPort;
chrome.runtime.onConnect.addListener(function(port) {
  if(port.name == "P1") {
    bgPort = port;
  }
});

请注意，在所有情况下，您都需要保留对两侧 Port 对象的引用。如果垃圾收集器收集了它，该端口将被断开。

最后，端口名称是可选的；如果它是您使用的唯一端口，您可以删除设置/检查名称的代码。