How to add welcome page

Sometimes it will be helpful to open welcome page immediately after first running of an extension. This is quite simple task. But it will allow to make your
extension more user-friendly.

const MY_EXT_PREF_BRANCH = "extensions.myext";
const Cc = Components.classes; 
const Ci = Components.interfaces; 

var myExt = {
    PREF_FIRSTRUN : MY_EXT_PREF_BRANCH + ".firstrun",

    PAGE_WELCOME : "http://www.myext.com/welcome",

    prefService : Cc["@mozilla.org/preferences-service;1"].
                  getService(Ci.nsIPrefBranch),


    load : function () {
        if (myExt.isFirstRun()) {
            setTimeout(myExt.openSuccessPage, 2000);
            myExt.prefService.setBoolPref(myExt.PREF_FIRSTRUN, false);
        }
    }

    isFirstRun : function() {
        return myExt.getBoolPref(myExt.PREF_FIRSTRUN, true);
    },

    openSuccessPage : function() {
        gBrowser.selectedTab = gBrowser.addTab(myExt.PAGE_WELCOME);
    },


    getBoolPref: function(prefname, prefdef) {
        try {
            return myExt.prefService.getBoolPref(prefname);
        } catch(e) {
            myExt.prefService.setBoolPref(prefname, prefdef);
            return myExt.prefService.getBoolPref(prefname);
        }
    }
}

window.addEventListener("load", myExt.load, false);

User-friendly uninstall process of an extensions

As a rule you need to perform few steps when user uninstalls your extension.

1. Remove all data that was added by your extension.
2. Open feedback page.

Below you will find some code that performs all these actions:


const MY_EXT_PREF_BRANCH = "extensions.my_ext";
const Cc = Components.classes; 
const Ci = Components.interfaces; 

var my_ext = {
  preferencesService : Cc["@mozilla.org/preferences-service;1"].
          getService(Ci.nsIPrefBranch),
    
  observerService : Cc['@mozilla.org/observer-service;1'].
          getService(Ci.nsIObserverService),

  PLUGIN_UUID : "{a704f080-166f-12de-8c30-0206200c9a66}",

  PAGE_FEEDBACK : "http://mysite.com/feedback",

  uninstallObserver : {
    observe: function(aSubject, aTopic, aData)
    {
       try {
          var item = aSubject.QueryInterface(Ci.nsIUpdateItem);

          if (item.id != my_ext.PLUGIN_UUID) {
            return;
          }

          if (aData == "item-uninstalled") {
            gBrowser.selectedTab = gBrowser.addTab(my_ext.PAGE_FEEDBACK);

            // Remove all properties that was installed by our extension
            my_ext.preferencesService.deleteBranch(MY_EXT_PREF_BRANCH);
          }
        } catch (e) {
      }
    }
  },

  addUninstallObserver : function() {
    my_ext.observerService.addObserver(my_ext.uninstallObserver, "em-action-requested", false);
  }
};

my_ext.addUninstallObserver();



How to add icon in textbox

Probably, most common place where you can use this trick is a toolbar for some site with search capability. Sure, that it will be nice to have search box on your toolbar like this:




I've found two different ways how to do this. The first way is to use XBL to define new component. It can be quite complicated for those developers who has no previous experience with it. Fortunately, there is another way which is more simple.

  <textbox id="TB-Search"
    minwidth="200" width="200"
    onfocus="tb.searchBoxFocus(this);"
    onblur="tb.searchBoxBlur(this);"
    onkeypress="tb.keyHandler(event);"
  >
    <image id="TB-SearchImage"/>
  </textbox>

CSS definition for search image:

#TB-SearchImage {
  list-style-image: url("http://yoursite.com/favicon.ico");
  padding-right: 2px;
  padding-left: 0px;
  margin: 0px;
  border: 0px;
}

That's it!

How to add images to menuitem in button.

Lets assume that we have button with menupopup:

<button type="menu" label="Main">
  <menupopup>
    <menuitem id="miHomeId" label="Home Page"/>
    <menuitem id="miAboutId" label="About"/>
    <menuitem id="miContactId" label="Contact"/>
  </menupopup>
</button>

It will look something like this:



And we need to add different icons to each menuitem. The first idea is to use list-style-image attribute.

#miHomeId {
  list-style-image: url("chrome://toolbar/skin/Home.PNG");
}

It is really strange, but it doesn't work. I've tried to find some examples where this problem is solved. But I have found nothing. So, I've found one interesting workaround:

<button type="menu" label="Main">
  <menupopup>
    <menuitem id="miHomeId">
      <img src="chrome://toolbar/skin/Home.PNG" id="imgHomeId"/>
      <label value="Home Page"/>
    </menuitem>
    <menuitem id="miAboutId">
      <img src="chrome://toolbar/skin/About.PNG" id="imgAboutId"/>
      <label value="About"/>
    </menuitem>
    <menuitem id="miContactId">
      <img src="chrome://toolbar/skin/Contact.PNG" id="imgContactId"/>
      <label value="Contact"/>
    </menuitem>
  </menupopup>
</button>

And you just need to specify your images in CSS:

#imgHomeId {
  list-style-image: url("chrome://toolbar/skin/Home.PNG");
}
#imgAboutId {
  list-style-image: url("chrome://toolbar/skin/About.PNG");
}  
#imgContactId {
  list-style-image: url("chrome://toolbar/skin/Contact.PNG");
}

Here is the result: