Communication between content script (page mod) and popup (panel)

Question

I currently am making a Firefox extension with Firefox add on sdk and I tried to communicate between content script (page mod) and popup (panel) to no avail.

I am using toolbar button by Erik Vold. Here is my code:

var tbb = require('toolbarbutton').ToolbarButton({
    id: 'from-us_button',
    label: 'from-us',
    image: data.url('img/on.png'),
    panel: panel

});

var pageMod = require('page-mod').PageMod({
  include: "*",
  contentScriptFile: [
    data.url('recuperation.js')
    ],
  contentScriptWhen : "end",
  attachTo: ["existing", "top"]

});


var panel = require('panel').Panel({
    width: 200,
    height: 500,
    contentURL: data.url('popup.html')

});

My popup.html contains:

<script type="text/javascript" src="popup.js"></script>

I would like to pass a variable from recuperation.js to popup.js, how could I do that?

Answer 1

In your popup.js you should have an 'addon' global object which allows you to send messages back to main.js. This is documented here:

https://addons.mozilla.org/en-US/developers/docs/sdk/latest/modules/sdk/panel.html#Styling%20Trusted%20Panel%20Content

Answer 2

You'll need to attach popup.js to your panel:

var panel = require('panel').Panel({
    ...
    contentURL: data.url('popup.html'),
    contentScriptFile:  require("self").data.url("popup.js")  //or data.url() if you already have it set
});

Scripts loaded via the <script> tags lack the necessary privileges to use self.port .

Then add a listener to your page-mod worker and relay the message to your panel like so:

var panel = ...
...
require('page-mod').PageMod({
  include: "*",
  contentScriptFile: [
    data.url('recuperation.js')
  ],
  contentScriptWhen : "end",
  attachTo: ["existing", "top"],
  onAttach: function(worker){
    worker.port.on("recuperation-to-panel",function(msg){
        panel.port.emit("recuperation-to-panel",msg);
    });    
  }
});

Then from recuperation.js :

self.port.emit("recuperation-to-panel",msg);

* edit: It should be worker.port.on ; Not pageMod.port.on . Sorry.