Techno Barje

Hackability Test : Google Chrome vs Mozilla Firefox (With Jetpack)

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 );
     
   }
 }));

jetpack-context.png A lot more information here


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!"

   }
 });

jetpack-slidebar.png More details here


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"] }
  ]
};

jetpack-settings.png 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'}); 

jetpack-notifications.png More info here


Comments