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.
El manifiesto de instalación
El manifiesto de instalación, install.rdf 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="https://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="https://www.mozilla.org/2004/em-rdf#"> <Description about="urn:mozilla:install-manifest"> <em:id>[email protected]</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>https://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 formanombre-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, chrome.manifest, 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 status-bar-sample-1.xul tendrá este aspecto:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE overlay >
<overlay id="status-bar-sample-1-overlay"
xmlns="https://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 status-bar-sample-1.xul 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="https://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 statusbar llamado "status-bar" (el cual es la barra de estado de la ventana del navegador Firefox) un nuevo objeto statusbarpanel 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.