Mozilla Firefox/Configuración/Crear una extensión para Firefox 3

Crear una extensión para Firefox 3

En esta parte te explicaremos paso a paso como llevar a cabo el desarrollo de una extensión personalizada para Firefox 3. De esta forma el lector podrá generar de forma fácil extensiones que le permitan personalizar su Firefox, teniendo en cuenta que serán compatibles a partir de Firefox3.0 en adelante.

En el primer capítulo se dará una breve introducción a las extensiones para Firefox. A continuación se discutirán algunos temas a tener en cuenta respecto a la compatibilidad entre distinas versiones de Firefox. En el seguno capítulo se comenzará a describir paso a paso como desarrollar una extensión. Por último, se explicará como generar el instalador de la extensión y los pasos a seguir para su instalación.

La compatibilidad

Para más información, véase el artículo «Características de Mozilla Firefox» en Wikipedia.

En la siguiente sección te daremos una breve introducción de que son las extensiones y las funcionalidades que las mismas brindan. También se tratará el tema de la compatibilidad.

Cómo verificarlo

Dado el rápido avance que ha tenido Firefox en los últimos meses, algunas funciones de JavaScript han dejado de ser compatibles con Firefox. A su vez, se han modificado las estructuras que los archivos manifiest han de tener. Las referencias al browser.xul también se ha modificado. Es importante que el lector se encuentre al tanto de dichos cambios, de lo contrario su extensión no será compatible con las últimas versiones de Firefox. Otro punto que se debe considerar, es el tema de los Managers que Firefox posee (ejemplo: loginManager). Los mismos también han sido modificados para las versiones 3.0.*. Por mas información se puede visitar la siguiente página: Updating extensions for Firefox 3

Comenzando a crear una extensión

El siguiente paso te ayudaremos a iniciar tu creación de extensión básica. Se indicarán los archivos que se deberán crear, la estructura de las carpetas y el directorio raíz donde las mismas deben ser guardadas.

Estructura de las carpetas

Existe una estructura obligatoria definida que las extensiones deberán cumplir. Dicha estructura define el nombre de las carpetas, la estructura jerárquica, el tipo de archivos que contendrá cada una y el lugar donde se deberán almacenar para que sean reconocidas por Firefox.

La carpeta raíz

Al comenzar se deberá crear una carpeta con el nombre identificador de la extensión. Dicho nombre deberá ser único y corresponder con el nombre definido en el archivo de instalación. Existen dos formas de nombrar la carpeta raíz de la extensón. Como se mencionó, este nombre debe de ser único, por lo tanto la primera alternativa es generar un identificador GUID para la misma. Para poder generar un identificador único en Windows existe el comando guidgen y en Linux uuidgen. Por ejemplo: {1ca6f699-f8f3-479b-983b-20775f09f755}

La segunda alternativa es generar el nombre con formato de correo electrónico, no se recomienda que sea un correo personal sino que tan solo corresponda la estructura. Por ejemplo, llamaremos a nuestra extensión con el siguiente nombre: miextension@undominio. Dentro de la carpeta raíz se creará toda la estructura correspondiente a la extensión.

La carpeta Chrome

La siguiente carpeta que crearemos será chrome. El chrome se utiliza para cargar los archivos XUL del navegador. El objetivo que se buscó al crear chrome es que los archivos XUL se almacenen bajo un path que no varíe de plataforma en plataforma sino que sea estándar para todas las implementaciones, independientemente del sistema operativo subyacente. Por ejemplo el browser del navegador Firefox lo podemos encontrar en chrome://browser/content/browser.xul.

A su vez el chrome le indica al navegador Firefox, que lo que se encuentra debajo de ella deberá ser interpretado por el navegador y gestionado de forma especial.

Dentro de la carpeta chrome, se encontraran los archivos correspondientes a la definición de la interfaz de la exensión (XUL), la lógica (js) y estilos (css) que esta utilice.

miextension@undominio/chrome/

Carpeta content: La carpeta content contendrá todo el código de definición de interfaz (archivos XUL), y toda la lógica necesaria para implementar el comportamiento de la extensión. La lógica puede ser desarrollada principalmente a través de Javascript.

