Crear una extensión en la barra de estado

  • Enlace amigable (slug) de la revisión: Crear_una_extensión_en_la_barra_de_estado
  • Título de la revisión: Crear una extensión en la barra de estado
  • Id de la revisión: 261285
  • Creada:
  • Creador: Superruzafa
  • ¿Es la revisión actual? No
  • Comentario

Contenido de la revisión

{{template.Siguiente("Crear una extensión dinámica 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 sobrel a 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 neceista 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/status-bar-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>

{{template.Siguiente("Crear una extensión dinámica en la barra de estado")}}

{{ wiki.languages( { "en": "en/Creating_a_status_bar_extension", "pl": "pl/Tworzenie_rozszerzenia_paska_stanu" } ) }}

Fuente de la revisión

<p>
</p><p>{{template.Siguiente("Crear una extensión dinámica 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.
</p><p>Muchos de los conceptos introducidos aquí se aplican a cualquier aplicación basada en XUL. Sin embargo, nosotros nos centraremos específicamente en Firefox.
</p><p>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 <a href="es/Creando_una_extensi%c3%b3n">Creando una extensión</a>. No obstante este ejemplo será ampliado en los artículos siguientes.
</p>
<h2 name="Descargar_el_ejemplo"> Descargar el ejemplo </h2>
<p>Puedes descargar una copia de este ejemplo para echarle un vistazo o para usarlo como base para tu propia extensión.
</p><p><a class="external" href="http://developer.mozilla.org/samples/extension-samples/status-bar-sample-1.zip">Descargar el ejemplo</a>
</p>
<h2 name="El_manifiesto_de_instalaci.C3.B3n"> El manifiesto de instalación </h2>
<p>El manifiesto de instalación, <tt><a href="es/Manifiestos_de_instalaci%c3%b3n">install.rdf</a></tt> es un fichero de texto que contiene información importante sobrel a extensión para la aplicación anfitrión.
</p>
<pre class="eval"> &lt;?xml version="1.0"?&gt;
   
 &lt;RDF xmlns="<span class="plain">http://www.w3.org/1999/02/22-rdf-syntax-ns#</span>"
    xmlns:em="<span class="plain">http://www.mozilla.org/2004/em-rdf#</span>"&gt;
   
   &lt;Description about="<span class="plain">urn:mozilla:install-manifest</span>"&gt;
   
   &lt;em:id&gt;<span class="plain">status-bar-sample-1@example.com</span>&lt;/em:id&gt;
   &lt;em:version&gt;1.0&lt;/em:version&gt;
   &lt;em:type&gt;2&lt;/em:type&gt;
     
   &lt;!-- Front End Metadata --&gt;
   
   &lt;em:name&gt;Status Bar Sample 1&lt;/em:name&gt;
   &lt;em:description&gt;Sample static status bar panel&lt;/em:name&gt;
   &lt;em:creator&gt;My Name&lt;/em:creator&gt;"
   &lt;em:homepageURL&gt;<span class="plain">http://developer.mozilla.org/en/docs/Creating_a_status_bar_extension</span>&lt;/em:homepageURL&gt;
   
   &lt;!-- Describe the Firefox versions we support --&gt;
   
   &lt;em:targetApplication&gt;
     &lt;Description&gt;
     &lt;em:id&gt;{ec8030f7-c20a-464f-9b0e-13a3a9e97384}&lt;/em:id&gt;
     &lt;em:minVersion&gt;1.5&lt;/em:minVersion&gt;
     &lt;em:maxVersion&gt;2.0.0.*&lt;/em:maxVersion&gt;
     &lt;/Description&gt;
   &lt;/em:targetApplication&gt;
   
   &lt;/Description&gt;
   
 &lt;/RDF&gt;
</pre>
<p>Veamos con detalle algunas partes clave del manifiesto.
</p>
<h3 name="Informaci.C3.B3n_de_identificaci.C3.B3n_de_la_extensi.C3.B3n"> Información de identificación de la extensión </h3>
<p>Se neceista cierta información para que Firefox pueda identificar unívocamente tu extensión. En este ejemplo, estos campos son:
</p>
<table class="standard-table">

<tbody><tr>
<td class="header">Propiedad
</td><td class="header">Descripción
</td></tr>

<tr>
<td>id
</td><td>Una cadena de identificación unívoca. Antes de Firefox 1.5, esto era un <a href="es/Generar_GUIDs">GUID</a>. A partir de Firefox 1.5 deberías de usar una cadena de la forma <i>nombre-de-la-extensión</i>@<i>dominio-del-creador</i>.
</td></tr>

<tr>
<td>version
</td><td>El número de versión de la extensión.
</td></tr>

<tr>
<td>type
</td><td>El tipo de complemento. Para las extensiones es 2.
</td></tr>
</tbody></table>
<h3 name="Informaci.C3.B3n_legible"> Información legible </h3>
<p>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:
</p>
<table class="standard-table">


<tbody><tr>
<td class="header">Propiedad
</td><td class="header">Descripción
</td></tr>

<tr>
<td>em:name
</td><td>Nombre de la extensión. Este nombre se muestra en la ventana de extensiones.
</td></tr>

<tr>
<td>em:description
</td><td>Una descripción breve sobre la extensión. Este texto se muestra además en la ventana de extensiones.
</td></tr>

<tr>
<td>em:creator
</td><td>El nombre del autor.
</td></tr>

<tr>
<td>homepageURL
</td><td>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.
</td></tr>
</tbody></table>
<h3 name="Informaci.C3.B3n_de_la_aplicaci.C3.B3n_destino"> Información de la aplicación destino </h3>
<p>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.
</p><p>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.
</p><p>La información de la aplicación destino está contenida dentro del bloque <code>em:targetApplication</code> <code>Description</code>.
</p>
<table class="standard-table">

<tbody><tr>
<td class="header">Propiedad
</td><td class="header">Descripción
</td></tr>

<tr>
<td>id
</td><td>Un ID que indica la aplicación destino.  "{ec8030f7-c20a-464f-9b0e-13a3a9e97384}" es un GUID que identifica unívocamente a Firefox como destino.
</td></tr>

<tr>
<td>minVersion
</td><td>La versión más antigua de la aplicación destino para la que está soportada la extensión.
</td></tr>

<tr>
<td>maxVersion
</td><td>La versión más reciente de la aplicación destino sobre la cual se conoce que funciona la extensión.
</td></tr>
</tbody></table>
<p>Para más información sobre el formado del manifiesto de instalación, lee la sección <a href="es/Manifiestos_de_instalaci%c3%b3n">Manifiestos de instalación</a>.
</p>
<h2 name="El_manifiesto_chrome"> El manifiesto chrome </h2>
<p>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 <a href="es/Chrome">chrome</a> 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...
</p><p>El fichero de manifiesto chrome, <tt>chrome.manifest</tt>, es para el ejemplo este:
</p>
<pre class="eval"> content status-bar-sample-1 chrome/content/
 
 # Firefox
 overlay	<span class="plain">chrome://browser/content/browser.xul</span> <span class="plain">chrome://status-bar-sample-1/content/status-bar-sample-1.xul</span>
</pre>
<p>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.
</p><p>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/status-bar-sample-1.xul" como interfaz que se mezclará en el navegador.
</p><p>Véase <a href="es/XUL_Overlays">XUL Overlays</a> 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 <a href="es/Manifiestos_Chrome">Manifiestos Chrome</a>.
</p>
<h2 name="El_overlay_XUL"> El overlay XUL </h2>
<p>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: 
</p>
<pre class="eval"> &lt;?xml version="1.0" encoding="UTF-8"?&gt;
 
 &lt;!DOCTYPE overlay &gt;
 &lt;overlay id="status-bar-sample-1-overlay"
          xmlns="<span class="plain">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</span>"&gt;
 
 &lt;!-- Firefox --&gt;
 &lt;statusbar id="status-bar"&gt;
   &lt;statusbarpanel id="status-bar-sample-1"
     label="Hello World"
     tooltiptext="Sample status bar item"
   /&gt;
 &lt;/statusbar&gt;
 
 &lt;/overlay&gt;
</pre>
<p>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:
</p>
<pre class="eval">&lt;overlay id="status-bar-sample-1-overlay"
  xmlns="<span class="plain">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</span>"&gt;
</pre>
<p>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".
</p><p>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.
</p>
<h2 name="Ponerlo_a_prueba"> Ponerlo a prueba </h2>
<p>Para probar tu extensión, copia el directorio en el directorio de extensiones en tu <a class="external" href="http://kb.mozillazine.org/Profile_folder">directorio hogar</a>. Luego reinicia Firefox. Al volver deberías de ver la extensión en la barra de estado.
</p>
<center>
<p><img alt="Image:status bar sample 1.png" src="File:es/Media_Gallery/Status_bar_sample_1.png">
</p>
</center>
<p>{{template.Siguiente("Crear una extensión dinámica en la barra de estado")}}
</p>{{ wiki.languages( { "en": "en/Creating_a_status_bar_extension", "pl": "pl/Tworzenie_rozszerzenia_paska_stanu" } ) }}
Revertir a esta revisión