Criando extensões para Firefox

Vamos ao passo a passo de criar uma extensão para Firefox:

1o.) Crie seu projeto com os seguintes diretórios:
<nome_do_projeto>/
<nome_do_projeto>/components
<nome_do_projeto>/defaults
<nome_do_projeto>/plugins
<nome_do_projeto>/chrome
<nome_do_projeto>/chrome/content
<nome_do_projeto>/chrome/icons
<nome_do_projeto>/chrome/icons/default

2o.) Na raiz do projeto, crie o arquivo install.rdf com as seguintes linhas:

<?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#">
<!--Descrição de seu plugin-->
<Description about="urn:mozilla:install-manifest">
<!--Identificador (email)-->
<em:id>exemplo@email.com.br</em:id>
<!--Número da versão-->
<em:version>1.0</em:version>
<!--Tipo: extensão-->
<em:type>2</em:type>

<!-- Características da extensão -->
<em:targetApplication>
<Description>
<!--Identificador do Firefox (valor fixo para qualquer extensão do Firefox)-->
<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
<!--Versão mínima suportada-->
<em:minVersion>1.5</em:minVersion>
<!--Versão máxima suportada-->
<em:maxVersion>4.0.*</em:maxVersion>
</Description>
</em:targetApplication>

<!-- Mais informações -->
<!--Nome da extensão-->
<em:name>olamundo</em:name>
<!--Descrição-->
<em:description>Uma extensão de teste</em:description>
<!--Criador-->
<em:creator>Takemura</em:creator>
<!--Página da extensão-->
<em:homepageURL>http://blogtotakemura.blogspot.com</em:homepageURL>
</Description>
</RDF>

3o.) Crie o arquivo olamundo.xul em <nome_do_projeto>/chrome/content (XUL é o arquivo que utiliza a aplicação Firefox para criar componentes visuais -- é onde podemos criar janelas nativas e/ou colocar ícones e botões dentro do Firefox). Neste caso, eu estou reescrevendo a barra de status do Firefox (colocando mais um item):

<?xml version="1.0"?>
<overlay id="olamundo"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<statusbar id="status-bar">
<script src="olamundo.js"></script>
<statusbarpanel id="my-panel" label="Ola mundo!!!!!" onclick="OlaMundo.show();"/>
</statusbar>
</overlay>

4o.) Crie o arquivo olamundo.js no mesmo lugar que olamundo.xul (aqui, ele vai mostrar um alert ao clicar na frase "Ola mundo!!!!" no status bar):

var OlaMundo = function() {};

OlaMundo.show = function() {
alert("Ola mundo !!!!");
}

5o.) Crie o chrome.manifest na raiz do projeto com as seguintes linhas (a primeira diz onde esta o conteúdo do projeto e o segundo diz que o componente status bar do Firefox esta sendo reescrito pelo arquivo olamundo.xul):

content olamundo chrome/content/
overlay chrome://browser/content/browser.xul chrome://olamundo/content/olamundo.xul

6.) Verifique se os arquivos estão nos lugares corretos:

<nome_do_projeto>/install.rdf
<nome_do_projeto>/chrome.manifest
<nome_do_projeto>/components
<nome_do_projeto>/defaults
<nome_do_projeto>/plugins
<nome_do_projeto>/chrome
<nome_do_projeto>/chrome/content/olamundo.xul
<nome_do_projeto>/chrome/content/olamundo.js
<nome_do_projeto>/chrome/icons
<nome_do_projeto>/chrome/icons/default

7.) Zipe (ou comprima :P) a estrutura de diretórios (sem o diretório <nome_do_projeto>) e renomeie o arquivo gerado para olamundo.xpi

8) Abra o arquivo no Firefox e reinicie a aplicação.

9) Se tudo ocorrer bem, aparece na barra de status (lá embaixo…), a frase "Ola mundo!!!!" :)

Legal, não?

Para coisas mais complexas, verifique no blog da turma do Mozilla:
http://blog.mozilla.com/addons/2009/01/28/how-to-develop-a-firefox-extension/

E quem tiver interesse em como fazer "telinhas nativas" em Firefox, dê uma olhada no item XUL do site de desenvolvedores do Mozilla:
https://developer.mozilla.org/pt/XUL