Crear una extensión en la barra de estado

Este es el primero de una serie de artículos que mostrarán cómo crear extensiones progresivamente complejas para el navegador Firefox. Aunque puede que algunos de los ejemplos de esta serie se parezcan a los ejemplos vistos en otro lugar, el objetivo de estos artículos es ayudar a reunir información en un único lugar para nuevos desarrolladores de extensiones simplificando la tarea de iniciarse.

Muchos de los conceptos introducidos aquí se aplican a cualquier aplicación basada en XUL. Sin embargo, nosotros nos centraremos específicamente en Firefox.

Este ejemplo añadirá una cadena de texto estática a la barra de estado situada en la parte inferior de las ventanas del navegador Firefox. Es posible que esto te recuerde al artículo Creando una extensión. No obstante este ejemplo será ampliado en los artículos siguientes.

Descargar el ejemplo

Puedes descargar una copia de este ejemplo para echarle un vistazo o para usarlo como base para tu propia extensión.

Descargar el ejemplo

El manifiesto de instalación

El manifiesto de instalación, <tt>install.rdf</tt> es un fichero de texto que contiene información importante sobre la extensión para la aplicación anfitrión.

 <?xml version="1.0"?>
   
 <RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
    xmlns:em="http://www.mozilla.org/2004/em-rdf#">
   
   <Description about="urn:mozilla:install-manifest">
   
   <em:id>status-bar-sample-1@example.com</em:id>
   <em:version>1.0</em:version>
   <em:type>2</em:type>
     
   <!-- Front End Metadata -->
   
   <em:name>Status Bar Sample 1</em:name>
   <em:description>Sample static status bar panel</em:name>
   <em:creator>My Name</em:creator>"
   <em:homepageURL>http://developer.mozilla.org/en/docs/Creating_a_status_bar_extension</em:homepageURL>
   
   <!-- Describe the Firefox versions we support -->
   
   <em:targetApplication>
     <Description>
     <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
     <em:minVersion>1.5</em:minVersion>
     <em:maxVersion>2.0.0.*</em:maxVersion>
     </Description>
   </em:targetApplication>
   
   </Description>
   
 </RDF>

Veamos con detalle algunas partes clave del manifiesto.

Información de identificación de la extensión

Se necesita cierta información para que Firefox pueda identificar unívocamente tu extensión. En este ejemplo, estos campos son:

Propiedad Descripción
id Una cadena de identificación unívoca. Antes de Firefox 1.5, esto era un GUID. A partir de Firefox 1.5 deberías de usar una cadena de la forma nombre-de-la-extensión@dominio-del-creador.
version El número de versión de la extensión.
type El tipo de complemento. Para las extensiones es 2.

Información legible

En este ejemplo, tenemos cuatro partes de información legible, es decir, información que es mostrada al usuario dentro de la interfaz de Firefox. Y son:

Propiedad Descripción
em:name Nombre de la extensión. Este nombre se muestra en la ventana de extensiones.
em:description Una descripción breve sobre la extensión. Este texto se muestra además en la ventana de extensiones.
em:creator El nombre del autor.
homepageURL La URL del sitio web que debe visitar el usuario para conseguir información sobre la extensión o para buscar actualizaciones. No es un campo obligatorio pero incluirlo es una buena idea.

Información de la aplicación destino

También es necesario incluir información que identifique la aplicación o aplicaciones en las que la extensión puede funcionar. Aunque esta extensión de ejemplo sólo funciona en Firefox, es completamente posible crear extensiones que funcionen en múltiples aplicaciones basadas en XUL.

Además se necesita indicar qué versiones de la aplicación o aplicaciones destino soporta tu extensión. Si no va a funcionar en versiones antiguas de Firefox o aún no ha sido probada en nuevas versiones puedes restringir la extensión para que sólo las versiones soportadas de las aplicaciones destino intenten usarla.

La información de la aplicación destino está contenida dentro del bloque em:targetApplication Description.

