How to create a toolbar on firefox?

Question

I need to create two toolbar on Firefox : one is horizontal on top and the other vertical on right side of the browser. But the sdk lib to firefox dont have resources to do it. Any sugestion ?

Answer 1

This might help, pretty simple guide laid out for easy reading:

http://www.borngeek.com/firefox/toolbar-tutorial/

Answer 2

Since version 1.15 the Addon SDK allows you to create toolbars and add buttons to it. I don't think it's possible to create a vertical toolbar, only horizontal ones.

There's a nice example on how to do it in the Addon SDK official repository:

/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
"use strict";

const { Toolbar } = require("sdk/ui/toolbar");
const { Frame } = require("sdk/ui/frame");
const { Button } = require("sdk/ui/button");

let button = new Button({
  id: "button",
  label: "send!",
  icon: "./favicon.ico",
  onClick: () => {
    frame.postMessage({
      hello: "content"
    });
  }
});

let frame = new Frame({
    url: "./index.html",
    onAttach: () => {
      console.log("frame was attached");
    },
    onReady: () => {
      console.log("frame document was loaded");
    },
    onLoad: () => {
      console.log("frame load complete");
    },
    onMessage: (event) => {
      console.log("got message from frame content", event);
      if (event.data === "ping!")
        event.source.postMessage("pong!", event.source.origin);
    }
});

let toolbar = new Toolbar({
  items: [frame],
  title: "Addon Demo",
  hidden: false,
  onShow: () => {
    console.log("toolbar was shown");
  },
  onHide: () => {
    console.log("toolbar was hidden");
  }
});

Also, there's an older SO thread explaining how to do it on older versions of the Addon SDK and for XUL-based addons.

Answer 3

The code above only works on Firefox Australis (upcomming version 29.0). You can use a Jetpack module like toolbarwidget-jplib by Rob--W.

So you can add widgets on the navigation bar:

require("toolbarwidget").ToolbarWidget({
toolbarID: "nav-bar", // <-- Place widget on Navigation bar
id: "mozilla-icon",
label: "My Mozilla Widget",
contentURL: "http://www.mozilla.org/favicon.ico"
});