Desarrollar un plugin de firefox

Conocimientos previos

Para desarrollar un plugin de firefox es necesario conocer algo de XML, de XUL y de RDF.

Nuestra primera extensión de firefox

Lo primero que tenemos que hacer es crear una carpeta para nuestra aplicación, por ejemplo favshare-post-it completando una estructura de directorios favshare-post-it/content/favshare-post-it. Dentro del directorio más profundo de esta jerarquía creamos un archivo favshare-post-it.xul con el siguiente código:

<?xml version="1.0" encoding="ISO-8859-1"?><?xml-stylesheet href="chrome://favshare-post-it/content/favshare-post-it.css" mce_href="chrome://favshare-post-it/content/favshare-post-it.css" type="text/css"?><overlay id="favshare-post-it-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/x-javascript" src="chrome://favshare-post-it/content/favshare-post-it.js" mce_src="chrome://favshare-post-it/content/favshare-post-it.js" />
<popup id="contentAreaContextMenu">  <menuseparator id="separador-favshare-post-it" />  <menuitem        id="menu-favshare-post-it" 

        class="menu-favshare-post-it-icono" 

        label="favshare Post It" 

        oncommand="postear();" 

  /> 

</popup>
</overlay>

En esta extensión separamos en ficheros el funcionamiento (XUL+JS), la apariencia (CSS) y los mensajes y descripciones (RDF) .

La función postear() la definiremos en el fichero favshare-post-it.js y los mensajes y descripciones en el fichero contents.rdf

Creamos el chrome.manifest y el install.rdf según la referencia de Mozilla.

content     sample    chrome/content/
overlay chrome://browser/content/browser.xul chrome://favshare-post-it/content/favshare-post-it.xul

<?xml version=”1.0″ encoding=”ISO-8859-1″?>
<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>jroselln@favshare.com</em:id>
    <em:version>1.0</em:version>
    <em:type>2</em:type>

<!– Target Application this extension can install into,
         with minimum and maximum supported versions. –>
<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>
 
<!– Front End MetaData –>
    <em:name>Favshare Uploader!</em:name>
    <em:description>Upload de imágenes a favshare</em:description>
    <em:creator>Jordi Rosell Nogué</em:creator>
    <em:homepageURL>http://www.favshare.com</em:homepageURL>

</Description>
</RDF>

Prueba el plugin

  1. Localiza el Profile Folder
  2. Abre el directorio extensions (crealo si no existe)
  3. Crea un nuevo fichero de texto y indica la ruta al directorio con la extension, por ejemplo C:extensionsfavshare-post-it. Guarda el fichero con el id de la extensión como su nombre, por ejemplo e.g. sample@example.net

(No descuides la “/” del final! Sin el no se registrará la extensión)

Para probar realizar los siguientes pasos:

  • Inicia Firefox. Firefox detectará el link a la extensión y la instalará.
  • Puedes volver atrás y realizar cambios.
  • Cerrar y reiniciar Firefox y los cambios deberian volver a aparecer. 

Quando todo esté perfecto sólo falta empaquetar la extensión cómo XPI

Bookmark and Share

5 Comments

Aitor  on enero 28th, 2008

Hace tiempo que yo también me abia peleado con el firefox, lo mismo el sistema de las extensiones está muy bien (una vez se llega a comrender!)…

Jordi.. No estarás pensando en hacer un pilin para almacenar milloes de imagenes repletas “de copirit” en tu álbum de favshare,com??!

Aitor  on enero 28th, 2008

Te olvidaste un paso…

Haz un backup de tu Firefos actual (Antes de empezar) conozco a mas de uno que se cargó el firefox intentando extenderlo!!

jrosell  on enero 28th, 2008

¡Te lo vuelves a instalar! Y te pillas las extensiones cachiguays que hay en rediario puestas… ¿Hemos hecho el artículo, no?

Aitor  on febrero 14th, 2008

Al final l’ahs fet??

jrosell  on febrero 14th, 2008

Puedo postear una url pero no encuentro la manera de postear la url de la imagen.
Tengo que investigar…

Leave a Comment

You must be logged in to post a comment.

Additional comments powered by BackType