Tutorial para crear extensiones Firefox

Realizar una extensión para Firefox puede ser una cosa tediosa, causado normalmente por la falta de manuales, howtos, siendo complicado averiguar cómo realizar una simple acción.
La gente de PC Magazine nos dan una serie de consejos o pasos a seguir para aprender a realizar nuestra propia extensión Firefox.
El primer consejo que nos ofrecen es algo que ya hemos dicho aquí, destripa una extensión ya creada, guarda el fichero .xpi en tu ordenador, renómbralo a .zip, descomprímelo y échale un vistazo a los directorios (muy importante su organización) y sus archivos (sobre todo install.rdf o install.js).
Crea primeramente la interfaz, existen interfaces más complejas, pero es preferible empezar por algo sencillo para ir aprendiendo poco a poco. Una vez creada es hora de empezar a darle funcionalidades, crear el jar con los archivos (aunque también funciona sin comprimirlo en un jar), modificar el fichero de instalación, crear el fichero .xpi (que es un zip con todo el contenido de la extensión) y por último instalarlo en el Firefox.
Make Your Own Firefox Extensions

| | |

CSSVista: editor CSS para Firefox e IE6

CSSVista es una aplicación desarrollada por la gente de SiteVista que nos permite editar CSS y ver los resultados que se producen directamente en IE6 y Firefox.
cssvista.png
Se trata de una aplicación gratuita, todavía en fase de desarrollo que nos puede ser de gran utilidad cuando maquetamos un diseño y queremos que se vea correctamente en ambos navegadores. Aunque yo prefiero usar un editor normal y refrescar el contenido en el navegador que esté probando en ese momento.
CSSVista
Vía / Lifehacker

|

Novedades en Javascript 1.8

Mientras se sigue con el desarrollo de la versión 3 de Firefox, podemos ir viendo que novedades traerá la versión 1.8 de Javascript. Las novedades son muy interesantes, pero creo que necesitarán de un cambio de modo de pensar en Javascript, ya que es algo a lo que no estamos acostumbrados.

Notación Lambda

La notación Lambda nos permite declarar funciones que devuelvan datos sin necesidad de llaves ({..}), ni de devolver directamente el resultado con return.

Por ejemplo, la siguiente función:

function(x) { return x * x; }

pasaría a ser:

function(x) x * x

Generador de expresiones

Existente ya en Phyton, nos permite generar expresiones como arrays o matrices de forma rápida y elegante. Para una explicación con un poco de profundidad, el autor del artículo usa un solucionador de Sudokus para explicarnos paso a paso cómo funcionan. Quizás un ejemplo más sencillo sea el siguiente:

// Crea un array de 100 posiciones rellenas con cero
[ 0 for ( i in 100 ) ]
// Crea una matriz identidad de 10x10
[[ i == j ? 1 : 0 for ( i in 10 ) ] for ( j in 10 )] 

También se pueden utilizar para comprimir arrays, por ejemplo quedarnos solo con los valores pares:

[i for (i in lista) if (i % 2 == 0)]

Reducción de arrays

Permite reducir iterativamente un array a un solo valor usando una función llamada de retorno.

La nomenclatura sería de la siguiente forma:

miArray.reduce( fn [, val_inicial] );
// La función sería de la siguiente manera
miArray.reduce(function(ultimo_valor, valor_actual){
return ultimo_valor + valor_actual;
});

Si combinamos los dos puntos anteriores, podemos obtener la suma de los cien primeros números de la siguiente manera:

[x for ( x in 100 )].reduce(function(a,b) a+b);

JavaScript 1.8 Progress

Vía / dzone

Vulnerabilidad remota en las extensiones de Firefox

Ha sido detectada una vulnerabilidad en Firefox (independiente de versión) que se produce en el sistema de actualizaciones de extensiones.
Este fallo se produce porque el usuario no puede confiar (trust) en el DNS o en la conexión. Extensiones importantes como Google Toolbar, Google Browser Sync, Yahoo Toolbar y Del.icio.us Extension, están expuestas a esta vulnerabilidad, la cual permitiría instalar software peligroso en nuestro sistema.
Las extensiones que se descargan desde https://addons.mozilla.org no nos deben preocupar. A parte del equipo de seguridad de Mozilla, los desarrolladores de las principales extensiones expuestas fueron avisadas hace 45 días sin que haya habido actualizaciónes.
Existe un vídeo que muestra un ataque a Google Browser Sync: (12MB Quicktime).
A Remote Vulnerability in Firefox Extensions
Vía / Techmeme

|

FUEL: framework para desarrollo de extensiones de Firefox

