mozilla

Revision 261279 of 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: 261279
  • Creada:
  • Creador: Superruzafa
  • ¿Es la revisión actual? No
  • Comentario /* The chrome manifest */

Contenido de la revisión

{{wiki.template('Traducción', [ "inglés", "Creating_a_status_bar_extension", "en" ])}}

{{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 Construir 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.

The XUL overlay

The XUL overlay file contains the XUL description of the user interface we want to add to Firefox. Our overlay file, <tt>status-bar-sample-1.xul</tt>, looks like this:

 <?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>

The first order of business in the <tt>status-bar-sample-1.xul</tt> file is to establish that this is in fact a XUL file, and to set up a unique ID for the overlay. This is accomplished by the following line of XML:

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

Once that's accomplished, we can describe our user interface. In this case, we're simply inserting a new panel into the status bar at the bottom of Firefox browser windows. We do this by embedding inside the statusbar named "status-bar" -- which is the Firefox browser window's status bar -- a new statusbarpanel object we call "status-bar-sample-1".

We include properties to configure our new status bar panel the way we want, setting its text label to "Hello World" and establishing a tool tip with the message "Sample status bar item" in it.

Trying it out

To test your extension, drop the folder into the extensions folder in your Profile Folder. Then restart Firefox, and you should see the extension in the status bar.

<center>

Image:status bar sample 1.png

</center>

{{template.Next("Creating a dynamic status bar extension")}}

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

Fuente de la revisión

<p>
</p><p>{{wiki.template('Traducción', [ "inglés", "Creating_a_status_bar_extension", "en" ])}}
</p><p>{{template.Siguiente("Crear una extensión dinámica en la barra de estado")}}
</p><p>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/Construir_una_extensi%c3%b3n">Construir 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="The_XUL_overlay">The XUL overlay</h2>
<p>The XUL overlay file contains the XUL description of the user interface we want to add to Firefox.  Our overlay file, <tt>status-bar-sample-1.xul</tt>, looks like this:
</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>The first order of business in the <tt>status-bar-sample-1.xul</tt> file is to establish that this is in fact a XUL file, and to set up a unique ID for the overlay.  This is accomplished by the following line of 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>Once that's accomplished, we can describe our user interface.  In this case, we're simply inserting a new panel into the status bar at the bottom of Firefox browser windows.  We do this by embedding inside the <code>statusbar</code> named "status-bar" -- which is the Firefox browser window's status bar -- a new <code>statusbarpanel</code> object we call "status-bar-sample-1".
</p><p>We include properties to configure our new status bar panel the way we want, setting its text label to "Hello World" and establishing a tool tip with the message "Sample status bar item" in it.
</p>
<h2 name="Trying_it_out">Trying it out</h2>
<p>To test your extension, drop the folder into the extensions folder in your <a class="external" href="http://kb.mozillazine.org/Profile_folder">Profile Folder</a>.  Then restart Firefox, and you should see the extension in the status bar.
</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.Next("Creating a dynamic status bar extension")}}
</p>{{ wiki.languages( { "pl": "pl/Tworzenie_rozszerzenia_paska_stanu" } ) }}
Revertir a esta revisión