0

I am developing a FireFox extension using JPM Addon. I am loading a panel from the main index.js file like so...

var panel = require('sdk/panel');
var panel = panel.Panel({
    contentURL: url('pages/popup.html'),
    onHide: doHide
});

//and in another place...
panel.show({
            position: button
        });

The pages/popup.html file references a javascript file and I use the relative path to load it. I need to figure out how to pass a message from this javascript file, loaded by the panel web page, to the main index.js script file of the addon.

I tried postMessage as well as port.emit...

So, either

//index.js
panel = require("sdk/panel").Panel({
  onMessage: function(message) {
    console.log(message);
  }
});

//popup.js - panel file
panel.postMessage('something');

...or...

//index.js
panel.on("message", function(text) {
  console.log(text);
});

//popup.js
self.port.emit('message', 'hello world');

However, both of these don't seem to work. Help!

Shahid Thaika
  • 2,133
  • 5
  • 23
  • 59

1 Answers1

0

You should read the section "Scripting trusted panel content" in the MDN sdk/panel page. The most relevant text is:

Like a content script, these scripts can communicate with the add-on code using the postMessage() API or the port API. The crucial difference is that these scripts access the postMessage and port objects through the addon object, whereas content scripts access them through the self object.

So, your popup.js code should be:

addon.port.emit('message', 'hello world');

And your index.js:

panel.port.on("message", function(text) {
  console.log(text);
});

There is an example add-on in the "Scripting trusted panel content" section showing communication in both directions between the trusted panel (panel content comes from within the add-on) and the main background script of the add-on.

Makyen
  • 31,849
  • 12
  • 86
  • 121
  • Is it possible to call a function from the addon script as well? In reality, I am porting a Chrome extension and cannot use callback for what I need. – Shahid Thaika Aug 30 '16 at 06:11
  • 1
    @ShahidThaika, Message passing is asynchronous (potentially from one process to another). This is true in Chrome also. If you mean a synchronous function to *send* a message from the add-on script, then yes. For the above code, that would be `panel.port.emit(nameOfMessage,message);`. BTW: If you are porting a Chrome extension and you have not already done so, you may want to take a look at the [WebExtensions](https://developer.mozilla.org/en-US/Add-ons/WebExtensions) API, which is very similar to Chrome extensions. – Makyen Aug 30 '16 at 06:24
  • I used a function in the panel to return a string based on the browser's localization. However, in FF it seems you need to use require('sdk/l10n').get, which is only accessible through the index.js file. I need to figure out how to call the localization function. – Shahid Thaika Aug 30 '16 at 06:27
  • Hi @Makyen, I would like to know how to pass message form panels script to content script? – Vivekraj K R Aug 31 '16 at 05:20
  • @vivek, That sounds like it should be a new question :-). It would help to have a bit more context than just that short description (thus the new question). Do you have code that you have already tried? You probably have to go panel script ⟷background script⟷content script. how to structure that will depend a bit on what you are attempting to do/communicate and how complex your add-on is (e.g. how many content scripts & panel scripts). – Makyen Aug 31 '16 at 05:49
  • @Makyen Here it is http://stackoverflow.com/questions/39241698/firefox-addonjpm-how-to-pass-message-from-panels-script-to-content-script – Vivekraj K R Aug 31 '16 at 05:52