1

Comenzando el desarrollo con JPM

5Oct
en Add-on SDK, Complementos, nodeJS, Tutoriales

Luego haber visto que es JPM y como instalarlo, en el día de hoy vamos a ver como trabajar con él creando un simple complemento de ejemplo para que puedan comenzar sus propios desarrollos, guiándose por este ejemplo básico.

Antes de comenzar es recomendable utilizar siempre la versión más reciente de Firefox o la versión del canal para desarrolladores, específicamente para usar JPM para el desarrollo de complementos es necesario la versión 38 o superior. Como en el artículo anterior mis ejemplos serán realizados desde un sistema GNU/Linux, cualquier duda con otros sistemas trataremos de responderlo en los comentarios.

Creando la estructura:

Lo primero que haremos para crear la estructura del complemento y será posicionarnos por la consola hasta nuestro espacio de trabajo, crear una carpeta con el nombre del complemento e inicializar el complemento con JPM.

mkdir ejemplo
cd ejemplo
jpm init

Al inicializar el complemento les hará una serie de preguntas con informaciones para generar el archivo package.json de la estructura del complemento el cual tiene toda la información y configuraciones, les pongo una imagen con mi información pero pueden tomar los datos que les pone de ejemplo.

crear-addonCon esto ya tenemos la estructura de un complemento básico generado con JPM y listo para comenzar a escribir las funcionalidades que queramos implementar en nuestro complemento.

En el paso anterior durante la generación del complemento hubo un paso donde les preguntaron cual sería el punto de entrada o sea el archivo por el cuál se inicializa el complemento y por defecto tomamos a index.js para esta tarea. Pues bien vamos abrirlo y pegar el código que pongo a continuación:

var buttons = require('sdk/ui/button/action');
var tabs = require("sdk/tabs");

var button = buttons.ActionButton({
  id: "firefoxmania-enlace",
  label: "Visitar firefoxmania",
  icon: {
    "16": "./favicon.png"
  },
  onClick: handleClick
});

function handleClick(state) {
  tabs.open("https://firefoxmania.uci.cu/");
}

Guardamos el contenido en el archivo index.js y vamos a crear una carpeta dentro del directorio del complemento con el nombre data, donde descargamos y copiamos la imagen muy pequeña con el logo de firefoxmania que les dejo a continuación.

favicon

Con estas pequeñas acciones ya podemos probar nuestro complemento muy básico haber si nos funciona en nuestro navegador firefox. Para ello solo necesitamos mandar a ejecutar nuestro código desde el mismo JPM con el comando(Ubuntu):

jpm run -b /usr/bin/firefox

Esto nos lanza Firefox con el complemento instalado, así podemos ir probamos lo que vamos desarrollando, si comprobamos en nuestra barra de complemento veremos el logo de Firefoxmanía donde podemos dar clic y nos llevará directo a Firefoxmanía (sitio principal) en una nueva pestaña como mismo le dijimos que hiciera en el código del archivo index.js, pues fue el funcionamiento que quisimos crear en este ejemplo básico, ya ustedes solos pueden crear los suyos propios para sus sitios preferidos.

vista-addonComo pueden apreciar ya tengo el complemento instalado en mi navegador y funcional, solo resta generar el xpi el cual es el formato en que se distribuyen los complementos para Firefox, para generar el xpi se puede realizar con el comando:

jpm xpi

Con la acción anterior ya tenemos el archivo para instalarlo simplemente presionando Ctrl + letra “o” y buscando el complemento donde fue generado, también podemos compartirlos con nuestros amigos para que se lo instalen en sus navegadores.

Esto es todo por hoy, en próximos artículos estaremos mostrando algunas funciones del SDK y las opciones de referencias para las configuraciones de nuestros complementos.

Si te quedo alguna duda puedes mirar mi complemento de ejemplo realizado para este artículo en los repositorios de código que dejo a continuación.

https://codecomunidades.uci.cu/pochy/ejemplo

https://github.com/pochy-ja/ejemplo

Etiquetado en:

1 Comentario

  1. sac dice:

    De donde puedo sacar la documentacion sobre como crear y usar los componetes

Dejar un comentario

¿Eres humano? Entonces resuelve esta operación: * Límite de tiempo se agote. Por favor, recargar el CAPTCHA por favor.