Como criar uma extensão para Firefox

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:

  • /chrome/content/placaraovivo.js
  • /chrome/content/placaraovivo.xul
  • /chrome.manifest
  • /install.rdf
  • 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.

    clip_image001

    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:

    clip_image003

    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.

  • javascript.options.showInConsole = true – Servirá para mostrar os erros dos arquivos chrome no Console de Erros;
  • nglayout.debug.disable_xul_cache = true – Desabilita o cache para arquivos XUL, logo, não será necessário reiniciar o navegador para visualizar mudanças nas interfaces (desde que seja usado o modelo de pacote mais simples, sem o uso de JARs, como é o caso deste tutorial);
  • javascript.options.strict = true – Habilita avisos sobre erros de JavaScript no Console de Erros;
  • extensions.logging.enabled = true – Esta função permite a visualização de problemas na instalação e atualização das extensões no Console de Erros.
  • dom.report_all_js_exceptions = true – Permite a visualização de erros de Javascript.
  • 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:

  • id: Código de identificação da extensão, pode ser utilizado uma GUID. Para criação do GUID utilizaremos o software GUIDGen da Microsoft: http://www.microsoft.com/downloads/details.aspx?FamilyID=94551F58-484F-4A8C-BB39-ADB270833AFC&displaylang=en;
  • clip_image005

    Figura 3 – Programa GUIDGen, da Microsoft

  • version: A versão da sua extensão. No nosso caso 1.0;
  • type: 2 (significa que é a instalação de uma extensão).
  • 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:

  • startup() – Serve para iniciar o funcionamento da extensão;
  • refreshInformation() – Serve para atualizar as informações que serão exibidas na extensão (Aqui será usado o AJAX com o objeto XMLHttpRequest para buscar as informações necessárias na Internet;
  • getContentStatusBar() – Trata as informações que serão exibidas;
  • getTagContent() – Trata as informações que serão exibidas;
  • refreshStatusBar() – Atualiza o elemento statusbar.
  • 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:

    clip_image007

    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:

    clip_image009

    Figura 5 – Firefox com a extensão em funcionamento

    Agora em zoom, para melhor visualização:

    clip_image011

    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.

    4 comentários em “Como criar uma extensão para Firefox”

    Deixe um comentário

    O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

    Rolar para cima