O Jetpack para Firefox nos permite criar facilmente plug-ins do Firefox usando apenas as habilidades de front-end (HTML/CSS/JS) que dominamos. O que é provavelmente ainda mais interessante: o Jetpack também integra a estrutura jQuery.
Seja Adobe Air, Web OS ou Jetpack, pelo menos tenhamos certeza de que o valor do front-end será cada vez mais demonstrado nas oportunidades.
Vamos dar uma olhada em como criar sua primeira extensão do Firefox Jetpack passo a passo:
Etapa 1: instalar o plug-in Jetpack
Endereço do plug-in Jetpack: https://jetpack.mozillalabs.com/install.html
Depois de instalar o plug-in Jetpack, você pode acessar a interface local do Jetpack digitando about : jetpack na barra de endereço.
Etapa 2: Crie o arquivo planabc.js.
O código detalhado de planabc.js é:
jetpack . statusBar .
HTML : '' ,
largura : 16 ,
onReady : função ( widget ){
$ ( widget ) .clique ( função (){
guias jetpack . "http://www.planabc.net/" ;
});
}
}); jetpack . statusBar .append executará um objeto JavaScript (o objeto JavaScript possui quatro propriedades: html, url , width e onReady).
- Atributo html: Define o HTML inicial que será exibido na barra de status. Neste exemplo, um elemento IMG simples é exibido.
- Atributo url: Define a URL do conteúdo HTML externo que será exibido na barra de status. Neste exemplo, esta propriedade não é usada.
- atributo width: Define a largura do conteúdo na barra de status (unidade: pixels). Neste exemplo, é definido como 16 pixels, que é a largura do próprio elemento IMG.
- Atributo onReady: define a função a ser chamada (esta função será chamada assim que a barra de status for criada). Como o Jetpack integra a estrutura jQuery, você pode usar diretamente as propriedades e métodos do jQuery. Neste exemplo , uma função é definida. Quando a extensão Jetpack é clicada , modificaremos a propriedade jetpack tabs . jetpack tabs . contentWindow objeto de localização é equivalente ao objeto window , que você pode acessar por meio de JavaScript para acessar páginas da web.