Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

Crear un panel lateral en Firefox

Este artículo muestra cómo crear un panel lateral registrado para Firefox 2 o superior. Véase la sección de referencias para más información sobre cómo crear una extensión para versiones anteriores.

Introducción

Este artículo es un punto de partida para la creación de un nuevo panel lateral para Firefox. Lo que haremos será crear un panel lateral y registrarlo para que esté disponible en el menú. La meta es crear un panel vacío que pueda ser usado como inicio para nuevas aplicaciones.

La creación de un panel lateral precisa de algo de creación de interfaz y de registro en la aplicación destino. Primero se creará una simple página XUL. Luego se crearán los ficheros de registro y finalmente el panel lateral será empaquetado dentro de un fichero instalable XPI.

Pre-requisitos

Este artículo es una forma rápida de empezar pero, no explica todos los elementos de XUL ni el empaquetado de los XPI. Es recomendable que tengas algunos conocimientos básicos del funcionamiento de XUL y cómo maneja Firefox las extensiones. Véase Creando una extensión para información más detallada sobre la estructura, empaquetado y publicación de extensiones.

Paquetes

Las extensiones para Firefox son instaladas en paquetes ("Bundles"). Un paquete de extensión contiene generalmente un apartado "content", el cual contiene el código XUL y la lógica de la aplicación. Opcionalmente, se pueden incluir configuraciones regionales y temas. La mayoría de los añadidos vienen en una estructura de árbol predeterminada, y aunque no es requerido, es recomendable utilizar dicha estructura. Aquí se crea el paquete para el panel lateral y los ficheros incluìdos se muestran a continuación.

Ejemplo 1. Estructura del paquete

emptysidebar
\- chrome
   |- content
   |- locale
   | \- en-US 
   \- skin

Crea todos los directorios, excepto skin. No se usa en este tutorial.

locale alberga la configuración regional, sólo la configuración en-US será creada. Está listada en el ejemplo 2. La configuración regional incluye el nombre y los atajos de teclado para el panel lateral.

Ejemplo 2. chrome/locale/en-US/emptysidebar.dtd

<!ENTITY emptysidebar.title "EmptySidebar">
<!ENTITY openEmptySidebar.commandkey "E">
<!ENTITY openEmptySidebar.modifierskey "shift accel">

El directorio content incluye nuestro panel lateral, el emptysidebar.xul es mostrado en Example 3 y crea una página para albergar una etiqueta. Se pueden incluir otros elementos. Por favor, léase los tutoriales XUL para más información.

 

Ejemplo 3. chrome/content/emptysidebar.xul

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type"text/css" ?>
<?xml-stylesheet href="chrome://browser/skin/browser.css" type="text/css" ?>
<!DOCTYPE page SYSTEM "chrome://emptysidebar/locale/emptysidebar.dtd">

<page id="sbEmptySidebar" title="&emptysidebar.title;"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" >
  <vbox flex="1">
    <label id="atest" value="&emptysidebar.title;" />
  </vbox>
</page>

Las nuevas extensiones pueden ser registradas en los menús o en los menús emergentes. Firefox utiliza overlays para ampliar menús. Éste es un fichero XUL separado que especifica la ubicación de los elementos del menú. El panel lateral es añadido aquí al menú Ver > Panel lateral. El fichero overlay es listado en el ejemplo 4.

Ejemplo 4. chrome/contents/firefoxOverlay.xul

<?xml version="1.0"?>

<!DOCTYPE overlay SYSTEM "chrome://emptysidebar/locale/emptysidebar.dtd">
<overlay id="emptySidebarOverlay"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  
  <menupopup id="viewSidebarMenu">
    <menuitem key="key_openEmptySidebar" observes="viewEmptySidebar"  />
  </menupopup>
  
  <keyset id="mainKeyset">
    <key id="key_openEmptySidebar" command="viewEmptySidebar"
         key="&openEmptySidebar.commandkey;" 
         modifiers="&openEmptySidebar.modifierskey;" />
  </keyset>
  
  <broadcasterset id="mainBroadcasterSet"> 
    <broadcaster id="viewEmptySidebar" 
                 label="&emptysidebar.title;"
                 autoCheck="false"
                 type="checkbox"
                 group="sidebar"
                 sidebarurl="chrome://emptysidebar/content/emptysidebar.xul"
                 sidebartitle="&emptysidebar.title;"
                 oncommand="toggleSidebar('viewEmptySidebar');" />
  </broadcasterset>
</overlay>

El fichero overlay consta de tres entradas: la definición del menú, los atajos de teclado y el manejador de eventos para los elementos de la interfaz. El propagador es enlazado a un elemento de la IU con el atributo observes. El propagador viewEmptySidebar define cómo se maneja el evento clic en el menú o cuando el atajo de teclado es usado.

La extensión necesita suministrar algunos ficheros especiales de manifiesto que controlan cómo se instala y dónde están guardados sus recursos chrome. El primero es install.rdf, el manifiesto de instalación. Véase Install Manifests para un listado completo de las propiedades requeridas y opcionales. El manifiesto de instalación se lista en el ejemplo 5.

