How to create a toolbar on firefox? - 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"
});