How to change background color of notificationbox

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

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

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

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

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

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

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

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>