firefox addon : adding icon to context menu

I'm trying to build a firefox addon & I want to add image/icon in the right click content menu , for example, firebug had an icon in开发者_StackOverflow the right click context menu,

I wanna do something similar, my addon also consists of menu items

structure of my addon in context menu :

[icon] [menu] 
            [menu item 1]
            [menu item 2]
            [menu item 3]
            [menu item 4]

How can I do it ?

You have to set the image attribute, give the element the class menu-iconic and store the image so that you can access it.

XUL:

<menu id="someid" label='your label'
          class="menu-iconic"
          image='chrome://addon/skin/image.png'>
...
</menu>

JavaScript:

You can also set or change the image dynamically (get a reference to the element first):

menu.setAttribute('image', 'chrome://addon/skin/image.png');

You can add a context menu using the new Mozilla Add-ons SDK image using the image property

under Optional options:

just add the image attribute like this

 var menuItem = contextMenu.Menu({
    include: "*.stackoverflow.com",
    label: "do something",
    image: "data:image/png;base64,iVBORw0KGgoAA ...",
    context: contextMenu.SelectorContext('div.someclass'),
    contentScriptFile: data.url("cs.js"),
    items: [
        contextMenu.Item({ label: "Item 1", data: "item1" }),
        contextMenu.Item({ label: "Item 2", data: "item2" }),
        contextMenu.Item({ label: "Item 3", data: "item3" })
      ]
});

image: The item's icon, a string URL. The URL can be remote, a reference to an image in the add-on's data directory, or a data URI.

Mozilla context menu help page for Addon SDK