Here is a small summary of what we are able to extend in Chrome and
Firefox(with Jetpack).
How to add a new item in context menu (right click menu)
In Chrome
You just can’t, see here.
In Firefox, with Jetpack
jetpack.future.import("menu");
jetpack.future.import("selection");
jetpack.menu.context.page.add(function(context)({
label: "My context menu item",
command: function(target) {
// Do something fun with this selection
jetpack.notifications.show( "Current selection : "+jetpack.selection.text );
}
}));
How to add a sidebar ?
In Chrome
You just can’t, it’s a well known limitation, but nobody say it loud.
In Firefox, with Jetpack
jetpack.future.import("slideBar");
jetpack.slideBar.append({
url: "about:blank",
width: 220,
persist: true,
autoReload: false,
onReady: function(slide){
// Do something fun with this sidebar
var doc = slide.contentDocument;
doc.body.innerHTML="Hello world from techno-barje!"
}
});
How to have settings and display them to users ?
In Chrome
You have to add custom menu somewhere, as you want. So each extension may display a different way to fill up their settings …
In Firefox, with Jetpack
var manifest = {
settings: [
{
name: "twitter",
type: "group",
label: "Twitter",
settings: [
{ name: "username", type: "text", label: "Username" },
{ name: "password", type: "password", label: "Password" }
]
},
{
name: "facebook",
type: "group",
label: "Facebook",
settings: [
{ name: "username", type: "text", label: "Username", default: "jdoe" },
{ name: "password", type: "password", label: "Secret" }
]
},
{ name: "music", type: "boolean", label: "Music", default: true },
{ name: "volume", type: "range", label: "Volume", min: 0, max: 10, default: 5 },
{ name: "size", type: "number", label: "Size" },
{ name: "mood", type: "member", label: "Mood", set: ["happy", "sad", "nonchalant"] }
]
};
Full planned API(work in
progress)
You can track
progress here
Jetpack demo
here
How to display a system notification (or something like) ?
In Chrome
You may display a custom HTML popup, but you will have to handle youself display/hide of this popup, his style and each extension will have his notification system …
In Firefox, with Jetpack
jetpack.notifications.show({title: 'hai2u', body: 'o hai.', icon: 'http://www.mozilla.org/favicon.ico'});