Drawing UI overlays from bootstrapped extensions

Question

I was reading the documentation on MDN about bootstrapped extensions and I came across this : https://developer.mozilla.org/en-US/docs/Extensions/Bootstrapped_extensions#Adding_user_interface_manually

According to this you have to add persistent UI elements "manually" from a bootstrapped extension. You can't just add xul overlays. I can't find a single example anywhere on how you can do that.

I am trying to add a menu item to the context menu. This :

var contextMenu = window.document.getElementById("contentAreaContextMenu");

Gets me the contentAreaContextMenu object but it doesn't seem to behave at all like a DOM tree or the nsContextMenu object described in the source code. So how am I supposed to add menu items to it? Moreover, say I only want to show the item in the context menu when I right-click an image. How can I make them behave a certain way depending on the element?

This question was really old : How to add UI elements from a bootstraped Firefox addon Anything changed? All linked pages from that post are 404.

Any thoughts?

Answer 1

Plain bootstrapped add-ons are the most complicated ones to create, because you basically have to do a lot of the things yourself that XUL or Add-on SDK add-ons more or less get for free. (Actually the SDK is not much more than a fat layer on top of bootstrapped add-ons). So unless you're willing to learn a ton of Gecko / toolkit / Firefox internals, you should prefer XUL overlay add-ons or SDK add-ons to bootstrapped ones.

To answer your question: You have to create the XUL elements (e.g. a <menuitem>) using the regular DOM API, so something like this:

// Provided you already obtained a reference to some |window|
var document = window.document;
var contextMenu = document.getElementById("contentAreaContextMenu");
var menuItem = document.createElement("menuitem");
menuItem.setAttribute("label", "my item");
contextMenu.appendChild(menuItem);
menuItem.addEventListener("command", function() {
  window.alert("clickety-click");
}, false);

You'll also have to write some code that ensures the menu item and listener are removed when the window is closed (to avoid leaking the window) or when your add-on is disabled/removed (to avoid leaving a mess behind).

I suggest you have a look at other bootstrapped add-ons. E.g. restartless-restart is pretty small add-on that shouldn't be too hard to follow, but that also adds a toolbar button and menu item, among other things. Disclaimer: I contributed to that add-on a bit, but it is not "mine".

I myself ended up writing a small toolset to help me create add-ons which I called extsdk, because I disliked the SDK for being too fat and limited (the SDK situation improved somewhat since then).