Desenvolvimento de Extenses para o Google Chrome

  • Published on
    26-Jun-2015

  • View
    2.688

  • Download
    1

Transcript

  • 1. Desenvolvendo Extensespara o Google Chrome Srgio Vilar Desenvolvedor de Interfaces, Redesofttera-feira, 29 de janeiro de 13

2. Introduo a extensestera-feira, 29 de janeiro de 13 3. O que so extenses Programas que incrementam funcionalidades ao Google Chrome So escritas em HTML, CSS e Javascript Se integram ao navegador fazendo uso da API de extenses Rodam em processos separadostera-feira, 29 de janeiro de 13 4. O que uma extenso pode fazer? Consultar dados de servios externos via XMLHttpRequest (permisso necessria no manifest.json) Modificar uma pgina, adicionar ou remover elementos Detectar eventos causados pelo usurio (click, hover, load, etc)tera-feira, 29 de janeiro de 13 5. Interao com o usurio Browser Action A extenso acessvel o tempo inteiro Page Action A extenso acessvel apenas sob determinadas condies Background Tasks A extenso roda em plano de fundo e no fica visvel para o usuriotera-feira, 29 de janeiro de 13 6. Browser Action A extenso fica visvel na forma de um boto na barra de extenses e pode ser visualizada/acessada a qualquer momento. Pode-se adicionar uma popup que abre quando o boto da extenso for acionadotera-feira, 29 de janeiro de 13 7. Page Action A extenso fica visvel na forma de um cone na barra de endereos O cone da extenso s visvel se atender algumas condies No exemplo ao lado, o cone s visvel quando pgina possui um endereo para um Feedtera-feira, 29 de janeiro de 13 8. Background Tasks A extenso roda em background e no fica visvel para o usurio, uma Background Page automaticamente criada.tera-feira, 29 de janeiro de 13 9. Construindo uma extensotera-feira, 29 de janeiro de 13 10. Componentes de uma extenso manifest.json background.htm Content Scripts (todo o seu Javascript) Assets (CSS, Imagens, etc)tera-feira, 29 de janeiro de 13 11. manifest.json Arquivo de configurao da extenso Definio de nome da extenso, descrio, cones, etc. Especifica a Background Page, Content Scripts, Actions, etc. Permisses para XMLHttpRequest Este arquivo obrigatrio e caso tenha algum erro de sintaxe, a extenso no ser carregadatera-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, advanceand 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"}}tera-feira, 29 de janeiro de 13 13. background.htm Uma extenso pode ter apenas uma Background Page A Background Page estar rodando enquanto o Google Chrome estiver aberto Uma extenso que possua Content Scripts, ter automaticamente uma Background Pagetera-feira, 29 de janeiro de 13 14. Content Scripts Arquivos Javascript onde se concentra toda a lgica da sua extenso Voc pode incluir jQuery nos Content Scripts (OH YEAH!!) Podem acessar o objeto DOM da pgina So usados para acessar a API de Extenses do Google Chrometera-feira, 29 de janeiro de 13 15. APIstera-feira, 29 de janeiro de 13 16. APIs chrome.extension.* chrome.tabs.* chrome.bookmarks* chrome.windows* etc...tera-feira, 29 de janeiro de 13 17. APIs Assncronas 80% das APIs de extenso do Google Chrome so Assncronas, isso quer dizer que voc quase sempre deve usar uma funo 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"})});tera-feira, 29 de janeiro de 13 18. Message Passing Permite a comunicao entre Content Scripts, Background Page, etcBackground PageContent Scriptstera-feira, 29 de janeiro de 13 19. Estudo de casoGrooveshark Keyboard Shortcutstera-feira, 29 de janeiro de 13 20. Grooveshark Keyboard Shortcuts Extenso que d ao usurio a possibilidade de pausar, avanar e retroceder as msicas do Grooveshark atravs das teclas F7, F8 e F9tera-feira, 29 de janeiro de 13 21. Arquivos que compem a extenso manifest.json jquery.js inject.js background.js play.js, next.js e prev.jstera-feira, 29 de janeiro de 13 22. Workflow da extensoinject.js background.js prev.jsplay.jsnext.jstera-feira, 29 de janeiro de 13 23. Workflow da extenso: inject.js Possui uma instncia carregada em cada pgina do navegador Quando detecta uma das teclas de atalho, envia uma mensagem para o background.jstera-feira, 29 de janeiro de 13 24. Workflow da extensoinject.js background.js prev.jsplay.jsnext.jstera-feira, 29 de janeiro de 13 25. Workflow da extenso: 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 abertotera-feira, 29 de janeiro de 13 26. Workflow da extensoinject.js background.js prev.jsplay.jsnext.jstera-feira, 29 de janeiro de 13 27. next.js, play.js e prev.js Ao ser inserido numa aba, aciona o boto correspondente para pausar, avanar ou retrocedertera-feira, 29 de janeiro de 13 28. isso a, at a prxima! vilar@me.com http://about.me/vilar http://slideshare.net/sergiovilar http://github.com/sergiovilartera-feira, 29 de janeiro de 13

Recommended

View more >