Contenido

Mozilla JetPack, todos podemos hacer extensiones para Firefox

25 may

+ 11

Mozilla JetPack es una extensión para Firefox que permite desarrollar extensiones mediante el uso de tecnologías de desarrollo web (HTML, CSS, Javascript), aprovechándose de la potencia de Ajax y los nuevos estándares multimedia (<canvas />, <video /> y <audio />) realizar extensiones para Firefox es muy sencillo y sobretodo muy potente.

logo
(Ver Imagen)

Gracias a la integración con jQuery, el desarrollo de extensiones será realmente sencillo y la pequeña API, será más que suficiente para hacer realidad esas ideas que tenemos en mente.

La facilidad de integrar librerías externas (Google Maps, Twitter, Delicious.com,…) hará que nuestro navegador esté más conectado que nunca.

Veamos un ejemplo:

function GmailNotifier(doc){
  $(doc).click( this.goToInbox );
  this.update( doc );
  setInterval( function(){
    this.update(doc);
  }, 60*1000 );
}

GmailNotifier.prototype = {
  goToInbox: function(){
    jetpack.tabs.open("http://mail.google.com");
    jetpack.tabs[ Jetpack.tabs.length-1 ].focus();
  },

  update: function(doc){
    var url = "http://mail.google.com/mail/feed/atom";
    doc = $(doc);
    $.get( url, function(xml){
      var el = $(xml).find("fullcount"); // Unread message count

      if( el ){
        var count = el.get(0).textContent;
        doc.find("#count").text( count );
      }
      else{
        doc.find("#count").text( "Login" );
      }
    });
  }
}

jetpack.statusBar.append({
  html: '<img src="http://mail.google.com/mail/images/favicon.ico"><span id="count"></span>',
  onReady: function(doc){
    var gmail = new GmailNotifier(doc);
    $("#count", doc).css({
      position: "absolute",
      left: 4, top: 8,
      fontSize: "10px",
      cursor: "pointer",
      backgroundColor: "rgba(255,255,255,.8)"
    });
  },
  width: 20
});

Este código nos mostrará un icono de gMail con el número de emails pendientes por leer en la parte inferior de nuestro Firefox (statusbar). Revisa el tutorial para ver que cosillas se pueden hacer.

Ya tenemos una buena serie de demos desarrolladas por que extendamos nuestro navegador.

Gracias Edu.

  • El otro día ya le estuve dando un vistazo, no he profundizado mucho en el tema pero en los ejemplos y en la API solo veo extensiones que generalmente añaden un boton en la barra de estado y similares, al estilo de GmailNotifier. Se podrán emplear otros elementos UI como ventanas, textbox, select… etc??? Alguien sabe algo?

  • @Jordi: Hola. pon lo que he leeido en la wiki de mozilla, los objetos de UI que se podran creear son:
    Menu: Como el menú de archivo, editar, …
    Menuitem: Una de las opciones de los menús de arriba
    ContextMenu: El menú contextual del ratón
    Toolbar: Una barra de herramientas
    ToolbarButton: Un botón en una barra de herramientas
    StatusbarItem: Un objeto en la barra de estado
    Shortcut: No se lo que es, pero supongo que sera un acceso directo en el escritorio

  • @Jordi: se puede usar html, lo que te permite usar cualquier elemento de una web, lo que no se es si se puede insertar xul, creo que si…

  • Hola Andrés. Tengo una duda: En el código que pones de ejemplo, sin duda “inspirado” en el código de ejemplo de la página oficial hay una línea que indica claramente:

    jetpack.statusBar.append({
    html:

    ,

    haciendo uso de la sintaxis de E4X para definir las etiquetas HTML. Me chocó esa sintaxis desde que la ví en Ajaxian, y quise usar algo más tradicional. En mi página reescribí esa línea a una cadena de texto que, “casualmente”, coincide exactamente con la que aparece en este post. Si la has tomado de mi blog, que no lo sé, te agradecería un enlace de referencia. Al.

  • Hola :)

    Estoy usandolo a full y super contento, pero tengo una duda a ver si alguien se le ocurre, quiero ejecutar un codigo javascript que se encuentra en la pagina (abierta en otro tab), se podria??

    Muchas gracias!

  • como ago para descargar mozilla llega hata 99 y no carga mas ayudaaa

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.