The add-on bar

  • Revision slug: The_add-on_bar
  • Revision title: The add-on bar
  • Revision id: 90126
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment 5 words added, 15 words removed

Revision Content

{{ fx_minversion_header("4") }}{{ draft() }}

Firefox 4 eliminates the status bar from the bottom of the browser window in favor of a new toolbar located at the bottom of the window. This new toolbar, with the ID "addon-bar", is a standard XUL {{ XULElem("toolbar") }}; add-ons can insert content into it, and the user can drag buttons into it while customizing their toolbars. This is the primary difference between the add-on bar and the old status bar; you can now put any XUL element into it, since it's a standard toolbar.

Note: For the time being, there is a status bar shim included so that add-ons that expect the status bar to be present will still work.

Adding an element to the add-on bar

The add-on bar is a XUL toolbar with the ID "addon-bar". The code below locates the most-recently used window and adds a new item to the add-on bar that simply displays the text "Hello world!" using a XUL {{ XULElem("label") }} element.

// Find the most recently used window

var mediator = Components.classes['@mozilla.org/appshell/window-mediator;1']
                  .getService(Components.interfaces.nsIWindowMediator);
var doc = mediator.getMostRecentWindow("navigator:browser").document;

// Get the add-on bar for that window

var addonBar = doc.getElementById("addon-bar");

// Construct the new toolbar item

var newItem = doc.createElement("toolbaritem");
var itemLabel = doc.createElement("label");

// Add the item to the toolbar and set its text label

newItem.appendChild(itemLabel);
addonBar.appendChild(newItem);
itemLabel.value = "Hello world!";
TODO: Need to explain how to do this only once and then persist the item on restarts (while letting users move and remove the item).

How to use one overlay per Firefox version

Adding support for the add-on bar while staying compatible with Firefox 3.6 and older will require using two overlays.
The chrome.manifest file can specify which file is used by which Firefox version by using manifest flags:

overlay chrome://browser/content/browser.xul chrome://myaddon/content/myaddon/overlayold.xul application={ec8030f7-c20a-464f-9b0e-13a3a9e97384} appversion<4.0
overlay chrome://browser/content/browser.xul chrome://myaddon/content/myaddon/overlay.xul application={ec8030f7-c20a-464f-9b0e-13a3a9e97384} appversion>=4.0

Note: the appversion has to be at least 2 digits long or it won't work with versions of Gecko before 1.8.0.13 and 1.8.1.5.

Adding a button by default

See: Adding a button by default

Appearance differences

  • Since the browser no longer occupies a large percentage of the bar with status information, the entire area is available for add-ons to use.
  • The add-on bar is empty and hidden by default; the user must elect to make it visible.
  • If a restartless add-on installs itself to the add-on bar directly and the bar is not already visible, the bar becomes visible automatically.
  • If uninstalling a restartless add-on makes the number of items in the add-on bar become zero, the bar is hidden automatically.

See also

Revision Source

<p>{{ fx_minversion_header("4") }}{{ draft() }}</p>
<p>Firefox 4 eliminates the status bar from the bottom of the browser window in favor of a new toolbar located at the bottom of the window. This new toolbar, with the ID "addon-bar", is a standard XUL {{ XULElem("toolbar") }}; add-ons can insert content into it, and the user can drag buttons into it while customizing their toolbars. This is the primary difference between the add-on bar and the old status bar; you can now put any XUL element into it, since it's a standard toolbar.</p>
<div class="note"><strong>Note:</strong> For the time being, there is a status bar shim included so that add-ons that expect the status bar to be present will still work.</div>
<h2>Adding an element to the add-on bar</h2>
<p>The add-on bar is a XUL toolbar with the ID "addon-bar". The code below locates the most-recently used window and adds a new item to the add-on bar that simply displays the text "Hello world!" using a XUL {{ XULElem("label") }} element.</p>
<pre class="brush: js">// Find the most recently used window

var mediator = Components.classes['@mozilla.org/appshell/window-mediator;1']
                  .getService(Components.interfaces.nsIWindowMediator);
var doc = mediator.getMostRecentWindow("navigator:browser").document;

// Get the add-on bar for that window

var addonBar = doc.getElementById("addon-bar");

// Construct the new toolbar item

var newItem = doc.createElement("toolbaritem");
var itemLabel = doc.createElement("label");

// Add the item to the toolbar and set its text label

