firefox addon : adding icon to context menu

Question

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

Daubigny

Answer 1

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');

Holds

Thank you, It worked :), struggling to this for the past 2 hours, finally class = "menu-iconic" made my job get done. but one question, how does it got iconic on adding a class attribute ? – Daubigny

Well I guess that Firefox uses some CSS to show the image and maybe also align the text correctly. In the end, the XUL interface is also just styled with CSS. – Holds

Answer 2

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

Mirepoix

This question explicitly has the XUL tag and does not have the firefox-addon-sdk tag. While it is not wrong to provide an answer here that is for the Add-On SDK, the wording of your first paragraph implies that there is something wrong with using XUL at this time. That is not the case. It has not, yet, been deprecated. – Springhalt

The only statement that has been made is that deprecation may happen sometime in the future. "We don’t have a specific timeline for deprecation, but most likely it will take place within 12 to 18 months from now." Now being 2015-08-21 in that statement. – Springhalt

I wouldn't to spend time developing something that is not really documented anymore and will be depreciated in ~1 years time, but each to their own – Mirepoix