Question

I’m a noob developing a firefox add-on. I have been able to successfully anchor a panel(until it breaks) to my widget. The anchor panel acts as a menu of sorts. Where I’m stuck is this: I want to be able to call another panel to show from one of the “menu” items from my anchor panel. How do I go about doing this? The scripts for both menu panel and the list panel currently reside in main.js.

Here is the code for menu panel:

var menuList = panels.Panel({
  width: 102,
  height: 90,
  contentURL: data.url('list/menu-list.html'),    
});

And here is the code for the list panel:

 var historyList = panels.Panel({
   width: 600,
   height: 300,
   contentURL: data.url('list/history-list.html'),
   contentScriptFile: [data.url('jquery-1.7.1.js'),
                   data.url('list/history-list.js')],
   contentScriptWhen: 'ready',
   onShow: function() {
  this.postMessage(simpleStorage.storage.famhistory);
   },
   onMessage: function(message) {
      require('tabs').open(message);
   }
 });

In my menu panel.html i have a link:

<a href="javascript:showpanel('famlist')">show family list</a>

and the script in the header:

function showpanel(option)  {
 this.historyList.show();
};

Any help would be highly appreciated!
Thanks!

Answer 1

The JavaScript code in the panel doesn’t have permissions to do anything – it cannot open a new panel and it cannot communicate to the extension. You need to inject a content script into this panel that will communicate back to the extension, something like this:

var menuList = panels.Panel({
  width: 102,
  height: 90,
  contentURL: data.url('list/menu-list.html'),
  contentScriptFile: [data.url('jquery-1.7.1.js'),
                      data.url('list/menu-list.js')],
  onMessage: function(message) {
    if (message == "famlist")
      historyList.show();
  }
});

The content script menu-list.js would need to listen to link clicks and send a message to the extension when necessary, something like this:

$(document).ready(function() {
  $("#famlistLink").click(function() {
    self.postMessage("famlist");
  });
});