How to produce a settings dialog (and save the values)

These are my first steps with the Firefox AddOn SDK. What I'm trying to create is a simple 'settings dialogue'. I thought about a html page containing forms for the values and a submit button. Following the first mozilla tutorials I created a widget:

var widget = require('widget').Widget({
  label: 'Settings',
  id: 'settings',
  //panel: text_entry
  contentURL: data.url('images/stgfavicon.ico'),
  contentScriptFile: data.url('scripts/submit.js'),
  onClick: function() {
    tabs.open(data.url('forms/settings.html'));
  }
});

But since settings.js is not the contentScriptFile I got no communication between settings.html and settings.js. Is it possible to get this done without some (complex looking) messaging system? And how to save the values best? A JSON file? Some links/examples/API names would help me a lot. :)

Solution

That's because you're trying to attach your script to the widget (which is not an HTML file). You need to attach it to the actual html file after the tab opens.

tabs.open({
    url: data.url('forms/settings.html'),
    onOpen: function onOpen(tab) {
        tab.attach({ contentScriptFile: data.url('scripts/submit.js'); });
    }
});

I haven't tested that out so there may be an error.

You should also look at the simple-prefs module if these are settings that aren't going to be adjusted frequently.