miextension@undominio/chrome/content/

Carpeta locale: La carpeta locale es utilizada para almacenar los dtd u archivos de configuración de los distintos idiomas. De esta forma se permite generar una extensión multilenguaje, traduciendo la interfaz y los mensajes por pantalla a un idioma determinado.

miextension@undominio/chrome/locale/

Carpeta skin: Dentro de la carpeta skin se guardan los estilos css a ser utilizados en la interfaz. También se encuentran almacenadas las imágenes a desplegar.

miextension@undominio/chrome/skin/

La carpeta Default

La carpeta default permite definir los textos y mensajes que serán utilizados en la extensión. La carpeta en cuestión no es obligatoria, ya que los textos y mensajes pueden ser embebidos dentro del código js. La idea detrás de tener un archivo de propiedades, es facilitar el mantenimiento y la actualización de los mensajes, textos e imágenes.

Carpeta libs

La carpeta donde se guardarán las librerías utilizadas por la extensión será libs. No existe una ubicación determinada para la misma, pero es recomendable colocarla al mismo nivel de la carpeta chrome o al mismo nivel de las carpetas content y locale

La carpeta Profile

En carpeta profile, Firefox almacena todos los datos referente al usuario, ya sea información personal, marcadores, extensiones y configuración general del usuario. Dentro de la carpeta profile del usuario, se encuentra la carpeta extensions, bajo la cual se guardan las extensiones.

Para que Firefox vea la extensión en desarrollo, la estructura de carpetas que recién se mencionó, se deberá colocar debajo de la carpeta extensions. Cuando se instala una extensión, Firefox la coloca debajo de la dicha carpeta de forma automática, pero para poder ir probando la extensión en desarrollo, se deberá colocar de forma manual.

En windows la carpeta profile se encuentra en Documents and Settings/myuser/Aplication Data/Mozilla/Firefox/Profiles.

En windows Vista, la carpeta profile esta en Users\[nombre usuario]\AppData\Roaming\Mozilla\Firefox\Profiles.

Dentro de la capeta profile deberemos navegar hasta encontrar la carpeta extensions. Debajo de extensions guardaremos la extensión en desarrollo: .../Profiles/<carpeta profile del usuario>/extensions/miextension@undominio

En Ubuntu encontramos la carpeta en el siguiente path: /home/myuser/.mozilla/firefox/defaults/<carpeta profile del usuario>/extensions/miextension@undominio. En Ubuntu se deberán tener en cuenta los permisos de los archivos a ejecutar.

Archivos de configuración

Dentro de la siguiente sección se describirán dos de los archivos mas importantes dentro de una extensión: el manifiest y el archivo de instalación. El archivo manifiest se denomina chrome.manifiest y el archivo de configuración de instalación se llama install.rdf.

Install.rdf

El archivo install.rdf representa el “activador” de la extensión. El mismo contiene información sobre la extensión a instalar. Define los metadatos, las versiones compatibles, las actualizaciones, la plataforma, los desarrolladores entre otras. El mismo se debe encontrar en la carpeta raíz y no dentro de otra carpeta: miextension@undominio/install.rdf.

Ejemplo de un archivo install.rdf:

<em:des>

<?xml version="1.0"?>
<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#%22 
xmlns:em="http://www.mozilla.org/2004/em-rdf#%22>
   <Description about="urn:mozilla:install-manifest">
   <em:id>miextension@undominio</em:id>
   <em:name>Nombre de la Extensión</em:name>
   <em:version>1.0</em:version>
   <em:description>Descripción de la extensión</em:description>
   <em:creator>Nombre del autor/res</em:creator>
   <em:targetApplication>
     <Description>
       <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
       <em:minVersion>Versión Mínima soportada</em:minVersion>
       <em:maxVersion>Versión Máxima soportada</em:maxVersion>
     </Description>
   </em:targetApplication>
 </Description>      
</RDF>

</em:des>

