Firefox extension development tips & tricks

How to show message in Firefox statusbar

2011-04-21T23:08:00.000-07:00

Today I've spent bit more time then expected trying to show message in Firefox status bar. (I know that there is no statusbar by default in Firefox 4). The solution was simple, as usual :-):

    document.getElementById("statusbar-display").label = "Your message here";

That is all!

How to change background color of notificationbox

2010-09-01T08:43:00.000-07:00

If you take a look on official documentation for notificationbox, you will not find any attributes or properties which allows to change background color. But it is possible to do. Let's assume that you have create notification box with the next code:

    var nb = gBrowser.getNotificationBox();
    nb.appendNotification(
        "This is my message",
        "my-notification",
        "chrome://myext/skin/notification.gif",
        nb.PRIORITY_INFO_MEDIUM,
        [
            {
                label: "More info",
                accessKey: "M",
                callback: function() {alert('More info action!')}
            }
        ]);

Take a look on the second parameter of appendNotification function. This parameter will be used as value attribute for notification element which will be created. We can use this fact. So only one thing that you need is to add one rule in CSS file of the extension. Something like this:

  notification[value='my-notification'] {
    background-color: green;
  }

You will see your notification with green background color. You can also add more CSS rules and specify value of color property and etc.

How to add new menu item in context menu

2010-08-26T05:57:00.000-07:00

For some extensions it has sense to think on adding new menu item in standard context menu. Such menu item can be useful for end-users and improve usability of your extension.

I assume that you already have some XUL overlay:

overlay chrome://browser/content/browser.xul chrome://myext/content/myext.xul

Now you need to add in myext.xul file the next code:

<popup id="contentAreaContextMenu">
        <menuitem id="my-menu-item"
                  insertafter="context-selectall"
                  accesskey="H"
                  class="menuitem-iconic"
                  label="Hello world!"
                  oncommand="alert('Hello again');"/>
    </popup>

You can see that I've added CSS class there: class="menuitem-iconic". It will allow you to add icon for the menu item. You can do that in CSS file which should be included in the current XUL file:

#my-menu-item {
    list-style-image: url("chrome://myext/skin/icon16.png");
}

That is all. Make your extensions user-friendly!

How to detect is a socket free or busy

2010-05-24T12:07:00.000-07:00

Sometimes you need to perform very simple task. But unexpectedly this task can take much more time that you have expected at the start.

I've met this case when I was need to check if some socket is free or busy. I've spent some time on playing with core Mozilla interfaces like nsIServerSocket or nsISocketTransportService. But was not able to find right solution.

Finally, I've used not very traditional method to solve my problem. I've managed all work to Java classes:

function isPortAvailable(port) {
    try {
        var srv = new java.net.ServerSocket(port);
        srv.close();
        srv = null;
        return true;
    } catch (e) {
        return false;
    }
}

This solution has one limitation. You need to be ensure that Java in installed on user's machine. But in my case this limitation was not significant.

How to Store Complex Objects in Firefox

2010-04-11T00:00:00.000-07:00

There are a couple of ways which can be used to store data in Firefox. First of all, you can use SQLite to store all your data. But in most of cases you don't need such powerful approach.

Basic data types can be stored in Application.storage or in preferences. But what to do if you need to store complex data?

In those cases when performance is not very critical for you, you ca use the next trick: encode with JSON your data and store it as result string. When you will need to access stored data, simply decode it back from string and enjoy!

How To Call Java From XPCOM

2010-03-19T00:54:00.000-07:00

It is quite easy to call Java methods directly from the extension. You can find a lot of information how to do that here. But there is no information how to call java from JavaScript XPCOM. java keyword is not available here.

There is one trick that allow you to get reference on java variable from XPCOM:

const Cc = Components.classes;
const Ci = Components.interfaces;

var java = Cc["@mozilla.org/appshell/window-mediator;1"].
             getService(Ci.nsIWindowMediator).
             getMostRecentWindow("navigator:browser").java;

Very simple, but not very obvious.

How to install search plugin together with your extension

2010-02-18T01:20:00.000-08:00

A lot of modern sites has own search system. Such system usually performs search on a site and provide search result to a user in accordance with his request.

If you are working on some extension for such site, you can also create and install search plugin for the site.

There are two search plugin formats supported by Firefox:
MozSearch and OpenSearch. Hope that above links will help you to create necessary search plugin.

Then you need to distribute it with your extension. You should do two basic things:
1. Create searchplugins folder in the root of your extension.
2. Add your search plugin to this folder.

So, inside XPI your searchplugins folder will be located on the same level with chrome.manifest and install.rdf files.

There is also one small trick that can be used in your extension. You can select your installed search plugin as default search provider on the first run of your extension. To do that simply add two lines of code:

  var sb = document.getElementById("searchbar");
  sb.searchService.currentEngine = sb.searchService.getEngineByName("YourEngineName");

How to change size of image for toolbarbutton on the fly

2010-02-10T04:52:00.000-08:00

Sometimes you need to use for toolbarbutton an image which is returned by some third-party service. And it's size can be much greater than you need:

<toolbarbutton id="my-btn-id" label="My Button" image="http://somesite.com/images/img.png"/>

In this case you need to add one line of code in CSS file:

#my-btn-id .toolbarbutton-icon {
  width: 16px;
  height: 16px;
}

This simple trick will allow you to get toolbarbutton image with necessary size.

Header for richlistbox component

2010-02-02T09:02:00.001-08:00

Using of header in listbox XUL control is quite common task. But there is no clear information about ability to use header in richlistbox control. I've found quite obvious but undocumented solution for this problem. The next short example will show how to add header to richlistbox control.

<richlistbox rows="10" flex="1">
    <listhead>
        <listheader label="My header" flex="1"/>
    </listhead>
    <richlistitem>
        <label value="Item1"/> 
    </richlistitem>
    <richlistitem>
        <label value="Item2"/> 
    </richlistitem>
</richlistbox>

Firefox add-on for copying containing folder for a downloaded file

2009-10-09T23:55:00.001-07:00

I've created small add-on which extends standard context menu in Download Manager. I think that it can be useful for those people which who uses some kinds of file managers like Far, Total Commander and etc.

Usually after downloading of a file I need to open containing folder it my Far manager. But there is no basic way to copy path of the folder which contains a downloaded file. So, I've added one menu item in Download Manager context menu. It allows to do exactly that I need - copy containing folder for a downloaded file.

Hope that it will be useful for someone too. You can download this extension here.

How to get local IP address

2009-09-12T03:55:00.000-07:00

Some time ago I was need to detect local IP address of the machine where my Firefox add-on is installed. I've not found complete example. Finally, I've found the next solution:


    var dnsService = Components.classes["@mozilla.org/network/dns-service;1"].
getService(Components.interfaces.nsIDNSService);
    var ip = dnsService.resolve(dnsService.myHostName, false).getNextAddrAsString();

Nothing difficult!

How to add welcome page

2009-05-23T03:11:00.000-07:00

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

2009-04-09T03:30:00.000-07:00

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

2009-01-08T06:38:00.000-08:00

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.

2008-10-04T03:34:00.000-07:00

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: