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 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: