Tutorial para crear extensiones Firefox

ByLuis

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

Similar Posts

| |

Motor de búsqueda para Sentido Web en Firefox

ByLuis

Bueno, esto ha surgido de una necesidad propia de buscar en Sentido Web referencias a entradas anteriores. Y he pensado en subir el motor de búsqueda para Firefox, por aquellos que quieran realizar consultas a Sentido Web de forma sencilla.
firefox-search.png
Tan solo tienes que pinchar aquí para que se instale el motor de búsqueda en tu Firefox, y si te arrepientes, que no creo, lo puedes desinstalar con SearchPluginHacks.

|

Escribir en ficheros mediante XUL

ByLuis

Leyendo la entrada de aNieto2K sobre logs en Javascript, me he acordado de que hace tiempo que quiero comentar cómo escribir en ficheros mediante XUL en extensiones para Firefox.

Aunque la principal función puede ser la escritura de opciones o ficheros de configuración o guardar datos, el motivo por el que yo lo busqué era para hacerme unos logs que me faciliten el trabajo del desarrollo de una extensión para Firefox (de aquí la asociación con el post de aNieto2K).

var savefile = "c:\\displaynotes.log.txt";
try {
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
} catch (e) {
alert("Permission to save file was denied.");
}
var file = Components.classes["@mozilla.org/file/local;1"]
.createInstance(Components.interfaces.nsILocalFile);
file.initWithPath( savefile );
if ( file.exists() == false ) {
alert( "Creating file... " );
file.create( Components.interfaces.nsIFile.NORMAL_FILE_TYPE, 420 );
}
var outputStream = Components.classes["@mozilla.org/network/file-output-stream;1"]
.createInstance( Components.interfaces.nsIFileOutputStream );
// Suponemos que existe una variable con el texto llamada content
outputStream.init( file, 0x04 | 0x10, 420, 0 );
var result = outputStream.write( content, content.length );
outputStream.close();

En el init del outputStream nos encontramos con una serie de flags para abrir el fichero que se usan como máscara. Estos flags tienen los siguientes posibles valores:

RDONLY         0x01
PR_WRONLY      0x02
PR_RDWR        0x04
PR_CREATE_FILE 0x08
PR_APPEND      0x10
PR_TRUNCATE    0x20
PR_SYNC        0x40
PR_EXCL        0x80

A parte, existe un parámetro para indicar el modo del fichero, válido únicamente para entornos Unix:

00400   Read by owner.
00200   Write by owner.
00100   Execute (search if a directory) by owner.
00040   Read by group.
00020   Write by group.
00010   Execute by group.
00004   Read by others.
00002   Write by others
00001   Execute by others.

No recuerdo de dónde saqué esta información, por lo que no os puedo poner la referencia.

|

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

ByLuis

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”

Firefox: nueva versión con soporte para Mac con Intel

ByLuis

firefox.pngHa salido la versión 1.5.0.2 de Firefox, entre cuyas novedades encontramos que soporta Mac OS X bajo procesador Intel. Pocas novedades hay, tan solo la posibilidad de saltarse la herramienta de importación que aparece en la primera ejecución, petición de comentarios cuando se desinstala el navegador y una herramienta para los testers que le ayudan a localizar memory leaks. Como cabe esperar, también han sido corregidos algunos fallos.
Firefox 1.5.0.2

Vulnerabilidad remota en las extensiones de Firefox

ByLuis

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

Firebug 1.0, lo que nos va a ofrecer

ByLuis

firebug1.0.pngYa en otras ocasiones hemos hablado de Firebug, y esta vez no puede ser menos debido a todo lo que nos va a ofrecer la versión 1.0, lo cual es mucho:

  • Usabilidad: posibilidad de abrirlo en una ventana nueva, pudiendo situarla en un segundo monitor. Listas de páginas en las que queremos que esté activo o no Firebug. Tecla de acceso directo para abrir Firebug de forma normal o en una ventana nueva. Facilidad de lectura ya que se puede aumentar o disminuir el tamaño de la letra.
  • Código HTML: visor de código fuente de forma estructurada, con posibilidad de desplegar etiquetas. Ver qué es lo que se está modificando en la página web. Editar el código HTML en el momento. Encontrar elementos HTML en el código posicionándonos en ellos con el ratón. Busquedas. Si se modifica la página y se recarga, Firebug seguirá apuntando al elemento que teníamos antes de la recarga. Copiar el código HTML al portapapeles.
  • CSS: Inspección en cascada. Previsualización de colores e imágenes. Facilidad para ajustar los estilos mediante la edición de las propiedades. Autocompletado. Modificar los valores numéricos aumentando y disminuyendo los valores usando las flechas de cursor. Selección de valores posibles de los estilos. Posibilidad de desactivar propiedades en los estilos para ver las diferencias. Inspeccionar cualquier hoja de estilos. Copiar al portapapeles colores y rutas de imágenes.
  • Visualización de CSS: Se puede ver el modelo de caja de los elementos HTML. De igual manera, se puede visualizar las medidas de la caja del elemento. Uso de reglas y guías como si se tratara de un programa de diseño gráfico. Modificación de las medidas de las cajas en el acto.
  • Monitor de red: Toma los tiempos de carga de del fichero y de los ficheros adjuntos. Separar los tiempos por tipo de fichero. Distinción entre ficheros de la caché y los que se han descargado de la red. Visualizador de la cabecera HTTP. Monito de las peticiones XMLHTTPRequest.
  • Debug: Permite encontrar ficheros js de forma sencilla. Poner puntos de interrupción en nuestro código. Incluir condiciones en los puntos de interrupción. Ejecución paso a paso. Parar automaticamente la ejecución si encuentra un error. Cuando se produce un error existe la posibilidad de ver la pila de llamdas a funciones que esperan respuesta. Visor de los valores de los objetos y de las propiedades. Uso de tooltips cuando está parada la ejecución del script para ver el valor de las variables. Medición de tiempos de ejecución. Logs de las llamadas a funciones. Acceso rápido a números de línea.
  • Búsqueda de errores: Los errores se muestran en la barra de estado del navegador. Visualización de los errores javascript solo de la página a la que se accede. Información descriptiva de los errores. Acceso fácil al debugger. Búsquedas rápidas. Filtro por tipo de errores.
  • Inspector DOM: Diferenciación entre código estándar y el creado mediante Javascript. Resumen informativo de los objetos inspeccionados. Edición de los objetos con posibilidad de autocompletado. Al recargar la página accede al mismo objeto que estaba seleccionado anteriormente. Navegación por el código Javascript.
  • Ejecución de código Javascript: consola para ejecución de código javascript. Autocompletado. El texto de la consola no es tratado como texto plano sino como hipertexto.
  • Trazas: posibilidad de mostrar trazas en la consola desde Javascript. Las trazas pueden ser de texto, objetos y texto formateado usando variables. Distintos colores para distintos tipos de logs (error, warm, debug e info). Marcas de tiempo. Stack traces. Agrupación de trazas. Inspección de objetos.

Estoy deseando que salga la beta para poder probarla.

Firebug

Vía / Ajaxian