Comparar revisiones

Crear una extensión en la barra de estado

Revisión 261286:

Revisión 261286 de Superruzafa el

Revisión 215743:

Revisión 215743 de Superruzafa el

Título:
Crear una extensión en la barra de estado
Crear una extensión en la barra de estado
Enlace amigable (slug):
Crear_una_extensión_en_la_barra_de_estado
Crear_una_extensión_en_la_barra_de_estado
Etiquetas:
Todas_las_Categorías, extensiones, Complementos
Contenido:

Revisión 261286
Revisión 215743
t7    <p>t
8      {{ Siguiente("Crear una extensión dinámica en la barra de e
>stado") }} Este es el primero de una serie de artículos que mostr 
>arán cómo crear extensiones progresivamente complejas para el nav 
>egador Firefox. Aunque puede que algunos de los ejemplos de esta  
>serie se parezcan a los ejemplos vistos en otro lugar, el objetiv 
>o de estos artículos es ayudar a reunir información en un único l 
>ugar para nuevos desarrolladores de extensiones simplificando la  
>tarea de iniciarse. 
9    </p>
10    <p>
11      Muchos de los conceptos introducidos aquí se aplican a cual
>quier aplicación basada en XUL. Sin embargo, nosotros nos centrar 
>emos específicamente en Firefox. 
12    </p>
13    <p>
14      Este ejemplo añadirá una cadena de texto estática a la barr
>a de estado situada en la parte inferior de las ventanas del nave 
>gador Firefox. Es posible que esto te recuerde al artículo <a hre 
>f="es/Creando_una_extensi%c3%b3n">Creando una extensión</a>. No o 
>bstante este ejemplo será ampliado en los artículos siguientes. 
15    </p>
16    <h2 id="Descargar_el_ejemplo" name="Descargar_el_ejemplo">
17      Descargar el ejemplo
18    </h2>
19    <p>
20      Puedes descargar una copia de este ejemplo para echarle un 
>vistazo o para usarlo como base para tu propia extensión. 
21    </p>
22    <p>
23      <a class="external" href="http://developer.mozilla.org/samp
>les/extension-samples/status-bar-sample-1.zip">Descargar el ejemp 
>lo</a> 
24    </p>
25    <h2 id="El_manifiesto_de_instalaci.C3.B3n" name="El_manifiest
>o_de_instalaci.C3.B3n"> 
26      El manifiesto de instalación
27    </h2>
28    <p>
29      El manifiesto de instalación, <tt><a href="es/Manifiestos_d
>e_instalaci%c3%b3n">install.rdf</a></tt> es un fichero de texto q 
>ue contiene información importante sobre la extensión para la apl 
>icación anfitrión. 
30    </p>
31    <pre class="eval">
32 &lt;?xml version="1.0"?&gt;
33   
34 &lt;RDF xmlns="<span class="nowiki">http://www.w3.org/1999/02/22
>-rdf-syntax-ns#</span>" 
35    xmlns:em="<span class="nowiki">http://www.mozilla.org/2004/em
>-rdf#</span>"&gt; 
36   
37   &lt;Description about="<span class="nowiki">urn:mozilla:instal
>l-manifest</span>"&gt; 
38   
39   &lt;em:id&gt;<span class="nowiki">status-bar-sample-1@example.
>com</span>&lt;/em:id&gt; 
40   &lt;em:version&gt;1.0&lt;/em:version&gt;
41   &lt;em:type&gt;2&lt;/em:type&gt;
42     
43   &lt;!-- Front End Metadata --&gt;
44   
45   &lt;em:name&gt;Status Bar Sample 1&lt;/em:name&gt;
46   &lt;em:description&gt;Sample static status bar panel&lt;/em:na
>me&gt; 
47   &lt;em:creator&gt;My Name&lt;/em:creator&gt;"
48   &lt;em:homepageURL&gt;<span class="nowiki">http://developer.mo
>zilla.org/en/docs/Creating_a_status_bar_extension</span>&lt;/em:h 
>omepageURL&gt; 
49   
50   &lt;!-- Describe the Firefox versions we support --&gt;
51   
52   &lt;em:targetApplication&gt;
53     &lt;Description&gt;
54     &lt;em:id&gt;{ec8030f7-c20a-464f-9b0e-13a3a9e97384}&lt;/em:i
>d&gt; 
55     &lt;em:minVersion&gt;1.5&lt;/em:minVersion&gt;
56     &lt;em:maxVersion&gt;2.0.0.*&lt;/em:maxVersion&gt;
57     &lt;/Description&gt;
58   &lt;/em:targetApplication&gt;
59   
60   &lt;/Description&gt;
61   
62 &lt;/RDF&gt;
63</pre>
64    <p>
65      Veamos con detalle algunas partes clave del manifiesto.
66    </p>
67    <h3 id="Informaci.C3.B3n_de_identificaci.C3.B3n_de_la_extensi
>.C3.B3n" name="Informaci.C3.B3n_de_identificaci.C3.B3n_de_la_exte 
>nsi.C3.B3n"> 
68      Información de identificación de la extensión
69    </h3>
70    <p>
71      Se necesita cierta información para que Firefox pueda ident
>ificar unívocamente tu extensión. En este ejemplo, estos campos s 
>on: 
72    </p>
73    <table class="standard-table">
74      <tbody>
75        <tr>
76          <td class="header">
77            Propiedad
78          </td>
79          <td class="header">
80            Descripción
81          </td>
82        </tr>
83        <tr>
84          <td>
85            id
86          </td>
87          <td>
88            Una cadena de identificación unívoca. Antes de Firefo
>x 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>. 
89          </td>
90        </tr>
91        <tr>
92          <td>
93            version
94          </td>
95          <td>
96            El número de versión de la extensión.
97          </td>
98        </tr>
99        <tr>
100          <td>
101            type
102          </td>
103          <td>
104            El tipo de complemento. Para las extensiones es 2.
105          </td>
106        </tr>
107      </tbody>
108    </table>
109    <h3 id="Informaci.C3.B3n_legible" name="Informaci.C3.B3n_legi
>ble"> 
110      Información legible
111    </h3>
112    <p>
113      En este ejemplo, tenemos cuatro partes de información legib
>le, es decir, información que es mostrada al usuario dentro de la 
> interfaz de Firefox. Y son: 
114    </p>
115    <table class="standard-table">
116      <tbody>
117        <tr>
118          <td class="header">
119            Propiedad
120          </td>
121          <td class="header">
122            Descripción
123          </td>
124        </tr>
125        <tr>
126          <td>
127            em:name
128          </td>
129          <td>
130            Nombre de la extensión. Este nombre se muestra en la 
>ventana de extensiones. 
131          </td>
132        </tr>
133        <tr>
134          <td>
135            em:description
136          </td>
137          <td>
138            Una descripción breve sobre la extensión. Este texto 
>se muestra además en la ventana de extensiones. 
139          </td>
140        </tr>
141        <tr>
142          <td>
143            em:creator
144          </td>
145          <td>
146            El nombre del autor.
147          </td>
148        </tr>
149        <tr>
150          <td>
151            homepageURL
152          </td>
153          <td>
154            La URL del sitio web que debe visitar el usuario para
> conseguir información sobre la extensión o para buscar actualiza 
>ciones. No es un campo obligatorio pero incluirlo es una buena id 
>ea. 
155          </td>
156        </tr>
157      </tbody>
158    </table>
159    <h3 id="Informaci.C3.B3n_de_la_aplicaci.C3.B3n_destino" name=
>"Informaci.C3.B3n_de_la_aplicaci.C3.B3n_destino"> 
160      Información de la aplicación destino
161    </h3>
162    <p>
163      También es necesario incluir información que identifique la
> aplicación o aplicaciones en las que la extensión puede funciona 
>r. Aunque esta extensión de ejemplo sólo funciona en Firefox, es  
>completamente posible crear extensiones que funcionen en múltiple 
>s aplicaciones basadas en XUL. 
164    </p>
165    <p>
166      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 nuev 
>as versiones puedes restringir la extensión para que sólo las ver 
>siones soportadas de las aplicaciones destino intenten usarla. 
167    </p>
168    <p>
169      La información de la aplicación destino está contenida dent
>ro del bloque <code>em:targetApplication</code> <code>Description 
></code>. 
170    </p>
171    <table class="standard-table">
172      <tbody>
173        <tr>
174          <td class="header">
175            Propiedad
176          </td>
177          <td class="header">
178            Descripción
179          </td>
180        </tr>
181        <tr>
182          <td>
183            id
184          </td>
185          <td>
186            Un ID que indica la aplicación destino. "{ec8030f7-c2
>0a-464f-9b0e-13a3a9e97384}" es un GUID que identifica unívocament 
>e a Firefox como destino. 
187          </td>
188        </tr>
189        <tr>
190          <td>
191            minVersion
192          </td>
193          <td>
194            La versión más antigua de la aplicación destino para 
>la que está soportada la extensión. 
195          </td>
196        </tr>
197        <tr>
198          <td>
199            maxVersion
200          </td>
201          <td>
202            La versión más reciente de la aplicación destino sobr
>e la cual se conoce que funciona la extensión. 
203          </td>
204        </tr>
205      </tbody>
206    </table>
207    <p>
208      Para más información sobre el formado del manifiesto de ins
>talación, lee la sección <a href="es/Manifiestos_de_instalaci%c3% 
>b3n">Manifiestos de instalación</a>. 
209    </p>
210    <h2 id="El_manifiesto_chrome" name="El_manifiesto_chrome">
211      El manifiesto chrome
212    </h2>
213    <p>
214      El manifiesto chrome es un fichero que le dice a la aplicac
>ió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 inter 
>faz de usuario externos al área de contenidos de la ventana de la 
> aplicación, tales como barras de herramientas, de estado, de men 
>ú, etc... 
215    </p>
216    <p>
217      El fichero de manifiesto chrome, <tt>chrome.manifest</tt>, 
>es para el ejemplo este: 
218    </p>
219    <pre class="eval">
220 content status-bar-sample-1 chrome/content/
221 
222 # Firefox
223 overlay        <span class="nowiki">chrome://browser/content/bro
>wser.xul</span> <span class="nowiki">chrome://status-bar-sample-1 
>/content/status-bar-sample-1.xul</span> 
224</pre>
225    <p>
226      La primera línea indica la ubicación en disco de los conten
>idos 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 aunq 
>ue puede ser absoluta si así se quiere. 
227    </p>
228    <p>
229      La segunda línea indica un overlay. Un overlay permite añad
>ir nuevo contenido a un documento existente. En este caso queremo 
>s ampliar la interfaz del navegador Firefox, por lo que necesitam 
>os especificar el URI del fichero XUL de la ventana principal de  
>Firefox, "<a class=" external" href="chrome://browser/content/bro 
>wser.xul" rel="freelink">chrome://browser/content/browser.xul</a> 
>" como interfaz que servirá de base y el URI de nuestro propio fi 
>chero XUL "<a class=" external" href="chrome://status-bar-sample- 
>1/content/status-bar-sample-1.xul" rel="freelink">chrome://status 
>-bar-sample-1/content...r-sample-1.xul</a>" como interfaz que se  
>mezclará en el navegador. 
230    </p>
231    <p>
232      Véase <a href="es/XUL_Overlays">XUL Overlays</a> para más d
>etalles sobre cómo funcionan los overlays. Además puedes encontra 
>r más detalles sobre el formato de los manifiestos chrome en la s 
>ección <a href="es/Manifiestos_Chrome">Manifiestos Chrome</a>. 
233    </p>
234    <h2 id="El_overlay_XUL" name="El_overlay_XUL">
235      El overlay XUL
236    </h2>
237    <p>
238      El fichero overlay XUL contiene la descripción XUL de la in
>terfaz de usuario que queremos añadir a Firefox. Nuestro fichero  
>overlay <tt>status-bar-sample-1.xul</tt> tendrá este aspecto: 
239    </p>
240    <pre class="eval">
241 &lt;?xml version="1.0" encoding="UTF-8"?&gt;
242 
243 &lt;!DOCTYPE overlay &gt;
244 &lt;overlay id="status-bar-sample-1-overlay"
245          xmlns="<span class="nowiki">http://www.mozilla.org/keym
>aster/gatekeeper/there.is.only.xul</span>"&gt; 
246 
247 &lt;!-- Firefox --&gt;
248 &lt;statusbar id="status-bar"&gt;
249   &lt;statusbarpanel id="status-bar-sample-1"
250     label="Hello World"
251     tooltiptext="Sample status bar item"
252   /&gt;
253 &lt;/statusbar&gt;
254 
255 &lt;/overlay&gt;
256</pre>
257    <p>
258      Lo primero a tratar en el fichero <tt>status-bar-sample-1.x
>ul</tt> es establecer que este es de hecho un fichero XUL para co 
>nfigurar después un único ID para el overlay. Esto es llevado a c 
>abo por la siguiente línea de XML: 
259    </p>
260    <pre class="eval">
261&lt;overlay id="status-bar-sample-1-overlay"
262  xmlns="<span class="nowiki">http://www.mozilla.org/keymaster/ga
>tekeeper/there.is.only.xul</span>"&gt; 
263</pre>
264    <p>
265      Una vez hecho esto, podemos describir nuestra interfaz de u
>suario. En este caso, simplemente insertaremos un nuevo panel en  
>la barra de estado situada en la parte inferior de las ventanas d 
>el navegador Firefox. Haremos esto incrustando dentro de <tt>stat 
>usbar</tt> llamado "status-bar" (el cual es la barra de estado de 
> la ventana del navegador Firefox) un nuevo objeto <tt>statusbarp 
>anel</tt> al que llamaremos "status-bar-sample-1". 
266    </p>
267    <p>
268      Incluiremos propiedades para configurar nuestro nuevo panel
> de barra de estado de la forma que queramos, configurando su eti 
>queta de texto a "Hello World" y estableciendo un título emergent 
>e con el mensaje "Sample status bar item" en él. 
269    </p>
270    <h2 id="Ponerlo_a_prueba" name="Ponerlo_a_prueba">
271      Ponerlo a prueba
272    </h2>
273    <p>
274      Para probar tu extensión, copia el directorio en el directo
>rio de extensiones en tu <a class="external" href="http://kb.mozi 
>llazine.org/Profile_folder">directorio hogar</a>. Luego reinicia  
>Firefox. Al volver deberías de ver la extensión en la barra de es 
>tado. 
275    </p>
276    <center>
277      <p>
278        <img alt="Image:status bar sample 1.png" fileid="0" src="
>File:es/Media_Gallery/Status_bar_sample_1.png"> 
279      </p>
280    </center>
281    <p>
282      {{ Siguiente("Crear una extensión dinámica en la barra de e
>stado") }} 
283    </p>{{ languages( { "en": "en/Creating_a_status_bar_extension
>", "pl": "pl/Tworzenie_rozszerzenia_paska_stanu" } ) }} 

Volver al historial