Este foi um mini-tutorial desenvolvido, em 2009, como trabalho para a matéria “Reuso e Componentes de Software” da pós-graduação em Engenharia de Software. Foi um trabalho desenvolvido por mim e pelo colega Cássio. Acho que pode ser útil para quem pretende desenvolver uma extensão para o Firefox, mas não sabe nem por onde começar.
1. Introdução
Neste trabalho iremos demonstrar o passo-a-passo para o desenvolvimento de uma extensão para o sistema Mozilla Firefox.
O molde em que o sistema foi desenvolvido nos proporciona a flexibilidade de desenvolvimento de extensões dos mais variados tipos, desde as mais simples, para uma customização de algum item do programa, até as mais sofisticadas, que utilizam o framework XPCOM, por exemplo.
Este tutorial consiste em mostrar como são utilizadas as tecnologias base na criação de extensões, que são: XUL, Javascript e CSS [Shimoda 2007], assim como o uso do AJAX (através do objeto XMLHttpRequest) para tornar a aplicação dinâmica.
2. Tutorial
Para iniciar os trabalhos com o desenvolvimento da extensão, será necessária a preparação do ambiente, conforme descrito a seguir, exemplificando para ambientes com o Windows XP.
2.1. Configurando o ambiente de desenvolvimento
2.1.1. Estrutura de diretório e arquivos
As extensões podem ser distribuídas em arquivos XPI, que são nada mais que arquivos ZIP com a extensão de arquivo XPI (pronuncia-se Zippy) [Shepherd 2009].
A estrutura básica do arquivo XPI (utilizada nas atuais versões do Firefox) que usaremos será composta dos seguintes arquivos e diretórios:
Note que esta é a estrutura básica para o funcionamento da extensão, demais opções serão inseridas e detalhadas mais a frente.
Dentro da pasta escolhida para arquivar a extensão (que pode ficar em um diretório qualquer, por exemplo C:PlacarAoVivo) devem ser criados o diretório chrome e dentro dele o subdiretório content. Dentro de content devem ser criados os arquivos placaraovivo.js e placaraovivo.xul, ambos vazios por enquanto.
Na pasta raiz devem ser criados, também vazios, os arquivos chrome.manifest e install.rdf.
Agora que estamos com a nossa estrutura básica de arquivos e diretórios criada, precisamos ajustar o Firefox para o desenvolvimento.
2.1.2. Perfil de Desenvolvimento
Para um ambiente de desenvolvimento que não interfira no uso pessoal do Firefox, a sugestão é utilizar um perfil específico para este fim, que deve ser configurado da seguinte forma [Ponomarev 2009]:
Na linha de comando (Iniciar > Executar > Abrir:) digite:
firefox.exe -no-remote -P dev
Com esse comando “-no-remote” é possível abrir mais de uma instância do Firefox e o “-P dev” seleciona um perfil para, no caso, o desenvolvimento de extensões.
Caso o perfil “dev” seja iniciado pela 1ª vez, o Gerenciador de Perfil será exibido, onde será possível escolher o perfil padrão e, obviamente, gerenciar os perfis do programa.
Figura 1 – Gerenciador de Perfil do Mozilla Firefox
2.1.3. Preferências de Desenvolvimento
Para facilitar o desenvolvimento, algumas configurações do Firefox podem ser ajustadas, porém, é altamente recomendado que estas alterações sejam feitas em um perfil de desenvolvimento, como o criado anteriormente. Para alterar estas configurações, digite na barra de endereços do Firefox: about:config e pressione a tecla enter. Após isso, será mostrada uma tela de aviso, HIC SUNT DRACONES, informando que estas opções devem ser modificadas com cuidado, para não prejudicar o funcionamento do programa. Basta continuar que a tela principal será exibida:
Figura 2 – Tela de configurações about:config do Firefox.
Alguns itens estão com o valor padrão e outros nem são mostrados na lista, logo, terão que ser adicionados.
2.2. Arquivos
2.2.1. Install.rdf – Manifesto de Instalação
Insira no arquivo install.rdf, que você criou anteriormente, o conteúdo abaixo:
[sourcecode language=”plain”]
<?xml version="1.0"?>
<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>{E6E814D4-2C42-480d-947D-25AA02EE000E}</em:id>
<em:version>1.0</em:version>
<em:type>2</em:type>
<!– Front End Metadata–>
<em:name>Placar Ao Vivo</em:name>
<em:description>Exibe informacoes das partidas de futebol finalizadas, em andamento ou que ainda serao iniciadas, na barra de status.</em:description>
<em:creator>Cássio Santos e Paulo A. Costa</em:creator>
<em:homepageURL>http://www.pauloacosta/placaraovivo</em:homepageURL>
<!– Versões Suportadas –>
<em:targetApplication>
<Description>
<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
<em:minVersion>1.5</em:minVersion>
<em:maxVersion>3.*</em:maxVersion>
</Description>
</em:targetApplication>
</Description>
</RDF>
[/sourcecode]
No primeiro bloco podemos ver 3 elementos:
Figura 3 – Programa GUIDGen, da Microsoft
O segundo bloco é responsável pela identificação da extensão: nome, descrição, autor e endereço da página da mesma.
O terceiro e último bloco Target Application é o bloco que tem como objetivo definir o aplicativo onde deverá ser utilizada esta extensão. Temos o GUID do Firefox no campo ID, a versão mais antiga onde pode ser utilizada (MinVersion) e a versão mais nova compatível (MaxVersion).
Mais informações de campos obrigatórios e opcionais podem ser encontrado no site da mozilla. Endereço: https://developer.mozilla.org/en/Install_Manifests.
2.2.2. chrome.manifest – Manifesto Chrome
A interface de usuário do Firefox foi desenvolvida em XUL e JavaScript.
É possível modificar a interface usando XUL, adicionando e/ou modificando elementos XUL DOM, através de scripts ou de acordo com determinado evento.
O Firefox é baseado no arquivo browser.xul, que contém todos os elementos que formam a interface com o usuário.
Para a utilização da nossa extensão, faremos um overlay, ou superposição, de elementos, ou seja, vamos inserir no nosso chrome.manifest o seguinte:
content placaraovivo chrome/content/
# Firefox
overlay chrome://browser/content/browser.xul chrome://placaraovivo/content/placaraovivo.xul
Isso quer dizer que indicamos no arquivo o local onde as informações de superposição, por exemplo, estão. No caso, o Firefox entende que devemos utilizar o placaraovivo.xul para sobrepor ou adicionar informações ao browser.xul.
2.2.3. placaraovivo.xul – Arquivo XUL
Então, nossa extensão passará a aparecer e funcionar no local exato onde definirmos dentro do placaraovivo.xul, que no caso será na barra de status (elemento statusbar).
O conteúdo deverá ser o seguinte:
<?xml version=”1.0″ encoding=”UTF-8″?>
<!DOCTYPE overlay >
<overlay id=”placaraovivo-overlay”
xmlns=”http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul”>
<script type=”application/x-javascript”
src=”chrome://placaraovivo/content/placaraovivo.js”/>
<!– Firefox –>
<statusbar id=”status-bar”>
<statusbarpanel id=”placaraovivo” label=”Carregando…” tooltiptext=”” onclick=”PlacarAoVivo.refreshInformation()” width=”250″/>
</statusbar>
</overlay>
Note que este arquivo XUL faz referência ao arquivo placaraovivo.js que é o arquivo JavaScript que contém todo o código que fará a extensão funcionar.
2.2.3. placaraovivo.js – Arquivo JavaScript
O arquivo placaraovivo.js contém as funções principais:
Além das funções, existe um handler de eventos que chama a execução da extensão assim que o navegador for carregado:
window.addEventListener(“load”, function(e) { PlacarAoVivo.startup(); }, false);
Todo o código da extensão estará disponível nos ANEXOS no final do tutorial.
2.3. Instalação da Extensão
Para gerar o arquivo XPI basta ir para a pasta raiz e compactar todo o conteúdo em um arquivo ZIP. Após, renomeie a extensão do arquivo, por exemplo, placaraovivo.zip para placaraovivo.xpi.
Então, para instalar a extensão basta mover o arquivo XPI para a janela do Firefox, que mostrará a seguinte tela:
Figura 4 – Instalação da Extensão PlacarAoVivo
Depois da instalação o navegador deverá ser reiniciado e caso tudo ocorra bem, a extensão entrará em funcionamento na barra de status do programa, conforme ilustração a seguir:
Figura 5 – Firefox com a extensão em funcionamento
Agora em zoom, para melhor visualização:
Figura 6 – Detalhamento do funcionamento da extensão no Firefox
3. Considerações Finais – Análise do Modelo de Componentes
Podemos verificar que o modelo adotado pela Mozilla Foundation na composição do Mozilla Firefox é altamente voltado para a componentização. Na verdade, a plataforma Mozilla Firefox é desenvolvida em cima de componentes XPCOM que interagem entre si, além de fornecer às extensões (de terceiros) interfaces públicas para que possam estender as funcionalidades da plataforma e se comunicar com a engine do Firefox.
Estas interfaces públicas, cujas definições podem ser encontradas em modules/libpref/public/*.idl, formam a chamada Gecko SDK (também conhecido como XULRunner SDK). Que é composta por componentes responsáveis pela I/O, Segurança, Gerenciamento de Senha, Preferências e etc.
Já as extensões interagem com a plataforma através da utilização de arquivos XML, RDF (como estratégia de definição de interface), e JavaScript. Os primeiros fornecendo as informações requeridas para a sua utilização e integração com a Interface (XUL), o último ditando o comportamento da extensão.
Esta estrutura permite criar uma plataforma simples e capaz de se ajustar às necessidades dos usuários do sistema. Desde usuários comuns, que se beneficiam do sistema leve e rápido, a usuários mais exigentes que, a depender de sua necessidade, podem ajustar o sistema para o modelo desejado, através das extensões e plugins.
Apesar de uma extensão poder utilizar estas interfaces (IDL – XPCOM), ela é criada em um formato próprio definido pela Mozilla Foundation. Ela não fornece uma interface pública para ser utilizada por outras extensões, porém, estas podem interagir se utilizando da plataforma como meio.
As tecnologias utilizadas nesse modelo adotado pela Mozilla podem ser usadas para criação de uma infinidade de extensões com os mais variados propósitos, como pode ser visto no repositório de extensões que a própria empresa disponibiliza aos seus usuários e que pode ser acessada no link: https://addons.mozilla.org/pt-BR/firefox/.
3.1. Configuração Externa e Propriedades
A plataforma permite que as extensões sejam ajustadas, permitindo um maior poder de customização. Para isso, ele deve trabalhar utilizando a API do XPCOM conhecida pelo nome de Preferences API, que é fornecida através dos Serviços nsIPrefService, nsIPrefBranch e nsIPrefBranch2. Esta API permite o gerenciamento e ajuste de propriedades, assim como a capacidade de observar as mudanças dos valores de preferências. Os ajustes são realizados em uma tela de opções, e a mudança de comportamento é esperada na extensão.
3.2. Empacotamento e Distribuição
Extensão é uma forma de pacote instalável que pode ser baixado e instalado pelo próprio usuário. Extensões se utilizam de uma estrutura de diretório que fornecem chrome, componentes, e outros arquivos com o objetivo de estender as funcionalidades de um programa XUL. Toda extensão deve fornecer um arquivo install.rdf que contém metadados sobre a extensão, como ID único, versão, autor, e informações de compatibilidade.
Depois de criada a estrutura da extensão, este deve ser compactado no formato Zip e renomeado para a extensão XPI, para então poder ser distribuído livremente.
3.3. Instalação e Uso
A instalação pode ser realizada de forma simples: o usuário deve arrastar o arquivo XPI sobre a janela do Firefox e soltá-lo (drag-and-drop), sendo então requisitada, através de uma janela, a confirmação da instalação. Depois de instalada, o browser deve ser reiniciado para que a mesma possa ser inicializada.
Bibliografia
Shepherd, E. (2009) “Building_an_Extension”, Setembro/2009.
Ponomarev, N. (2009) “Setting up an extension development environment”, Setembro/2009.
MozillaZine. (2008) “Getting started with extension development”, Maio/2009.
Gomibuchi, T. (2007) “Let’s build a Firefox extension“, Junho/2009.
Mozilla Foundation. (2009) “XUL Reference“, Agosto/2009.
Mozilla Foundation. (2009) “Extension Packaging“, Agosto/2009.
Shimoda, H. (2007) “Technologies used in developing extensions“, Junho/2009.
Wilsher, S. (2009) “Using XMLHttpRequest”, Outubro/2009.
E cade o arquivo .js ?
Qual é o codigo do JS mesmo???
ei qual é o codigo do js
Muito bom!