How to listen for messages in the main.js using "browser-action-jplib"

Question

I read about the lib from Rob in his answer here, which is pretty much exactly what I need.

I am creating a badge using his library:

var badge = require("browserAction").BrowserAction({
    default_icon:  data.url("images/icon19.png"),
    default_title: "MyAddon",
    default_popup: data.url("pages/popup.html")
});

The popup is going to contact the main via his messaging protocol and will be sending a callback function. Therefore I am opening the message channel in the main.js:

const { createMessageChannel } = require('messaging');
var options = {channelName:"PopUpMessageChannel", endAtPage: false};
var extension = createMessageChannel(options, badge.port);
extension.onMessage.addListener(function(message, sender, sendResponse) {
    if (message === 'test') {
        sendResponse("Test recieved");
    }
});

My question: What port do I need to use in createMessageChannel(options, **HERE**)?
I always get the error port is undefinedwhen I use badge.port or self.port.

Answer 1

You don't need to create the message channel yourself.

I've already added the onMessage.addListener and sendMessage methods to the browser-action-jplib. Just read the documentation (generated using cfx sdocs from docs/browser-action.md).

Use it as follows:

const { data } = require("sdk/self");
var badge = require("browserAction").BrowserAction({
    default_icon:  data.url("images/icon19.png"),
    default_title: "MyAddon",
    default_popup: data.url("pages/popup.html")
});
badge.onMessage.addListener(function(message, sender, sendResponse) {
    if (message === "test") {
        sendResponse("Test recieved");
    }
});

Minimal JavaScript code in popup, for the sake of the example:

extension.sendMessage("test", function(message) {
    document.body.textContent = message;
});