Propiedad Descripción
id Un ID que indica la aplicación destino. "{ec8030f7-c20a-464f-9b0e-13a3a9e97384}" es un GUID que identifica unívocamente a Firefox como destino.
minVersion La versión más antigua de la aplicación destino para la que está soportada la extensión.
maxVersion La versión más reciente de la aplicación destino sobre la cual se conoce que funciona la extensión.

Para más información sobre el formado del manifiesto de instalación, lee la sección Manifiestos de instalación.

El manifiesto chrome

El manifiesto chrome es un fichero que le dice a la aplicación destino dónde buscar el paquete chrome de tu extensión. El chrome es un conjunto de elementos de interfaz de usuario externos al área de contenidos de la ventana de la aplicación, tales como barras de herramientas, de estado, de menú, etc...

El fichero de manifiesto chrome, <tt>chrome.manifest</tt>, es para el ejemplo este:

 content status-bar-sample-1 chrome/content/
 
 # Firefox
 overlay	chrome://browser/content/browser.xul chrome://status-bar-sample-1/content/status-bar-sample-1.xul

La primera línea indica la ubicación en disco de los contenidos de la extensión cuyo ID es "status-bar-sample-1". Dicha ruta es relativa al directorio raíz de la extensión en este caso aunque puede ser absoluta si así se quiere.

La segunda línea indica un overlay. Un overlay permite añadir nuevo contenido a un documento existente. En este caso queremos ampliar la interfaz del navegador Firefox, por lo que necesitamos especificar el URI del fichero XUL de la ventana principal de Firefox, "chrome://browser/content/browser.xul" como interfaz que servirá de base y el URI de nuestro propio fichero XUL "chrome://status-bar-sample-1/content...r-sample-1.xul" como interfaz que se mezclará en el navegador.

Véase XUL Overlays para más detalles sobre cómo funcionan los overlays. Además puedes encontrar más detalles sobre el formato de los manifiestos chrome en la sección Manifiestos Chrome.

El overlay XUL

El fichero overlay XUL contiene la descripción XUL de la interfaz de usuario que queremos añadir a Firefox. Nuestro fichero overlay <tt>status-bar-sample-1.xul</tt> tendrá este aspecto:

 <?xml version="1.0" encoding="UTF-8"?>
 
 <!DOCTYPE overlay >
 <overlay id="status-bar-sample-1-overlay"
          xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 
 <!-- Firefox -->
 <statusbar id="status-bar">
   <statusbarpanel id="status-bar-sample-1"
     label="Hello World"
     tooltiptext="Sample status bar item"
   />
 </statusbar>
 
 </overlay>

Lo primero a tratar en el fichero <tt>status-bar-sample-1.xul</tt> es establecer que este es de hecho un fichero XUL para configurar después un único ID para el overlay. Esto es llevado a cabo por la siguiente línea de XML:

<overlay id="status-bar-sample-1-overlay"
  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

Una vez hecho esto, podemos describir nuestra interfaz de usuario. En este caso, simplemente insertaremos un nuevo panel en la barra de estado situada en la parte inferior de las ventanas del navegador Firefox. Haremos esto incrustando dentro de <tt>statusbar</tt> llamado "status-bar" (el cual es la barra de estado de la ventana del navegador Firefox) un nuevo objeto <tt>statusbarpanel</tt> al que llamaremos "status-bar-sample-1".

Incluiremos propiedades para configurar nuestro nuevo panel de barra de estado de la forma que queramos, configurando su etiqueta de texto a "Hello World" y estableciendo un título emergente con el mensaje "Sample status bar item" en él.

Ponerlo a prueba

Para probar tu extensión, copia el directorio en el directorio de extensiones en tu directorio hogar. Luego reinicia Firefox. Al volver deberías de ver la extensión en la barra de estado.

<center>

Image:status bar sample 1.png

</center>

Etiquetas y colaboradores del documento

Colaboradores de esta página: Superruzafa
Última actualización por: Superruzafa,