FUEL es un framework cuyo sentido es ayudar a realizar extensiones para Firefox de forma sencilla que accedan a las herramientas y a nivel del systema de aplicación. Para ello proveerá unas librerías estables y documentadas, obteniendo extensiones más estables y por consiguiente una aplicación más estable también.
Entre sus objetivos nos encontramos con la facilidad de acceder a las interfaces, componentes y servicios, disponer de paquetes para abrir ventanas, para tratar el nsIProcess, y para tratar ficheros, texto o stream enviado mediante XMLHttpRequest.
Es importante resaltar también que nos ayudará al acceso a datos (bookmarks, microsumarios y proveedores de búsquedas), al monitoreo de eventos y notificaciones, e interactuación con el UI de la aplicación.
Estoy deseando tener un poco de tiempo para mirarlo con detalle, ya que a veces al desarrollar una aplicación XUL nos encontramos con unas librerías un tanto enrevesadas.
FUEL
Vía / Ajaxline

Fireclipese: Debug de Firefox en Eclipse

fireclipse.pngFireclipse es un proyecto opensource que permite depurar el código javascript ejecutado en Firefox.

Las características que nos ofrece Fireclipse son las siguientes:

  • Envía los mensajes de error de la consola de Firefox a la consola de Eclipse.
  • Apunta el editor de Eclipse en la línea que Firefox ha marcado como errónea.
  • Llama a la función dump() en la consola de Eclipse.
  • Añade un botón de Eclipse en la extensión Firebug.
  • La extensión de Firebug permite: depurar el código eval(), depurar manejadores de eventos, enviar mensajes de error a Eclipse y marcar las líneas ejecutables.

fireclipse2.png

Una ayuda para aquellos que desarrollen con Eclipse y Firofox.

Fireclipse

Vía / Ajaxian

|

Koala: herramientas para hacer how-to

koala.pngIBM está desarrollando una extensión para Firefox llamada Koala que permite grabar la actividad que se desarrolla en el navegador y generar un script que se guardará en una página y que podrá ser consultado.
El ejemplo que nos ofrecen muestra cómo se accede a una página de búsquedas de casas y se van introduciendo datos para obtener los resultados deseados. En la extensión para Firefox se va mostrando mediante texto las acciones que se ejecutan, por ejemplo “Acceder a la pagina tal”, “Seleccionar ‘2 habitaciones'” y así con cada una de las acciones que hemos ido realizando. Estos textos son editables y después cuando se ejecuta el script para aprender el howto, se tienen en cuenta los datos cambiados.
koala2.png
La verdad es que estoy deseando que se haga pública esta extensión, a muchos nos podría ahorrar documentación para los proyectos.
Koala
Vía / CNET News.com

|

Palette Grabber: obtén la paleta de colores mediante Firefox

Palette Grabber es una extensión para Firefox que nos permite obtener los colores de una página web y exportarlos a un archivo para su posterior utilización.
pallettegrabber.png
El formato más sencillo al que exporta los colores es un fichero de texto con los componentes RGB de cada color en formato decimal. Pero lo que más nos puede ser útil es que lo exporta a formatos de paleta de colores de Adobe, Flash, Paintshop Pro, GIMP y Adobe Fireworks.
Esta herramienta la veo muy útil para cuando te mandan hacer un prototipo de alguna página nueva y hay que basarse en un diseño que no es tuyo, por lo que no tienes el original sobre el que se trabajó.
Palette Grabber

|

FireMarker: cómo crear una extensión para Firefox

firemarker.pngSi el otro día os hablaba de FireMarker, la extensión de Firefox para marcar texto en una página, hoy voy a intentar explicar cómo la desarrollé y así conseguir que otras personas no se encuentren con las mismas dificultades que yo.

Vamos a ir paso a paso, explicando la estructura, los distintos ficheros y sus contenidos, siempre dentro de mi limitado conocimiento, ya que lo que he aprendido ha sido destripando otras extensiones y mirando la documentación que hay sobre XUL.

Read More “FireMarker: cómo crear una extensión para Firefox”

| |

FireMarker: marca los textos mediante Firefox

firemarker.pngFireMarker es una extensión para Firefox que hemos desarrollado en Sentido Web que permite marcar partes del texto de la página que estamos visitando.

Tan solo es necesario seleccionar el texto y pinchar en el icono que aparecerá en la barra de estado de nuestro navegador.

firemarker3.png

Una vez realizada esta función, el texto se marcará según los colores que sea hayan seleccionado, que por defecto serán amarillo para el fondo y negro para el color de letra.

firemarker2.png

Los textos marcados seguirán en este estado cuando se refresque la página o se reinicie el navegador, ya que la información marcada se almacena en las preferencias del navegador.

Entre las opciones que nos ofrece esta extensión de Firefox nos encontramos con:

  • Marcar texto de distintos elementos HTML a la vez.
  • Borrar el texto marcado de todas las páginas (también de las que no se están visualizando en ese momento).
  • Borrar el texto marcado de la página actual.
  • Copiar al portapapeles el texto seleccionado de la página actual. En este caso he añadido un retorno de carro después de cada bloque de texto seleccionado.
  • Cambiar el color de fondo y de letra del texto seleccionado.

Si alguien encuentra algún problema o error sería de gran ayuda que nos lo comunicara.

Descargar FireMarker 1.0