Firefox Addon - 从 ActionButton 访问预加载的内容脚本答案

【问题标题】：Firefox Addon - Accessing pre-loaded content script from ActionButtonFirefox Addon - 从 ActionButton 访问预加载的内容脚本
【发布时间】：2014-08-13 07:29:12
【问题描述】：

我将内容脚本附加到我的 Firefox 插件的每个选项卡上。

如果用户单击 ActionButton（浏览器右上角的图标），我正在尝试访问内容脚本处理程序函数，但它不起作用。

我正在使用来自 Content Scripts 的演练，但仍然无法使用。

我是不是做错了什么？

请查看下方TODO标记区域的代码不起作用；

// main.js    
tabs.on('ready', function (tab) {
    var worker = tab.attach({
        include: "*",
        //contentScript: 'window.alert("Page matches ruleset");',
        contentStyleFile: [data.url("scripts/myTestContent1.js")]
    });
    worker.port.on('listener1', function (params) {
        // I will listen some messages coming from myTestContent1.js
    });   
    console.log("main.js: tab is ready!");
});



// browser icon typically at top right
var button = buttons.ActionButton({
    id: "myActionButton",
    label: "My pretty add-on",
    icon: {
        "16": "./icon-16.png",
        "32": "./icon-32.png",
        "64": "./icon-64.png"
    },
    onClick: handleClick
});

// when top right browser icon button is clicked
function handleClick(state) {
    var myWorker = tabs.activeTab.attach({
        //contentScriptFile: // I do not want to attach anything, just get Active tab!
    });
// TODO this code is not handled by active tab's content script
// should be handled by myTestContent1.js but does not work
    myWorker.port.emit("initialize", "Message from the add-on");
}

myWorker.port.emit 没有在我的内容脚本上调用处理函数。

// myTestContent1.js    
// TODO this code is not calling :(
self.port.on("initialize", function () {
    alert('self.port.on("initialize")');

});

【问题讨论】：

标签： firefox firefox-addon content-script

【解决方案1】：

我通过持续跟踪制表符对解决了这个问题，所以

var TabWorkerPair = function (tabid, worker) {
    this.tabid = tabid;
    this.worker = worker;
};

tabs.on('close', function (tab) {
    for (var i = 0; i < TabWorkerPairList.length; i++) {
        var pair = TabWorkerPairList[i];
        if (pair.tabid == tab.id) {
            // remove object from list
            TabWorkerPairList.splice(i, 1);
            break;
        }
    }
    console.log("main.js > tabs.on('close') > TabWorkerPairList count: " + TabWorkerPairList.length);
});


tabs.on('ready', function (tab) {
    var worker = tab.attach({
        include: "*",     
        contentScriptFile: [data.url("scripts/myTestContent1.js")]
    });
    // queue workers for tab
    var pair = new TabWorkerPair(tab.id, worker);
    TabWorkerPairList.push(pair);    
    console.log("main.js: tab is ready!");
});

最后我现在可以发出工作函数了；

// when top right browser icon button is clicked
function handleClick(state) {    
    for (var i = 0; i < TabWorkerPairList.length; i++) {
        var pair = TabWorkerPairList[i];
        if (pair.tabid == tabs.activeTab.id) {
            pair.worker.port.emit("initialize", pair.tabid);
            break;
        }
    }

}

主要原因：一个标签可以有多个worker。所以你应该手动访问你感兴趣的worker。

【讨论】：