id: El identificador, debe ser un identificadór único. Como se ha mencionado, el mismo puede ser un GUID o un identificador con formato de correo electrónico. En el ejemplo presentado tiene formato de correo electrónico. Al ser único se evita problemas de conflictos entre extensiones.

name: Es el nombre completo de la Extensión.

version: Identifica la versión de la extensión, ejemplo: minVersion= 3.0 y maxVersion=3.0.* que quiere decir de la versión 3.0 en adelante.

description: Permite definir una descripción para la extensión.

creator: El nombre del autor/es de la extensión.

GUID de la Aplicación: Es el identificador de la aplicación sobre la cual la extensión va a correr:

<em:aplic>

                         Firefox 	{ec8030f7-c20a-464f-9b0e-13a3a9e97384}
                         Mozilla Suite {86c18b42-e466-45a9-ae7a-9b95ba6f5640}
                         SeaMonkey 	{92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a}
                         Sunbird 	{718e30fb-e89b-41dd-9da7-e25a45638b28}
                         Netscape  	{3db10fab-e461-4c80-8b97-957ad5f8ea47}
                         Flock         {a463f10c-3994-11da-9945-000d60ca027b}
                         Instantbird   {33cb9019-c295-46dd-be21-8c4936574bee}

</em:aplic>

minVersion: Indica la compatibilidad de la extensión con respecto a una versión minima de Firefox.

maxVersion: Indica la compatibilidad con una versión máxima de Firefox.

Chrome.manifiest

Dentro del archivo se declarará el tipo de material que se encuentra dentro de un paquete chrome, el nombre del paquete y la ruta hacia el mismo. También se define cual es el archivo XUL que se va a fusionar con el archivo del navegador que viene por defecto con firefox (browser.xul).

<em:aplic> El tipo de material que se define puede ser:

        content: como se ha mencionado son los archivos XUL, js, XBLs entre otros que
        forman parte de la estructura de la extensión definiendo la interfaz como su comportamiento.

        locale:  son los archivos de definición de idiomas, DTD y archivos de 
        definición de propiedades (.properties) entre otros.

        skin: son los archivos css e imágenes que conforman el diseño de la interfaz.

</em:aplic>

NOTA: Como se mencionó en la sección Estructura de las Carpetas, cada uno de los tipos de material correponen a las carpetas a definir dentro de la carpeta chrome.

Para poder declarar el material asociado a la extensión se debe seguir la siguiente sintaxis: chrome://miextension/content/unArchivo.XUL. Con esto estamos diciendo que se deberá cargar la interfaz definida en el archivo unArchivo.XUL en la sección de content de la extensión miextension. Si el material a definir es por ejemplo una imagen lo podemos declarar de la siguiente manera: chrome://miextension/skin/miImagen.jpg, donde estamos diciendo que se cargue la imagen miImagen.jpg en la sección skin de la extensión miextension.

Sintaxis del archivo: ejemplo chrome.manifiest de la extensión miextension.

<em:aplic>

# Registro del tipo de material que contiene la extensión.
# Tipo de material - Nombre del paquete chrome (nombre de la extension) - Ubicación de los archivos. 
 content miextension chrome/content/
 locale miextension chrome/locale/
 skin miextension chrome/skin/

# Fusión del navegador browser.XUL de Firefox con la interfaz de la extensión.
overlay chrome://browser/content/browser.xul chrome://miextension/content/menuPrincipal.xul

</em:aplic>

La interfaz de usuario y el comportamiento

Ahora te explicaremos sobre los lenguajes para la implementación de las interfaces de usuarios y la implementación del comportamiento. En el mismo no se extenderá sobre los lenguajes a mencionar dado a que en wikibooks existen tutoriales que hablan y detallan sobre los mismos.

Interfaz de Usuario: XUL es un lenguaje de interfaz que proviene del XML. Dicho lenguaje es el utilizado por Mozilla Firefox, entre otros, para la implementación de sus interfaces gráficas. Dada las facilidades que brinda XUL como lenguaje netamente orientado a la definición de interfaces y que el mismo ya es implementado por Firefox, el lenguaje a utilizar para la generación de las interfaces gráficas de las extensiones también será XUL.

