Add-ons using the techniques described in this document are considered a legacy technology in Firefox. Don't use these techniques to develop new add-ons. Use WebExtensions instead. If you maintain an add-on which uses the techniques described here, consider migrating it to use WebExtensions.
From Firefox 53 onwards, no new legacy add-ons will be accepted on addons.mozilla.org (AMO).
From Firefox 57 onwards, WebExtensions will be the only supported extension type, and Firefox will not load other types.
Even before Firefox 57, changes coming up in the Firefox platform will break many legacy extensions. These changes include multiprocess Firefox (e10s), sandboxing, and multiple content processes. Legacy extensions that are affected by these changes should migrate to WebExtensions if they can. See the "Compatibility Milestones" document for more.
A wiki page containing resources, migration paths, office hours, and more, is available to help developers transition to the new technologies.
Adding a toolbar button
There are two tutorials available:
- An elaborate step by step tutorial for beginners: Custom Toolbar Button
- A tutorial describing the steps needed to add a toolbar button assuming you already have a working extension and know the basics of extension development: Creating toolbar buttons
Adding button by default
When you create and deploy your extension and include a toolbar button for it by overlaying the Customize toolbarpalette, it is not available by default. The user has to drag it onto the toolbar. The following code will place your button on the toolbar by default. This should only be done on the first run of your add-on after installation so that if the user decides to remove your button, it doesn't show up again every time they start the application.
Notes
- Insert your button by default only once, at first run, or when an extension update adds a new button.
- Please only add your button by default if it adds real value to the user and will be a frequent entry point to your extension.
- You must not insert your toolbar button between any of the following elements: the combined back/forward button, the location bar, the stop botton, or the reload button. These elements have special behaviors when placed next to eachother, and will break if separated by another element.
/**
* Installs the toolbar button with the given ID into the given
* toolbar, if it is not already present in the document.
*
* @param {string} toolbarId The ID of the toolbar to install to.
* @param {string} id The ID of the button to install.
* @param {string} afterId The ID of the element to insert after. @optional
*/
function installButton(toolbarId, id, afterId) {
if (!document.getElementById(id)) {
var toolbar = document.getElementById(toolbarId);
// If no afterId is given, then append the item to the toolbar
var before = null;
if (afterId) {
let elem = document.getElementById(afterId);
if (elem && elem.parentNode == toolbar)
before = elem.nextElementSibling;
}
toolbar.insertItem(id, before);
toolbar.setAttribute("currentset", toolbar.currentSet);
document.persist(toolbar.id, "currentset");
if (toolbarId == "addon-bar")
toolbar.collapsed = false;
}
}
if (firstRun) {
installButton("nav-bar", "my-extension-navbar-button");
// The "addon-bar" is available since Firefox 4
installButton("addon-bar", "my-extension-addon-bar-button");
}