eBlogzilla

Thursday, August 26, 2010

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!