Javascript Firefox sdk-内容脚本无法访问self.port

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

以下是脚本：main.js：

exports.main = function() {};

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

var panel1 = require("sdk/panel").Panel({
    width: 215,
    height: 160,
    contentURL: data.url("panelDestroyer.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"),
    contentScriptFile: data.url("jquery.js"),
    panel: panel1
});

var tabs = require("sdk/tabs");

var tabWorkers = {};
tabs.on("ready", function(tab) {
    attachTabWorker(tab);
});
for each (var tab in tabs) {
    attachTabWorker(tab);
}

function attachTabWorker(tab) {
    // Attach and store
    var tabWorker = tabWorkers[tab.id] = tab.attach({
        contentScriptFile: [data.url("clear.js"),data.url("jquery.js")]
    });
    // Clean up
    tabWorker.on("detach", function() {
        if (getTabWorker(tab) === tabWorker) {
            delete tabWorkers[tab.id];
        }
    });
}

function getTabWorker(tab) {
    return tabWorkers[tab.id];
}

function getActiveTabWorker() {
    return getTabWorker(tabs.activeTab);
}


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

panel1.port.on("clear-tag",function(tag){
    getActiveTabWorker().port.emit("clear-tag", tag);
    console.log("worker emited");
})

)

painel.js：

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

---

为什么我一直认为在painel.js中没有定义self.port？

我认为问题在于加载加载项时您试图附加内容脚本

我认为当你的插件刚刚加载时，activeTab可能还没有准备好，这通常是在Firefox启动时。可能DOM尚未完全加载，或者SDK无法正确初始化内容脚本的所有组件

SDK文档说明，在使用与内容相关的属性和方法之前，您应该等待就绪事件。我假设附加内容脚本也属于这一类，因此您可能需要将其修改为以下内容：

let worker = null;
require("sdk/tabs").activeTab.on("ready", function(tab) {
    worker = tab.attach({
        contentScriptFile: data.url("clear.js")
    });
});

但这仍然不够，因为用户可能会切换选项卡。当您在原始activeTab上注册就绪侦听器时，您将不会侦听新激活的选项卡，并且不会将任何内容脚本附加到该选项卡。您需要：

收听所有选项卡的就绪事件； 确保他们都附上了你的内容脚本； 根据当前活动的选项卡选择适当的辅助对象。 我很快就想出了一个可以做到这一点的办法。您应该能够在面板端口事件中使用getActiveTabWorker来定位正确的工作程序。它还没有经过测试，所以试试吧

const tabs = require("sdk/tabs");

let tabWorkers = {};
tabs.on("ready", function(tab) {
    attachTabWorker(tab);
});
for each (let tab in tabs) {
    attachTabWorker(tab);
}

function attachTabWorker(tab) {
    // Attach and store
    let tabWorker = tabWorkers[tab.id] = tab.attach({
        contentScriptFile: data.url("clear.js")
    });
    // Clean up
    tabWorker.on("detach", function() {
        if (getTabWorker(tab) === tabWorker) {
            delete tabWorkers[tab.id];
        }
    });
}

function getTabWorker(tab) {
    return tabWorkers[tab.id];
}

function getActiveTabWorker() {
    return getTabWorker(tabs.activeTab);
}

编辑：我不知道self.port是如何定义的，但我发现还有一些错误需要修复。也许其中一个是间接干扰自我

main.js正在侦听隐藏标记，而您的面板将发出清除标记。使用清除标记。 您正在向worker发送一个对象，而worker只需要一个字符串。只需发出标记而不是{tag:tag}。 您的选项卡工作程序中没有包含jQuery。将data.urljquery.js添加到attachTabWorker中的contentScriptFile。

---

我也遇到了同样的问题，然后发现这个问题：

---

问题在于HTML代码中，您必须在main.js和HTML中调用脚本。将其从html中删除并直接在main.js中声明将解决此错误。

我仍然得到：Time:03/06/2013 12:15:25错误：TypeError:self.port未定义源：/data/pa‌​inel.js行：3@GiovanniDiToro我不知道怎么会这样。尝试修复我的编辑中的其他错误，看看它是否仍然发生。我编辑了问题中的main.js脚本，看看是否可以找到任何原因，因为它仍然无法工作。谢谢。@GiovanniDiToro painel.js仍然是最新的吗？你问题中的版本并不以任何方式引用self，它引用了不存在的面板。另一方面，您仍然没有将jQuery包含在tab worker的内容脚本列表中。同样，我的panelDestroyer.html文件是否有可能出现问题？

const tabs = require("sdk/tabs");

let tabWorkers = {};
tabs.on("ready", function(tab) {
    attachTabWorker(tab);
});
for each (let tab in tabs) {
    attachTabWorker(tab);
}

function attachTabWorker(tab) {
    // Attach and store
    let tabWorker = tabWorkers[tab.id] = tab.attach({
        contentScriptFile: data.url("clear.js")
    });
    // Clean up
    tabWorker.on("detach", function() {
        if (getTabWorker(tab) === tabWorker) {
            delete tabWorkers[tab.id];
        }
    });
}

function getTabWorker(tab) {
    return tabWorkers[tab.id];
}

function getActiveTabWorker() {
    return getTabWorker(tabs.activeTab);
}