Los archivos XUL de definición de interfáz de la extensión se deberán guardar dentro de la carpeta content. De esta manera se comienza a dar forma a la extensión. El comportamiento de las interfaces se implementa a través de JavaScript. XUL permite la integración con JavaScript de forma muy transparente. Se puede embeber código js en el archivo XUL o el mismo puede hacer referencia a un archivo js y en los eventos llamar a las funciones definidas.

Màs Información en: XUL

JavaScript: Como ya se ha mencionado, el lenguaje utilizado para la implementación de la lógica es Javascipt. Javascript es un lenguaje (de sintaxis similar a C y Java) que permite la programación de aplicaciones interactivas y principalmente aplicaciones web.

Màs Información en: Programación en JavaScript

A su vez, para poder realizar una integración óptima y consumir servicios web, podemos implementar Ajax en nuestra lógica. Ajax, Asynchronus Javascript and XML, es una técnica de desarrollo para crear aplicaciones interactivas. Comunmente se utiliza para realizar cambios sobre las páginas web sin necesidad de recargarlas aumentando la interactibidad, velocidad y usabilidad de las aplicaciones.

Para más información, véase el artículo «Ajax» en Wikipedia.

Ajax a su vez brinda un objeto especial para la comunicación asincrónica con un servidor Web. Dicho objeto es XMLHttpRequest. A través del mismo se lleva a cabo una petición HTTP o HTTPS al servidor web, permitiendo crear contenido dinámico y actualizaciones asincrónicas. A su vez dicho objeto provee métodos para verificar el estado de la petición y redireccionar comportamientos en función del mismo.

Para más información, véase el artículo «XMLHttpRequest» en Wikipedia.

Generar el instalador

Una vez alistado el proceso de archivo, debes generar un instalador de la extensión e instalarlo en el navegador Mozilla Firefox.

En un principio existe la opción de generar un archivo .jar que contenga todo el material bajo la carpeta chrome. Queda a decisión del desarrollador dejar los archivos tal cual o generar un jar.

Generación del .jar: La implementación del jar consta de dos pasos. En primer instancia para generar el .jar se deberá crear un archivo .zip con el nombre de la extensión y que contenga todo el contenido de la carpeta chrome (no comprimir la carpeta chrome, sino que su contenido), luego este se renombra para .jar. Ejemplo: miextension.jar cuyo contenido son las carpetas content, locale y skin.

En segunda instancia, se deberá modificar el archivo chrome.manifiest, para registrar el .jar:

Cambiar: <em:aplic>

content miextension chrome/content/
locale miextension chrome/locale/
skin miextension chrome/skin/

por:

content	miextension	jar:chrome/miextension.jar!/content/miextension/
locale 	miextension	jar:chrome/miextension.jar!/locale/miextension/
skin   	miextension	jar:chrome/miextension.jar!/skin/miextension/

</em:aplic>

Luego de generado el .jar, se creará el instalador. Los archivos de instalación son archivos .xpi. Los mismos son ficheros zip que contienen los archivos de configuración, archivos de instalación y el manifiest, por lo tanto todo el contenido de la extensión.

Para la generación del archivo .xpi, se debe generar un archivo .zip con todo el contenido debajo de la carpeta raíz con el nombre de la extensión y luego renombrarlo a .xpi, miextension.zip a miextension.xpi:

<em:aplic>

miextension.xpi:
                chrome/
                   miextension.jar
                defaults/
                components/
                libs/
                install.rdf
                chrome.manifiest

</em:aplic>

Instalación: Para instalarlo, tan solo se deberá abrir el archivo con Firefox, ya sea botón derecho sobre el archivo .xpi, Abrir con/Firefox o abrir el navegador y en Archivo/Abrir archivo/seleccionar miextension.xpi

De esta forma ya tenemos la extensión instalada en Firefox. Para poder visualizarla ir a Herramientas/Complementos/Extensiones.

Más información

A continuación se mencionarán algunos enlaces que tratan el mismo tema y bajo los cuales se puede obtener más información.

← Usando about:config

Crear una extensión para Firefox 3

Crear un complemento de Personas →