javascript - Firefox 插件 sdk 中脚本之间的通信 - self.port 不存在

Question

我正在尝试使用他们的 sdk 制作一个 firefox 插件，但我不知道如何让我的 js 脚本进行通信。目标是制作一个带有表单的面板，其中有 3 个复选框，选中这些复选框后可以隐藏/显示事件选项卡上的某些元素。

脚本如下:主.js:

var data = require("sdk/self").data;

var painel1 = require("sdk/panel").Panel({
    width: 215,
    height: 160,
    contentURL: data.url("painelDestroyer.html"),
    contentScriptFile: [data.url("jquery.js"),data.url("panel.js")]
});

require("sdk/widget").Widget({
    id: "open-form-btn",
    label: "Clear",
    contentURL: data.url("mozico.png"),
    panel: painel1
});

// Attach a content script to the current active tab
let worker = require("sdk/tabs").activeTab.attach({
    contentScriptFile: data.url("clear.js")
});


painel1.port.on("show-tag",function(tag){
    worker.port.emit("show-tag", {tag:tag});
    console.log("worker emited");
});

painel1.port.on("hide-tag",function(tag){
    worker.port.emit("clear-tag", {tag:tag});
    console.log("worker emited");
});

painel.js:

$("#imgD").click(function() {
    if ($(this).is(":checked")) {
        panel.port.emit("clear-tag","img");
        console.log("panel emited");
    } else {
       panel.port.emit("show-tag","img");
       console.log("panel emited");
    }
});
$("#aD").click(function() {
    if ($(this).is(":checked")) {
        panel.port.emit("clear-tag","a");
        console.log("panel emited");
    } else {
        panel.port.emit("show-tag","a");
        console.log("panel emited");
    }
});
$("#iframeD").click(function() {
    if ($(this).is(":checked")) {
       panel.port.emit("clear-tag","iframe");
       console.log("panel emited");
    } else {
        panel.port.emit("show-tag","iframe");
        console.log("panel emited");
    }
});

clear.js:

    function tagHide (tag, hide) {
    $(tag).each(function() {
        if (hide === false) {
            $(this).css({
                "visibility": "visible"
            });
        } else {
            $(this).css({
                "visibility": "hidden"
            });
        }
    });
}

self.port.on('show-tag', function(tag) {
    tagHide(tag, false);
});
self.port.on('clear-tag', function(tag) {
    tagHide(tag, true);
});

问题:我如何使它工作，如何在这 3 个脚本之间进行通信？我的猜测是我必须将消息从 painel.js 发送到 main.js，然后再发送到 clean.js，但我该怎么做呢？我如何在 clean.js 或 painel.js 中接收消息？我一直收到 painel.js 中不存在 self.port 的消息。

Answer 1

问题是您试图从模块脚本 而不是内容脚本 访问和修改页面内容。如 the documentation 中所述，模块脚本范围内没有 window 或 document .因此，jQuery 的 $ 将无法在您的附加脚本中使用。

您需要 attach当前选项卡的另一个内容脚本。然后，您可以通过向其工作端口发送消息来显示/隐藏页面上的元素，类似于您在附加模块脚本和面板脚本之间进行通信的方式。

// Attach a content script to the current active tab
let worker = require("sdk/tabs").activeTab.attach({
    contentScriptFile: data.url("tabscript.js")
});
// Send it a message
worker.port.emit("show-tag", tag);

然后，您可以将 tagHide 函数移动到事件选项卡的内容脚本，并在其中放置一些端口监听器。这样，附加脚本可以发出一些消息并让内容脚本适本地调用 tagHide。

注意:您最好使用 page-mod 而不是附加到选项卡。最后，您可能不希望每次用户导航到不同页面时都手动附加脚本，因此全局 PageMod (include: "*") 是一个简单的解决方案。不过，在转发消息时，您仍需要确保您的目标是当前选项卡的工作人员。因此，您需要跟踪所有这些 worker 和 clean them up when the worker is detached (使用 worker.on('detach', callback)。最后，您应该遍历所有当前附加的工作人员并找到附加到当前事件选项卡页面的工作人员(通过比较每个 worker.tab 到 tabs.activeTab)。

或者，您可以简单地将命令作为 JavaScript 直接注入(inject)选项卡页面，如 Attaching Content Scripts to Tabs 所示。 .我发现这很丑陋，它不允许您在内容脚本中保留某些状态(页面上的变量跨命令保留)，您可能需要更复杂的脚本。

更新 1:至于您更新后的问题，答案是 very well documented in the SDK guides .您只需要使用 self.port.on 绑定(bind)一个监听器:

self.port.on('show-tag', function(tag) {
    tagHide(tag, false);
});
self.port.on('clear-tag', function(tag) {
    tagHide(tag);
});

另一方面，您当前的代码只能在加载项启动时与当前事件的选项卡一起使用。最有可能的是，事件选项卡发生变化，您需要随着时间的推移将您的内容脚本注入(inject)其他选项卡。请参阅我之前关于如何可以管理所有这些脚本的工作人员的说明。