newItem.appendChild(itemLabel);
addonBar.appendChild(newItem);
itemLabel.value = "Hello world!";
</pre>
<div class="note"><strong>TODO:</strong> Need to explain how to do this only once and then persist the item on restarts (while letting users move and remove the item).</div>
<h2>How to use one overlay per Firefox version</h2>
<p>Adding support for the add-on bar while staying compatible with Firefox 3.6 and older will require using two overlays.<br>
The <a href="/en/Chrome_Registration" title="https://developer.mozilla.org/en/chrome_registration">chrome.manifest</a> file can specify which file is used by which Firefox version by using <a href="/en/Chrome_Registration#Manifest_flags" title="https://developer.mozilla.org/en/chrome_registration#Manifest_flags">manifest flags</a>:</p>
<pre lang="en"><span id="the-code">overlay <a href="http://mxr.mozilla.org/services-central/search?string=browser&amp;find=contents.rdf">chrome://</a><a href="http://mxr.mozilla.org/services-central/search?string=browser&amp;find=chrome%5C.manifest">browser/</a><a href="http://mxr.mozilla.org/services-central/search?string=browser&amp;find=chrome%5C.manifest&amp;filter=content">content</a><a href="http://mxr.mozilla.org/services-central/find?string=/browser.xul&amp;hint=browser/fx-sync/addon/chrome.manifest.in">/browser.xul</a> <a href="http://mxr.mozilla.org/services-central/search?string=weave&amp;find=contents.rdf">chrome://</a><a href="http://mxr.mozilla.org/services-central/search?string=weave&amp;find=chrome%5C.manifest">myaddon/</a><a href="http://mxr.mozilla.org/services-central/search?string=weave&amp;find=chrome%5C.manifest&amp;filter=content">content</a><a href="http://mxr.mozilla.org/services-central/find?string=/overlay.xul&amp;hint=weave/firefox/fx-sync/addon/chrome.manifest.in">/</a></span><a href="http://mxr.mozilla.org/services-central/search?string=weave&amp;find=chrome%5C.manifest">myaddon</a><span id="the-code"><a href="http://mxr.mozilla.org/services-central/find?string=/overlay.xul&amp;hint=weave/firefox/fx-sync/addon/chrome.manifest.in">/overlayold.xul</a> application={ec8030f7-c20a-464f-9b0e-13a3a9e97384} appversion&lt;4.0</span>
<span id="the-code">overlay <a href="http://mxr.mozilla.org/services-central/search?string=browser&amp;find=contents.rdf">chrome://</a><a href="http://mxr.mozilla.org/services-central/search?string=browser&amp;find=chrome%5C.manifest">browser/</a><a href="http://mxr.mozilla.org/services-central/search?string=browser&amp;find=chrome%5C.manifest&amp;filter=content">content</a><a href="http://mxr.mozilla.org/services-central/find?string=/browser.xul&amp;hint=browser/fx-sync/addon/chrome.manifest.in">/browser.xul</a> <a href="http://mxr.mozilla.org/services-central/search?string=weave&amp;find=contents.rdf">chrome://</a><a href="http://mxr.mozilla.org/services-central/search?string=weave&amp;find=chrome%5C.manifest">myaddon/</a><a href="http://mxr.mozilla.org/services-central/search?string=weave&amp;find=chrome%5C.manifest&amp;filter=content">content</a><a href="http://mxr.mozilla.org/services-central/find?string=/overlay.xul&amp;hint=weave/firefox/fx-sync/addon/chrome.manifest.in">/</a></span><a href="http://mxr.mozilla.org/services-central/search?string=weave&amp;find=chrome%5C.manifest">myaddon</a><span id="the-code"><a href="http://mxr.mozilla.org/services-central/find?string=/overlay.xul&amp;hint=weave/firefox/fx-sync/addon/chrome.manifest.in">/overlay.xul</a> application={ec8030f7-c20a-464f-9b0e-13a3a9e97384} appversion&gt;=4.0</span>
</pre>
<p>Note: the <span id="the-code">appversion has to be at least 2 digits long or it won't work with v</span>ersions of Gecko before 1.8.0.13 and 1.8.1.5.</p>
<h3 class="editable">Adding a button by default</h3>
<p>See: <a href="/en/Code_snippets/Toolbar#Adding_button_by_default" title="https://developer.mozilla.org/en/Code_snippets/Toolbar#Adding_button_by_default">Adding a button by default</a></p>
<h2>Appearance differences</h2>
<ul> <li>Since the browser no longer occupies a large percentage of the bar with status information, the entire area is available for add-ons to use.</li> <li>The add-on bar is empty and hidden by default; the user must elect to make it visible.</li> <li>If a restartless add-on installs itself to the add-on bar directly and the bar is not already visible, the bar becomes visible automatically.</li> <li>If uninstalling a restartless add-on makes the number of items in the add-on bar become zero, the bar is hidden automatically.</li>
</ul>
<h2>See also</h2>
<ul> <li>The <a class="external" href="http://mike.kaply.com/2011/01/25/the-firefox-4-add-on-bar-for-developers" title="http://mike.kaply.com/2011/01/25/the-firefox-4-add-on-bar-for-developers">Firefox 4 add-on bar for developers</a>, by Mike Kaply</li>
</ul>
Revert to this revision