Desenvolvimento de Extensões para o Google Chrome

Desenvolvendo Extensõespara o Google ChromeSérgio VilarDesenvolvedor 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 ActionA extensão é acessível o tempo inteiro

• Page ActionA extensão é acessível apenas sob determinadas condições

• Background TasksA 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 casoGrooveshark 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

background.js

inject.js

play.jsprev.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



background.js

inject.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



background.js

inject.js



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ó[email protected]://about.me/vilarhttp://slideshare.net/sergiovilarhttp://github.com/sergiovilar


mailto:[email protected]

mailto:[email protected]

http://about.me/vilar

http://about.me/vilar

http://slideshare.net/sergiovilar

http://slideshare.net/sergiovilar

http://github.com/sergiovilar

http://github.com/sergiovilar

Desenvolvimento de Extensões para o Google Chrome

Documents

Transcript of Desenvolvimento de Extensões para o Google Chrome