Firefox Tips — Code from 2009 article by Use All Five. This is most likely out of date.

changePreference

function changePreference(prefencePage) {
    document.getElementById("options-iframe").setAttribute("src", prefencePage.selectedItem.value);
}

communication

checkPrefs: function()
{
    //run the button check function
    this.fixEnableButtons();
    //update the scope (since this is in a bigger object)
    var that = this;
    //start the timer, and run this function on time up
    var prefTimer = setTimeout(function(){that.checkPrefs();},500);  
},

fixEnableButtons: function()
{
    //grab the icon xul dom elements
    var enablePlugin = document.getElementById('sbEnable'); 
    var disablePlugin = document.getElementById('sbDisable'); 

    //check the preference and update accordingly
    if(yourplugin.prefs.getBoolPref("isEnabled"))
    {
    	enablePlugin.style.display = "none";
    	disablePlugin.style.display = "block";
    }
    else
    {
    	enablePlugin.style.display = "block";
    	disablePlugin.style.display = "none";
    }
}

listbox

 <listbox id="options-preference-list" onselect="changePreference(this)">
     <listitem class="listitem-iconic" selected="true" image="chrome://yourplugin/skin/options/your-icon.png" label="Account" value="chrome://yourplugin/content/options/account.xul" />
     <listitem class="listitem-iconic" selected="true" image="chrome://yourplugin/skin/options/your-icon.png" label="Application" value="chrome://yourplugin/content/options/application.xul" />
     <listitem class="listitem-iconic" selected="true" image="chrome://yourplugin/skin/options/your-icon.png" label="Settings" value="chrome://yourplugin/content/options/settings.xul" />
 </listbox>
 <iframe flex="1" id="options-iframe" src="chrome://yourplugin/content/options/account.xul" />

listitem

listitem[selected="true"][current="true"] {
  background-color: #057ca0;
}

Tab changes

gBrowser.tabContainer.addEventListener("TabSelect", function(e) { onTabChange();}, false);