Firefox Add-on SDK: port.on() / port.emit() disrup

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: