javascript - 如何使用 "browser-action-jplib"监听 main.js 中的消息

Question

我从 Rob 中了解到有关库的信息在他的回答中 here ，这正是我所需要的。

我正在使用他的库创建徽章:

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

弹出窗口将通过他的 messaging protocol 与主联系。并将发送一个回调函数。因此，我在 main.js 中打开消息 channel :

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");
    }
});

我的问题:我需要在 createMessageChannel(options, **HERE**) 中使用什么端口？
当我使用 badge.port 或 self.port 时，我总是收到错误 port is undefined。

Answer 1

您不需要自己创建消息 channel 。

我已经将 onMessage.addListener 和 sendMessage 方法添加到 browser-action-jplib .只需阅读文档(使用来自 docs/browser-action.md 的 cfx sdocs 生成)。

按如下方式使用:

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");
    }
});

为了示例，弹出窗口中的最少 JavaScript 代码:

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