workshop (mozilla party) desenvolvendo extensões para o firefox 3.0
Post on 29-Jun-2015
2.127 Views
Preview:
DESCRIPTION
TRANSCRIPT
Extensões pro Firefox
Eu sou
Elomar França
4º ano do técnico integrado de Informática
Estagiando na Techvirtual
Fã do Firefox!
O que é uma extensão?
Mini-aplicativo que roda no Firefox
Modifica o navegador
Adiciona funcionalidades
Feita usandoXULXML User Interface LanguageLinguagem de marcação criada pra definir a interface
do Mozilla
JavascriptPra adicionar comportamento
CSSPra adicionar estilo
Quem já desenvolve aplicações web vai se sentir em casa
Preparando o Ambienteabout:configjavascript.options.showInConsole = true
nglayout.debug.disable_xul_cache = true
Instale o DOM Inspectorhttps://addons.mozilla.org/pt-BR/firefox/addon/6622
Baixe o código de hojehttp://impactajax.com/maisweb/workshop/
Começando
Alguns nomes pra arquivos e diretórios são convenções - é melhor seguir.
helloworld/chrome.manifestinstall.rdfcontent/
overlay.jsoverlay.xulhello.xul
locale/pt-BR/
overlay.dtdhello.dtd
skin/overlay.css
Criar na mão é chaaaaato
http://ted.mielczarek.org/code/mozilla/extensionwiz/
http://tinyurl.com/6hvfw7
URL Chromechrome://<package name>/<part>/<file.xul>
chrome://helloworld/content/overlay.xul
chrome://helloworld/content/overlay.js
chrome://helloworld/skin/overlay.css
chrome://helloworld/locale/pt-BR/hello.dtd
Arquivos ManifestDescreve pacotes e indica seu lugar no disco.content helloworld content/
Descreve “merges” de arquivos XULoverlay chrome://browser/content/browser.xul
chrome://helloworld/content/overlay.xul
Descreve pacotes de localizaçãolocale helloworld pt-BR locale/pt-BR/
skin helloworld classic/1.0 skin/
chrome.manifestcontent helloworld content/
overlay chrome://browser/content/browser.xulchrome://helloworld/content/overlay.xul
locale helloworld pt-BR locale/pt-BR/
skin helloworld classic/1.0 skin/
Usando Entidades XML
Ajudam na hora da internacionalização
Todas as strings que dependem do idioma ficam separadas do programa
<!ENTITY nome "Valor">
overlay.dtd:<!ENTITY helloworld "Olá Mundo!">
hello.dtd:<!ENTITY title.label "Olá Mundo!">
<!ENTITY separate.label "Minha Primeira Extensão pro Firefox!">
<!ENTITY close.label "Fechar">
Um pouquinho de XULLinguagem de Marcação (Lembra XHTML)Elementos pra:• Controles como caixas de texto e checkboxes• Barras de ferramentas com menus ou outros
elementos• Menus em barras de menus ou pop-ups• Caixas com abas• Árvores para informação hierárquica• Atalhos de teclado
Criando uma Janela
http://www.pastie.org/217713
http://javascript.infogami.com/Javascript_in_Ten_Minutes
http://developer.mozilla.org/en/docs/JavaScript
Criando o Instalador
Pra isso existem wizards!
CSS
overlay.css
http://www.pastie.org/218527
Registrando
Crie um arquivo na pasta de seu perfil de usuário. O nome deve ser a id da extensão
helloworld@maisweb
/home/user/.mozilla/firefox/w8uij5g.default/extensions
O conteúdo é uma linha com o caminho até a extensão
/home/user/helloworld
Empacotando
Todo o conteúdo (pastas content, locale e skin)
fica num arquivo .jar
Tudo (conteúdo, chrome e install.rdf) fica num
arquivo .xpi
(São só arquivos zipados)
Empacotando
Primeiro passo, atualizar a
estrutura de diretórios
helloworld.xpi/chrome.manifest
install.rdf
chrome/helloworld.jar
content/
overlay.js
overlay.xul
hello.xul
locale/
pt-BR/
overlay.dtd
hello.dtd
skin/
overlay.css
Segundo passo, atualizar o
chrome.manifest
content helloworldjar:chrome/helloworld.jar!/content/
overlay chrome://browser/content/browser.xulchrome://helloworld/content/overlay.xul
locale helloworld pt-BR jar:chrome/helloworld.jar!/locale/pt-BR
skin helloworld classic/1.0 jar:chrome/helloworld.jar!/skin/
$ zip -r helloworld.jar content/* skin/* locale/*
$ zip helloworld.xpi install.rdf chrome.manifestchrome/tuttoolbar.jar
Empacotando
http://www.borngeek.com/firefox/toolbar-tutorial/chapter-7/
Pronto!
Sua primeira extensão pro Firefox!
Firefox 3
Duas grandes novidades pra quem desenvolve extensões
FUEL
Biblioteca pra facilitar o acesso a recursos do Firefox
Classes para Bookmarks, Janelas, Sessão, Extensões, etc.
http://developer.mozilla.org/en/docs/FUEL
microformats API
API (sério?) pra manipular
Microformats (meeesmo?) numa página
microformats
especificações que descrevem uma informação para humanos e máquinas
o código passa a ter mais significado
A gente começa com uma informação pronta pra humanos
Exemplo com hCard
Exemplo retirado de<http://tantek.com/presentations/2006/07/what-are-microformats/>
Exemplo retirado de<http://tantek.com/presentations/2006/07/what-are-microformats/>
Agora nós temos XHTMLPra humanos, ainda são informações de contato
Pra máquinas, é só XHTML
Agora nós temos hCard!Pra humanos, ainda são só informações de contato
Mas máquinas agora podem identificar esse padrãoE saber que aqui temos informações de contato
Exemplo retirado de<http://tantek.com/presentations/2006/07/what-are-microformats/>
Exemplo retirado de<http://tantek.com/presentations/2006/07/what-are-microformats/>
Quase nenhum esforço, e agora temos informação que
faz sentido para humanos e máquinas
XHTML com mais significado
Existem dezenas de microformats
hCardPessoas e organizações
rel-tagTags, categorias
VoteLinks, hReviewsOpiniões, avaliações, resenhas
hCalendarCalendários e eventos
XFNRedes sociais
rel-licenseLicenças
microformats API
Suporta os Microformats adr, geo, hCard, hCalendar e tag
Você pode adicionar outros
Principais métodos: count e get
Usando a API
Vamos criar uma extensão que pega o primeiro
hCard de uma página e preenche um formulário.
Baixe o código fonte
impactajax.com/maisweb/workshop/hcardformfiller.zip
Registre o pacote
hcardformfiller@maisweb
Adicionando a UI
firefoxOverlay.xul
<overlay>
...
<toolbarpalette id="nav-bar">
</toolbarpalette>
</overlay>
Adicionando Comportamento
overlay.js
http://www.pastie.org/218547
Testando
Vai em
codando.wordpress.com/sobre
[clica em ‘grab’]
Agora em
impactajax.com/maisweb/workshop/form.html
[clica em ‘past’]
Por hoje é só, pessoal!
Espero que tenham curtido
O que vem depois
• Internacionalização
• Mais XUL
• FUEL
• Update
• Preferências
• Microformats
Referências
• http://www.borngeek.com/firefox/toolbar-tutorial/
• http://www.rietta.com/firefox/Tutorial/overview.html
• http://www.businesslogs.com/technology/firefox_extension_tutorial.php
• http://developer.mozilla.org/en/docs/Building_an_Extension
• http://lifehacker.com/software/programming/how-to-build-a-firefox-extension-264490.php
• http://roachfiend.com/archives/2004/12/08/how-to-create-firefox-extensions/
• http://developer.mozilla.org/en/docs/Extensions
• http://kb.mozillazine.org/Extension_development#Tutorials
• http://simplesideias.com.br/criando-extensoes-para-o-firefox-i/
• FUEL
• http://developer.mozilla.org/en/docs/FUEL
• Microformats API
• http://www.ibm.com/developerworks/library/x-tipffoxmicroapi/
• http://developer.mozilla.org/en/docs/Using_microformats
Obrigado!
Elomar Françaelomar.f@gmail.com
top related