Last time I quickly ran through how to add a button to your Firefox bar by making your own extension, but all it did was open a cruddy, static alert box.

In an effort to remind myself how to manage preferences, I’m going to make it so the user can decide what text should be alerted.

First we’ll be needing to add some kind of options dialogue box. For now, I’m just going to add a pane to the options window. We need to make another overlay for the preferences in that case. Create a new text file called prefs.xul. Doing that is explained pretty well in the pane creation section of the Rietta tutorial.

That website it clearly out of date though, since it says this:

If you did not know what you want to merge with, the DOM Inspector is your best tool for looking through browser code and finding element IDs.

Which is no longer true; Firefox doesn’t ship with that DOM Inspector anymore. So, I’ve really no idea how to find the DOM element ID’s I’m supposed to be merging with.

Rietta do a good job of explaining how to link preferences with the inputs too. They don’t mention how to make your stuff get laid out nicely though. I think you can use CSS like normal (using style). There’s a page on tags you can use over MDC.

Once you’ve designed your overlay in XUL, you’ll need to actually overlay it by adding it in your chrome.manifest, like you did with the browser.

overlay chrome://browser/content/preferences/preferences.xul chrome://your-addon/content/prefs.xul

Open up your options window, and you should see your pane there now.

Mine definitely needs to be prettier. (The screenshot is for the addon I'm working on, not this example.)

When you change the data in your fields and press ‘Ok’ they’ll automatically be updated and saved. You’ll be able to see them in your about:config too.

Now we can go ahead and make our javascript file, save it in your content folder. This’ll just be like any other javascript function you’d normally write.

We need to use XPCOM in order to get and set preferences from inside a javascript file. That makes my javascript file look like this:

//  Gets the text from the store user preference and returns it
function getAndReturnText () {
  //  Installise the preferences service
  var pref = Components.classes['@mozilla.org/preferences-service;1'].getService(Components.interfaces.nsIPrefBranch);

  //  Message box showing the text the user entered on the options pane
  alert (pref.getCharPref ('extensions.timesink.possibleWebsites'));
}

Doesn’t do much at the moment, until we change the oncommand event we added to our button (in browser.xul). You also need to include the javascript in any overlays with you’re using it.

<script type="application/x-javascript" src="chrome://your-addon/content/mycode.js" />

After learning all that, I ended up with these tabs open, which may be more help to you.