How to properly send data to an opened Firefox sidebar?

Question

I'm trying to send data to a sidebar. I've had a look at the following documentation, but I could not figure out how to properly send data over to the bar when it is already opened.

• Communicating with sidebar scripts
• Communicating with other scripts
• Using ports

My current approach is to save the worker object I get when the sidebar is attaching in a global variable, but I'm sure there is a better way. Minimal example showcasing my current approach:

var BARWORKER = undefined;
require("sdk/ui/sidebar").Sidebar({
    id: "mybar",
    url: "./sidebar.html",
    onReady: function (worker) {
        BARWORKER = worker;
    }
});

// lots of code

if (BARWORKER) {
    BARWORKER.port.emit("message", payload);
}

// lots of code

Answer 1

To send data over to the sidebar when it is already opened you can also use the visibility API.

https://developer.mozilla.org/en-US/docs/DOM/Using_the_Page_Visibility_API

function onVisibilityChange() {
  if(!document.hidden){}
}

document.addEventListener("visibilitychange", onVisibilityChange);

Answer 2

My current solution is to give the sidebar a field to save the current worker object. Upon detaching the sidebar it is set to undefined. This works pretty well as an intermediate solution. I have a feeling that the best approach would involve custom events, however I have not found out how to use one in this specific case yet.

var BAR = require("sdk/ui/sidebar").Sidebar({
    id: "mybar",
    url: "./sidebar.html",
    worker: undefined,
    onReady: function (worker) {
        BAR.worker = worker;
    },
    onDetach: function () {    
        BAR.worker = undefined;
    }
});