Firefox Addon Sdk: Ways To Display Options To User?

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 page / options pane

Solution 1:

Starting with the Add-on SDK 1.4 you have the simple-prefs module. It will automatically generate inline options for your add-on - these are displayed directly on your extension's page in the Add-ons Manager. That should be the preferred way to display options. The downside: opening the options programmatically is non-trivial, even for classic add-ons. And the SDK doesn't seem to support complicated controls (documentation of what's possible with inline options), only the most basic ones.

If you want to roll your own, you probably want to integrate an "Options" button into a drop-down panel. You should also be able to attach a content script to it via page-mod package, something like this should work:

var pageMod = require("page-mod");
pageMod.PageMod({
  include: data.url("options.html"),
  ...
});

var tabs = require("tabs");
tabs.open(data.url("options.html"));

Downside here: using the standardized way to display add-on options (via Add-ons Manager) won't be possible, the SDK doesn't support anything but inline options.

Solution 2:

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

Solution 3:

In this case you need to use Port.on()/Port.emit() to send a controll option from options.html, like click on setting button. And "tabs" module

 options.htmlvar panelIsOpen = 0;

        $('#settings').click(function() {
                self.port.emit("statusoptions", {optionsIsOpen:1});
            });

 popup.htmlPanel.port.on("statusoptions", function (panda) {
                if(panda.optionsIsOpen === 1){
                    Panel.hide();
                    tabs.open({
                        url: "options.html",
                        onReady: functiononReady(tab) {
                           Panel.hide();
                        },
                        contentScriptFile: [
                            data.url("js/jquery-2.0.0.min.js"),
                            data.url("js/options.js")],
                    });
                }
            });