Revision 261277 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: 261277
  • Creada:
  • Creador: Superruzafa
  • ¿Es la revisión actual? No
  • Comentario Traduzco un poco...

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.

The chrome manifest

The chrome manifest is a file that tells the target application where to look for the chrome package for your extension. The chrome is the set of user interface elements outside the content area of the application's window, such as toolbars, status bars, menu bars, and the like.

The chrome manifest file, <tt>chrome.manifest</tt>, for the sample follows.

 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

The first line registers the location on disk of the contents of the extension whose ID is "status-bar-sample-1". This path is relative to the extension's root folder in this case, but can be absolute if you want it to be.

The second line registers an overlay. An overlay lets you add new content to an existing document. In this case, we want to augment the UI of the Firefox browser, so we specify the URI of the Firefox main window's XUL file, "chrome://browser/content/browser.xul", as the interface to overlay onto, and the URI of our own XUL file, "chrome://status-bar-sample-1/content/status-bar-sample-1.xul", as the interface to overlay onto the browser.

See XUL Overlays for details on how overlays work. You can also find more details about format of chrome manifests in the Chrome Manifest section.

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="The_chrome_manifest">The chrome manifest</h2>
<p>The chrome manifest is a file that tells the target application where to look for the chrome package for your extension.  The <a href="es/Chrome">chrome</a> is the set of user interface elements outside the content area of the application's window, such as toolbars, status bars, menu bars, and the like.
</p><p>The chrome manifest file, <tt>chrome.manifest</tt>, for the sample follows.
</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>The first line registers the location on disk of the contents of the extension whose ID is "status-bar-sample-1".  This path is relative to the extension's root folder in this case, but can be absolute if you want it to be.
</p><p>The second line registers an overlay.  An overlay lets you add new content to an existing document.  In this case, we want to augment the UI of the Firefox browser, so we specify the URI of the Firefox main window's XUL file, "chrome://browser/content/browser.xul", as the interface to overlay onto, and the URI of our own XUL file, "chrome://status-bar-sample-1/content/status-bar-sample-1.xul", as the interface to overlay onto the browser.
</p><p>See <a href="es/XUL_Overlays">XUL Overlays</a> for details on how overlays work.  You can also find more details about format of chrome manifests in the <a href="es/Chrome_Manifest">Chrome Manifest</a> section.
</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