Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Jetpack module to place widgets from the Firefox Add-on SDK on any toolbar
Branch: master

SDK Widgets on toolbars

This Jetpack module extends the sdk/widget module with a few additional properties, allowing Firefox Add-on developers to easily place widgets on toolbars.


The API is identical to sdk/widget (only new properties were added).

Here's an example, based on the first example from the sdk/widget documentation. The created widget is not placed on the addon bar, but on the navigation bar.

    toolbarID: "nav-bar", // <-- Place widget on Navigation bar
    id: "mozilla-icon",
    label: "My Mozilla Widget",
    contentURL: ""

ToolbarWidget creates a sdk/widget instance, moves it to the desired toolbar, and returns the Widget instance.
This instance has a read-only property called toolbarID. If you want to move the widget, destroy it and create it again.

Quick reference

See [docs/] for more details. Here is a concise reference for the ToolbarWidget constructor:

  • toolbarID - string. The widget will be put on the toolbar with this ID.
  • `insertBefore - optional string. Put widget before the XUL element with this ID.
  • forceMove - optional boolean. Whether to force the widget to be placed at the specified location.
  • height - optional number. The height of the widget.
  • autoShrink - optional boolean, default true. Whether to reduce the widget's height when the specified height exceeds the toolbar's height. When set to true, the user's icon size preference will automatically be respected.
  • aspectRatio - optional number. Set this property to force the width to depend on the height (width = height / aspectRatio).

Plus all methods and properties from the sdk/widget module


You can add the module globally (in the packages directory under the SDK root), to make it available to all of your Jetpack projects, or add it to a single project (in the packages directory under your add-on's root).

The official documentation contains a tutorial on installing third-party modules, which suggests to download and extract an archive.
I strongly recommend to use git for this purpose, because it makes package management a lot easier. For example:

# Go to the packages directory of the SDK's root.
cd /opt/addon-sdk/packages
# Clone the repository (creates a directory "toolbarwidget-jplib")
git clone git://
# Done! You may want to update and view the documentation...
addon-sdk && cfx sdocs
# Later, when you want to update the package to the latest version...
cd /opt/addon-sdk/packages/toolbarwidget-jplib
git pull

After installing the module, declare the dependency in package.json:

    "dependencies": ["toolbarwidget"],


The following standard Jetpack modules were used:


  • browser-action - Jetpack module which brings Google Chrome's chrome.browserAction API to Firefox.


Created by Rob Wu
Inspired by Erik Void's toolbarbutton, a module which allows one to easily create simple toolbar buttons.

Released under a MIT license.

Something went wrong with that request. Please try again.