CODEWITHSUNDEEP
firefoxfirefox-addoncontent-script
Teoman shipahi
Teoman shipahi

Reputation: 23052

Firefox Addon - Accessing pre-loaded content script from ActionButton

I am attaching content script to every tab on my firefox add-on.

And if user clicks on ActionButton (top right icon on browser) I am trying to access content script handler function, but it does not work.

I am using walkthroughs from Content Scripts but still could not make it work.

Am I doing something wrong?

Please see code below the TODO marked areas are not working;

// 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 is not calling handler function on my content script.

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

});

Upvotes: 2

Views: 281

Answers (1)

Teoman shipahi
Teoman shipahi

Reputation: 23052

I fixed the problem by keep tracking tab-worker pairs, so

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

and finally I can now emit worker function;

// 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;
        }
    }

}

main reason: a tab can have multiple workers. So you should manually access the worker you are interested in.

Upvotes: 1

Related Questions