Chrome扩展程序弹出窗口在错误的时间触发

Question

I have a chrome extension which is currently consists of a background page and a popup page. There are some initialization happens when the popup is opened. I am using DOM event

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

And the behaviour is correct. The issue is when closing the popup. Since chrome popup does not throw unload event I am using what was suggested here . Here is my code

popup.js

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

Here connecting to the runtime and sending the port to background page so that it can listen to onDisconnect event.

Background.js

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

This works as well.

But the issue is, this onDisconnect getting fired when the popup is getting opened, not when it is getting closed

The documentation for onDisconnect event is

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

Which is not every helpful ;)

So is there anything wrong I am doing, or any way when I can detect the popup close?

Answer 1

Unless there's something listening to chrome.runtime.onConnect in the popup page (from your comment, doesn't seem so), chrome.runtime.connect() will return a Port that immediately closes (as no-one was willing to listen).

You're definitely making it more difficult than it should be with involving getBackgroundPage though. The popup can initiate the port itself. All you need to do is:

// 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 */
    });
  }
});

In case you want to preserve what you already have, the minimal code to put into the popup is this:

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

Note that in all cases you need to keep a reference to the Port object on both sides. If the garbage collector collects it, the port will be disconnected.

Finally, a port name is optional; if it's the only port you use, you can drop the code that sets/checks the name.