onbeforeunload 事件会触发 google chrome 扩展中的 popup.html 吗？

Question

我正在编写一个带有弹出窗口和背景页面的谷歌浏览器扩展。弹出窗口订阅后台生成的某些事件，我想在弹出窗口消失时取消订阅这些事件。但是，我没有看到弹出窗口生成 onbeforeunload 或 onunload 事件。这些事件被解雇了吗？如果没有，关于如何捕获弹出窗口关闭的任何想法？

Answer 1

浏览器操作弹出窗口不会触发“beforeunload”。相信我，我试过了。然而，“unload”应该被正确触发，所以请听听。

实际上，我有一个类似的系统，它允许您使用 addEventListener 附加事件，并且当卸载事件触发时它们会自动清除。

这里有一个小提示：显然你不能使用console.log，因为当unload事件触发时，已经太晚了。但是，您可以这样做：

var background = chrome.extension.getBackgroundPage();

addEventListener("unload", function (event) {
    background.console.log(event.type);
}, true);

通过使用上面的代码，您可以打开后台页面的控制台，这应该显示卸载事件已正确触发。

Answer 2

我也遇到过类似的问题。
就我而言，我已将焦点设置在弹出页面中的元素上。
因此，当弹出窗口关闭时，元素失去焦点，我可以捕获模糊事件。

Answer 3

如果您已在扩展程序中转而使用事件页面而不是背景页面，推荐的方式访问它的方法是使用一个函数调用 chrome.runtime.getBackgroundPage() ，该函数会通过后台页面引用进行回调。

但是，如果您尝试在 onbeforeunload 处理程序中获取后台页面，如下所示：

document.addEventListener("beforeunload", function() {
    chrome.runtime.getBackgroundPage(function(backgroundPage) {
        backgroundPage.log("unloading");
    });
});

回调似乎不会在页面卸载之前触发，因此 log()从未拨打过电话。

在上面的评论中，Pauan 建议使用 chrome.extension.getBackgroundPage() 来获取页面。我可以让它工作的唯一方法是不使用 addEventListener() 创建处理程序。相反，我不得不走老路，直接在 window 上设置处理程序：

window.onbeforeunload = function() {
    chrome.extension.getBackgroundPage().log("unloading");
};

这最终到达了后台页面。

Answer 4

使用消息传递 API 在弹出页面和后台页面之间设置端口。当弹出窗口消失时，您应该在后台页面中收到一个 onDisconnect 事件。

// popup.js
chrome.runtime.connect({ name: "popup" });
// background.js
chrome.runtime.onConnect.addListener(function (port) {
    if (port.name === "popup") {
        port.onDisconnect.addListener(function () {
        console.log("popup has been closed");
    });
  }
});