Ejemplo 5. install.rdf

<?xml version="1.0" encoding="UTF-8"?>

<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>emptysidebar@yourdomain.com</em:id>
    <em:name>EmptySidebar Extension</em:name>
    <em:version>1.0</em:version>
    <em:creator>Your Name</em:creator>
    <em:description>Example extension for creation and registration of a sidebar.</em:description>
    <em:targetApplication>
      <Description>
        <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <!-- firefox -->
        <em:minVersion>1.5</em:minVersion>
        <em:maxVersion>2.0.0.*</em:maxVersion>
      </Description>
    </em:targetApplication>
  </Description>
</RDF>

El otro fichero de manifiesto es chrome.manifest, el fichero de manifiesto chrome. El manifiesto chrome crea una lista con todos los tipos de recurso usados por la extensión. El manifiesto también le dice a Firefox que la extensión tiene un overlay que necesita ser mezclado en el navegador. Para más información sobre manifiestos chrome y las propiedades que soportan, véase la referencia del Manifiesto Chrome. El manifiesto usado en esta extensión se muestra en el ejemplo 6.

Ejemplo 6. chrome.manifest

content	emptysidebar	chrome/content/
locale	emptysidebar	en-US	locale/en-US/
skin	emptysidebar	classic/1.0	skin/
overlay	chrome://browser/content/browser.xul	chrome://emptysidebar/content/firefoxOverlay.xul

Prueba

Durante el proceso de desarrollo del panel lateral, será necesario ir probándolo con Firefox. Hay un modo simple de hacer esto. Primero, necesitamos darle a conocer a Firefox la extensión.

  1. Abre el directorio de tu perfil
  2. Abre el directorio de las extensiones (créalo si no existe)
  3. Crea un nuevo fichero de texto y escribe en él la ruta al directorio de la extensión, p.e. C:\extensiones\miExtension o ~/extensiones/miExtension. Guarda el fichero con el id de la extensión como nombre, p.e. emptysidebar@yourdomain.com

¡Ahora estás preparado para probar la extensión! Reinicia Firefox y el panel lateral estará incluido en el menú.

Imagen:Sidebar-test.png

Después podrás volver y hacer cambios en el fichero XUL. Cerrando y reiniciando Firefox deberían verse reflejados.

Publicación

Ahora que tenemos el panel lateral es hora de hacerlo disponible al mundo. La instalación necesita la creación de un fichero XPI identificado como extensión de Firefox. El XPI es un fichero ZIP que contiene los ficheros de contenido, de configuración regional y de manifiesto.

Los directorios content, locale y skin están empaquetados en emptysidebar.jar, los cuales deberían  ser creados en el directorio chrome. En los sistemas unix:

~/src/emptysidebar$ cd chrome
~/src/emptysidebar/chrome$ zip -r emptysidebar.jar content/ locale/

En sistemas Windows, utiliza una herramienta ZIP para crear emptysidebar.zip y luego renómbralo como emptysidebar.jar.

Dado que estamos empaquetando una extensión con un fichero JAR, necesitamos actualizar el fichero chrome.manifest para incluir dicho fichero:

Ejemplo 7. chrome.manifest

content emptysidebar	jar:chrome/emptysidebar.jar!/content/
locale  emptysidebar	en-US	jar:chrome/emptysidebar.jar!/locale/en-US/
skin    emptysidebar	classic/1.0	jar:chrome/emptysidebar.jar!/skin/
overlay chrome://browser/content/browser.xul	chrome://emptysidebar/content/firefoxOverlay.xul

Por último, creamos el fichero XPI. Éste es un fichero ZIP que contiene el fichero JAR en el directorio chrome y los ficheros de manifiesto. En sistemas unix:

~/src/emptysidebar/chrome$ cd ..
~/src/emptysidebar$ zip emptysidebar.xpi install.rdf chrome.manifest chrome/emptysidebar.jar

Abre Firefox y navega hasta el directorio que contiene emptysidebar.xpi. Haz clic en el fichero y la ventana de instalación de la extensión aparecerá. Tras reiniciar Firefox, el panel lateral estará instalado.

Puedes descargar el proyecto vacío del panel lateral para usarlo como base de tus propios paneles laterales.

Imagen:Sidebar-installed.png
The EmptySidebar extension

Recursos

Información del documento original

  • Autor: J.C. Wesdorp <jcwesdorp . at . occidopagus.nl> - May 30, 2005.
  • Actualizado para Firefox 2 - 12 diciembre 2006.
  • Permiso concedido para migrarlo en enero de 2006 incluyendo el permiso para cambiarle la licencia bajo CC:By-SA.
  • Fuente original: http://occidopagus.nl/firefox/emptysidebar/

Etiquetas y colaboradores del documento

 Colaboradores en esta página: DoctorRomi, Nukeador, Superruzafa
 Última actualización por: DoctorRomi,