O documento apresenta uma introdução sobre como desenvolver extensões para o Google Chrome. Ele explica o que são extensões, o que elas podem fazer, como interagir com o usuário através de browser actions, page actions e background tasks. Também mostra como construir uma extensão, quais são os principais componentes como o manifest.json e content scripts, e como utilizar as APIs do Chrome. Por fim, apresenta um caso de estudo de uma extensão que permite controlar músicas no Grooveshark através de atalhos de teclado.
3. O que são extensões
• Programas que incrementam funcionalidades ao Google Chrome
• São escritas em HTML, CSS e Javascript
• Se integram ao navegador fazendo uso da API de extensões
• Rodam em processos separados
terça-feira, 29 de janeiro de 13
4. O que uma extensão pode fazer?
• Consultar dados de serviços externos via XMLHttpRequest (permissão
necessária no manifest.json)
• Modificar uma página, adicionar ou remover elementos
• Detectar eventos causados pelo usuário (click, hover, load, etc)
terça-feira, 29 de janeiro de 13
5. Interação com o usuário
• Browser Action
A extensão é acessível o tempo inteiro
• Page Action
A extensão é acessível apenas sob determinadas condições
• Background Tasks
A extensão roda em plano de fundo e não fica visível para o usuário
terça-feira, 29 de janeiro de 13
6. Browser Action
• A extensão fica visível na forma
de um botão na barra de
extensões e pode ser
visualizada/acessada a qualquer
momento.
• Pode-se adicionar uma popup
que abre quando o botão da
extensão for acionado
terça-feira, 29 de janeiro de 13
7. Page Action
• A extensão fica visível na forma
de um ícone na barra de
endereços
• O Ícone da extensão só é visível
se atender algumas condições
• No exemplo ao lado, o ícone só
é visível quando página possui
um endereço para um Feed
terça-feira, 29 de janeiro de 13
8. Background Tasks
• A extensão roda em background e não fica visível para o usuário, uma
Background Page é automaticamente criada.
terça-feira, 29 de janeiro de 13
10. Componentes de uma extensão
• manifest.json
• background.htm
• Content Scripts (todo o seu Javascript)
• Assets (CSS, Imagens, etc)
terça-feira, 29 de janeiro de 13
11. manifest.json
• Arquivo de configuração da extensão
• Definição de nome da extensão, descrição, ícones, etc.
• Especifica a Background Page, Content Scripts, Actions, etc.
• Permissões para XMLHttpRequest
• Este arquivo é obrigatório e caso tenha algum erro de sintaxe, a
extensão não será carregada
terça-feira, 29 de janeiro de 13
12. manifest.json
Exemplo:
{
"name": "Grooveshark Keyboard Shortcuts",
"description": "Use the F7, F8 and F9 keys to play, pause, advance
and return your songs on Grooveshark",
"version": "1.1",
"background": {
"scripts": ["jquery.js", "background.js"]
},
"permissions": [
"tabs", "http://*/*", "https://*/*"
],
"manifest_version": 2,
"icons" : {
"48" : "icon-48.png",
"128" : "icon-128.png"
}
}
terça-feira, 29 de janeiro de 13
13. background.htm
• Uma extensão pode ter apenas uma Background Page
• A Background Page estará rodando enquanto o Google Chrome estiver
aberto
• Uma extensão que possua Content Scripts, terá automaticamente uma
Background Page
terça-feira, 29 de janeiro de 13
14. Content Scripts
• Arquivos Javascript onde se concentra toda a lógica da sua extensão
• Você pode incluir jQuery nos Content Scripts (OH YEAH!!)
• Podem acessar o objeto DOM da página
• São usados para acessar a API de Extensões do Google Chrome
terça-feira, 29 de janeiro de 13
16. APIs
• chrome.extension.*
• chrome.tabs.*
• chrome.bookmarks*
• chrome.windows*
• etc...
terça-feira, 29 de janeiro de 13
17. APIs Assíncronas
• 80% das APIs de extensão do Google Chrome são Assíncronas, isso
quer dizer que você quase sempre deve usar uma função de retorno:
chrome.tabs.query({windowType : 'normal'}, function(tabs){
! $(tabs).each(function(i, item){
! ! if(strpos(item.title, "Grooveshark")){
! ! ! tab = item;! ! ! !
! ! }
! });
! chrome.tabs.executeScript(tab.id, {file: "jquery.js"})
! chrome.tabs.executeScript(tab.id, {file: "play.js"})
});
terça-feira, 29 de janeiro de 13
18. Message Passing
• Permite a comunicação entre Content Scripts, Background Page, etc
Background Page Content Scripts
terça-feira, 29 de janeiro de 13
19. Estudo de caso
Grooveshark Keyboard Shortcuts
terça-feira, 29 de janeiro de 13
20. Grooveshark Keyboard Shortcuts
• Extensão que dá ao usuário a
possibilidade de pausar, avançar e
retroceder as músicas do
Grooveshark através das teclas F7,
F8 e F9
terça-feira, 29 de janeiro de 13
21. Arquivos que compõem a extensão
• manifest.json
• jquery.js
• inject.js
• background.js
• play.js, next.js e prev.js
terça-feira, 29 de janeiro de 13
22. Workflow da extensão
inject.js
background.js
prev.js play.js next.js
terça-feira, 29 de janeiro de 13
23. Workflow da extensão: inject.js
• Possui uma instância carregada em cada página do navegador
• Quando detecta uma das teclas de atalho, envia uma mensagem para o
background.js
terça-feira, 29 de janeiro de 13
24. Workflow da extensão
inject.js
background.js
prev.js play.js next.js
terça-feira, 29 de janeiro de 13
25. Workflow da extensão: background.js
• Recebe a mensagem do inject.js e identifica a aba na qual o Grooveshark
está aberto
• Insere o arquivo correspodente (next.js, play.js ou prev.js) na aba na qual o
Grooveshark está aberto
terça-feira, 29 de janeiro de 13
26. Workflow da extensão
inject.js
background.js
prev.js play.js next.js
terça-feira, 29 de janeiro de 13
27. next.js, play.js e prev.js
• Ao ser inserido numa aba, aciona o botão correspondente para pausar,
avançar ou retroceder
terça-feira, 29 de janeiro de 13
28. É isso aí, até a próxima!
vilar@me.com
http://about.me/vilar
http://slideshare.net/sergiovilar
http://github.com/sergiovilar
terça-feira, 29 de janeiro de 13