Jetpack para Firefox nos permite crear fácilmente complementos de Firefox utilizando sólo las habilidades de front-end (HTML/CSS/JS) que dominamos. Lo que probablemente sea aún más interesante: Jetpack también integra el marco jQuery.
Ya sea Adobe Air, Web OS o Jetpack, al menos estemos seguros de que el valor del front-end se demostrará cada vez más en las oportunidades.
Echemos un vistazo a cómo crear su primera extensión Firefox Jetpack paso a paso:
Paso 1: instale el complemento Jetpack
Dirección del complemento Jetpack: https://jetpack.mozillalabs.com/install.html
Después de instalar el complemento Jetpack, puede acceder a la interfaz local de Jetpack escribiendo acerca de : jetpack en la barra de direcciones.
Paso 2: cree el archivo planabc.js.
El código detallado de planabc.js es:
jetpack . barra de estado agregar ( {
HTML : '<img src="http://www.planabc.net/favicon.ico"/>' ,
ancho : 16 ,
enListo : función ( widget ) {
$ ( widget ) . Haga clic ( función (){
pestañas de jetpack . "http://www.planabc.net/" ;
});
}
}); jetpack . statusBar . append ejecutará un objeto JavaScript (el objeto JavaScript tiene cuatro propiedades: html, url, ancho y onReady).
- atributo html: Define el HTML inicial que se mostrará en la barra de estado. En este ejemplo, se muestra un elemento IMG simple.
- atributo url: define la URL del contenido HTML externo que se mostrará en la barra de estado. En este ejemplo, esta propiedad no se utiliza.
- atributo de ancho: define el ancho del contenido en la barra de estado (unidad: píxeles). En este ejemplo, se define como 16 píxeles, que es el ancho del propio elemento IMG.
- Atributo onReady: define la función que se llamará (esta función se llamará una vez que se cree la barra de estado). Dado que Jetpack integra el marco jQuery, puede utilizar directamente las propiedades y métodos de jQuery. En este ejemplo, se define una función. Cuando se hace clic en la extensión Jetpack , modificaremos la propiedad de ubicación de las pestañas del jetpack a http://www.planabc.net/ . jetpack tabs focus . contentWindow objeto de ubicación es equivalente al objeto de ventana, al que puede acceder a través de JavaScript para acceder a páginas web.
