How do you detect when an Add-on SDK panel has been shown?

Question

The documentation says:

show

This event is emitted when the panel is shown.

So in main.js I did this (where thePanel is using the require("panel").Panel method):

thePanel.port.on("show", function(d) {
    console.log('The panel has just been shown');
});

But the event doesn't seem to be called. I've also tried doing a function in the content script for window.onfocus but that doesn't appear to be called either.

Answer 1

There are 2 sorts of events in the SDK:

• built-in events, defined in the SDK APIs
• user-defined events, which the add-on developer defines.

To ensure that if you define your own event called "show" it won't clash with the built-in "show", all user-defined events - and only user-defined events - are scoped inside the "port" property.

The "show" event you're listening to here is a built-in event, so you should not use "port" to listen for it. So the following code should do what you want:

var panel = require("panel").Panel({
});

panel.on("show", function() {
  console.log("panel is showing");
});

panel.show();