Desenvolvendo Chrome Extensões em

Desenvolvendo Extensões
para o Google Chrome
Sérgio Vilar
Desenvolvedor de Interfaces, Redesoft

terça-feira, 29 de janeiro de 13

Introdução a extensões


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


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)


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


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


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


Background Tasks
• A extensão roda em background e não fica visível para o usuário, uma
Background Page é automaticamente criada.


Construindo uma extensão


Componentes de uma extensão
• manifest.json
• background.htm
• Content Scripts (todo o seu Javascript)
• Assets (CSS, Imagens, etc)


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


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"
}
}


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


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


APIs


APIs
• chrome.extension.*
• chrome.tabs.*
• chrome.bookmarks*
• chrome.windows*
• etc...


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"})

});


Message Passing
• Permite a comunicação entre Content Scripts, Background Page, etc

Background Page Content Scripts


Estudo de caso
Grooveshark Keyboard Shortcuts


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


Arquivos que compõem a extensão
• manifest.json
• jquery.js
• inject.js
• background.js
• play.js, next.js e prev.js


Workflow da extensão

inject.js

background.js

prev.js play.js next.js


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


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


next.js, play.js e prev.js
• Ao ser inserido numa aba, aciona o botão correspondente para pausar,
avançar ou retroceder


É isso aí, até a próxima!
vilar@me.com
http://about.me/vilar
http://slideshare.net/sergiovilar
http://github.com/sergiovilar


Desenvolvendo Chrome Extensões em

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (20)

Semelhante a Desenvolvendo Chrome Extensões em

Semelhante a Desenvolvendo Chrome Extensões em (20)

Desenvolvendo Chrome Extensões em