Firefox Addon SDK: Ways to display options to user?

Question

I\'m quite new to addon development with firefox. I picked the addon sdk for porting my chrome extension to firefox.

What would you suggest to display a options pag

Answer 1

Thanks Wladimir Palant for pointing out the direction, yet it still took me quite a while to figure out the final code. I put my result here for reference of others in the future. (I simplified the code a little bit here for elaboration purpose, but the main structure should be correct.)

content.js: (click a link to open the options page)

  $("#options").click(function(){
    self.port.emit("open_options", {});
  });

background.js:

//regsiter the event
backgroundInit = function(worker) {
  worker.port.on("open_options", function(request){
    var tabs = require("sdk/tabs");
    tabs.open({
      //open a new tab to display options page
      url: self.data.url("options.html"),
    });
  }

  worker.port.on("pull_preferences", function(request){
    var preferences = null;
    //get preferences (from simple storage or API)
    woker.emit("update_content_preferences", {preferences:preferences});
  });


  worker.port.on("push_preferences", function(request){
    var preferences = request.preferences;
    //write the preferences (to simple storage or API)
  });
}

//register the page, note that you could register multiple ones
pageMod.PageMod({
  include: self.data.url('options.html'),
  contentScriptFile: [ self.data.url("lib/jquery-1.11.3.min.js"),
                        self.data.url("options.js")],
  contentScriptWhen: 'end',  
  onAttach: backgroundInit

});

options.js: (this page is also on the content script context)

$(document).ready(function(){
  self.port.on("update_content_preferences", function(request){
    var preferences = request.preferences;
    //update options page values using the preferences
  });

  $("#save").click(function(){
    var preferences = null;
    //get preferences from options page
    self.port.emit("push_preferences", {preferences:preferences});
  });

  self.port.emit("pull_preferences", {}); //trigger the pull upon page start
});

Reference: https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/tabs