1

I'm working on a firefox addon using the Add-on SDK, in that addon i have a content-script (in a sidebar) communicating with the main addon script using the port.on() and port.emit() as described here in the Add-on SDK documentation. port.on() / port.emit() work fine until i create an iframe in the sidebar (via the sidebar's content script). Once the iframe is added communication between the content-script and the main addon script no longer work via port.emit()/port.on()

i've created a simple example to demonstrate the issue, when the addon button is clicked it opens the sidebar. inside the sidebar i have a couple of kedown events for testing, when i press "r" it emits a message back to the main addon script which prints 'im here' to the console ( this works perfectly ), when i press 't' it creates an iframe and adds it to the sidebar.html body. once this happens pressing "r" no longer prints 'im here' to the console

here is the main addon script:

var buttons     = require('sdk/ui/button/action');
var sidebars    = require("sdk/ui/sidebar");
var wrkrs = []; // holds workers

var button = buttons.ActionButton({
    id: "tester",
    label: "tester",
    icon: {
        "32": "./icons/icon-32.png",
        "48": "./icons/icon-48.png",
        "64": "./icons/icon-64.png",
        "96": "./icons/icon-96.png"
    },
    onClick: function(state){
        sidebar.show();
    }
});


var sidebar = sidebars.Sidebar({
    id: 'test',
    title: 'test', 
    url: "./sidebar.html",
    onReady: function(worker){
        wrkrs.push(worker);
        worker.port.on('talk',function(msg){
            console.log('communication:', msg );
        })
    },
    onDetach: function(worker) {
        var index = wrkrs.indexOf(worker);
        if(index != -1) wrkrs.splice(index, 1);     
    }
});

here is the sidebar.html

<!DOCTYPE html>
<html>
    <head>

        <meta charset="utf-8">

    </head>
    <body>


        <h1> this is the sidebar </h1>
        <p>
            hurray!!!!!!
        </p>

        <script src="sidebar.js"></script>

    </body>
</html>

and here is the sidebar.js content-script

function test(){
    var test = document.createElement('iframe');
    document.body.appendChild( test );
}

document.body.addEventListener('keydown',function(e){
    switch(e.key){
        case "r" : addon.port.emit('talk','im here!'); break;
        case "t" : test(); break;
    }
});

UPDATE:

i've noticed that if i create a new variable and assign the global addon object to it like this:

var addon2 = addon;

then after inserting the iframe, this stops working (which is my problem):

addon.port.emit('talk','im here!');

but this seems to work fine!?!?!

addon2.port.emit('talk','im here!');

...which makes no sense to me. this might be a work-around for my problem, but it seems a bit kludgey and makes me nervous

Nick Briz
  • 1,917
  • 3
  • 20
  • 34
  • 1
    From the symptoms you were describing in your prior question, the first thing I was planning on checking was to see if `addon` was getting clobbered/replaced (it clearly is; it is definitely not the same object). The workaround/test of saving a reference to the original `addon` object would have been something I would have immediately tested. Now the trick is to 1) track down *why* this is happening, 2) what other things might be causing it to happen, 3) A good workaround/verify that saving a copy of `addon` is the best way to go, 4) bonus points for finding out where the new `port` goes. – Makyen Sep 03 '16 at 22:14
  • `addon` is a different object every time an ` – Makyen Sep 04 '16 at 00:52

0 Answers0