Crear un panel lateral en Firefox

Ejemplo 1. Estructura del paquete

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

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.

<?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="https://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.

<?xml version="1.0"?>

<!DOCTYPE overlay SYSTEM "chrome://emptysidebar/locale/emptysidebar.dtd">
<overlay id="emptySidebarOverlay"
         xmlns="https://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.

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

<RDF xmlns="https://www.w3.org/1999/02/22-rdf-syntax-ns#" 
 xmlns:em="https://www.mozilla.org/2004/em-rdf#">
  <Description about="urn:mozilla:install-manifest">
    <em:id>[email protected]</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.

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. [email protected]

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

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:

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.

Recursos

• Creando una extensión
• Crear aplicaciones con Mozilla
• Empaquetando extensiones de Firefox/Thunderbird
• Crear una panel lateral para Firefox 1