Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Construindo extensões para o Google Chrome com ...

Construindo extensões para o Google Chrome com a MEAN Stack

Apresentação feita na Node Conf Brazil 2016 em 05/07/2016

http://brazil.nodeconf.com/

Códigos disponíveis em: https://github.com/DiegoPinho/nodeconfbrazil2016

Avatar for Diego Martins de Pinho

Diego Martins de Pinho

July 05, 2016
Tweet

More Decks by Diego Martins de Pinho

Other Decks in Technology

Transcript

  1. Agenda 1. Quem é esse cara palestrando? 2. Conhecimento necessário

    3. Conhecendo o ecossistema do Google Chrome 4. E o que tem de MEAN nisso? 5. O que vamos construir hoje 6. O básico das extensões 7. Extensão: Hello World 8. Extensão: Clima Tempo 9. Extensão: Clima Tempo React Ver. 10. Como publicar sua extensão 11. Próximos passos 12. Outros links bacanas 13. Agradecimentos
  2. Diego Martins de Pinho - 23 Anos Site pessoal: http://diegopinho.com.br

    • Bacharel em Ciência da Computação pela PUC-SP • Especialista em Gestão da TI pela FIAP • Programador desde 2013 • Ex-blogueiro: http://fuckyeaworld.com.br • Escreve artigos e ensina o que sabe no tempo livre • Entusiasta em programação para jogos e animação Quem é esse cara palestrando? @DiegoPinho
  3. • Empresa no ramo da área da saúde. ◦ Desenvolve

    soluções web para: Hospitais, clínicas e laboratórios de todo país • Cargo: Scrum Master (Desenvolvedor) ◦ Responsável pelo projeto de portal de laudos da empresa Quem é esse cara palestrando? - Trabalho Tecnologias do dia a dia... http://dev.touchhealth.com.br/
  4. Conhecimento necessário Já utilizamos HTML, CSS e Javascript para escrever

    nossas aplicações WEB… não seria ótimo se fosse somente isso o necessário para construir extensões? Spoiler alert. É somente necessário isso.
  5. E o que de MEAN nisso? Utilizamos frameworks e bibliotecas

    open source incríveis disponíveis na internet para desenvolver nossas aplicações WEB… não seria ótimo se pudéssemos utilizá-las também para construir nossas extensões? Spoiler alert. É possível.
  6. O que vamos construir hoje Hello World Clima Tempo Hello

    World Objetivo: Estrutura básica de uma extensão do Google Chrome Objetivo: API’s básicas do Google Chrome Clima Tempo - React V. Objetivo: Como utilizar tecnologias web para construir uma extensão Ligeiramente Nublado 19ºC Ligeiramente Nublado 19ºC
  7. O básico das extensões { manifest.json ícones (png) popup.html options.html

    Mais informações: https://developer.chrome.com/extensions/getstarted Normalmente uma extensão vai ter essa cara...
  8. Content Security Policy (CSP) Então você acha bonito javascript inline?

    hmm... • Content Security Policy é um mecanismo de proteção contra código javacript malicioso (aquele 1% javascript safadão). • Política do Google Chrome por default: ◦ eval() e funções relacionadas são desabilitadas ◦ somente scripts e objetos locais são carregados ◦ javascript inline não funciona • Apesar das restrições, nas versões mais recentes, é possível deixar elas “mais flexíveis” Mais informações: https://goo.gl/fDxmZN
  9. manifest.json manifest.json Mais informações: https://developer.chrome.com/extensions/manifest Possivelmente o arquivo mais importante

    da extensão. Possui informações como: nome, descrição, versão, ícones, permissões, opções, autor… É o arquivo utilizado pelo Chrome e a Chrome Web Store para interpretar a extensão.
  10. manifest.json - browser_action Mais informações: https://developer.chrome.com/extensions/browserAction O browser_action define um

    ícone que fica posicionado ao lado da barra de endereços do Chrome. Além disse, define o título, badge e a página popup. ícone e popup ícone e título ícone e badge * todos os elementos da browser_action podem ser alterados através do uso das API’s do chrome.browserAction
  11. icones.png icones.png Mais informações: https://developer.chrome.com/extensions/manifest Os ícones formam a identidade

    visual da extensão. Vários tamanhos são utilizados para diversas aplicações dentro do Chrome e da Chrome Web Store.
  12. options.html Mais informações: https://developer.chrome.com/extensions/options options.html A página de opções permite

    que o usuário customize o comportamento e aparência da extensão. Uma vez fornecido, o Google Chrome cria um link para a página de opções automaticamente. * utilizamos a API storage.sync para gravar os dados e disponibilizá-los para todos os scripts e dispositivos.
  13. O que vamos construir - Hello World ao clicar Descrição:

    Extensão que apresenta uma mensagem de “Hello World” quando se clica no ícone da extensão. Objetivo: Funcionamento básico de uma extensão do Google Chrome. Resources (ícone): https://goo.gl/4eCvM3
  14. Passo a Passo - Hello World 1. Criar um diretório

    vazio 2. Criar os arquivos: manifest.json e index.html 3. Acertar as configurações no manifest.json 4. Criar um HTML com um <h1>Hello World</h1> 5. Carregar extensão no Chrome no modo Desenvolvedor 6. Torcer para dar certo :)
  15. O que vamos construir - Clima Tempo Descrição: Extensão que

    verifica o clima na região a partir da localização do usuário. Objetivo: Funcionamento de algumas API’s do Google Chrome. Resources (esqueleto): https://goo.gl/4eCvM3 http://vamostorcerparafuncionar.com.br http://vamostorcerparafuncionar.com.br Ligeiramente Nublado 19ºC ao clicar
  16. O que precisamos fazer... - Clima Tempo 1. Precisamos checar

    de tempos em tempos a temperatura 2. Se a temperatura mudar, precisamos alterar o ícone na browser_action 3. Ao clicar no ícone, precisamos exibir a temperatura em Grau Celsius junto a sua descrição (ex: nublado) Importante lembrar: Os itens 1, 2 e 3 precisam trabalhar simultaneamente, ou seja, os itens 1 e 2 precisam ocorrer mesmo que não cliquemos no ícone.
  17. Passo a Passo - Clima Tempo 1. Baixar o template

    no github 2. Criar o arquivo chamado background.js que irá: a. criar um alarme que monitora a temperatura a cada 10 minutos (usando as API’s do Google Chrome) b. usar a localização do usuário para fazer uma chamada para a API do Forecast c. alterar o ícone da browser_action de acordo com o resultado da API 3. Criar o arquivo popup.js que será responsável por: a. Ao abrir o popup.html, ele será invocado e enviará uma mensagem (usando as API’s do Google Chrome) para buscar a temperatura b. Irá exibir o resultado no popup (trocando os elementos por js) 4. Torcer ainda mais pra dar certo Mais Informações: • https://developer.chrome. com/extensions/alarms • https://developer.chrome. com/extensions/runtime • https://developer.forecast.io/
  18. Agora vamos para a parte mais divertida... também relativamente mais

    difícil D: caso dê pau na hora de mostrar
  19. Vamos falar um pouco sobre React.js • Biblioteca javascript criada

    pelo Facebook para construir interfaces • Diferentemente Backbone, Angular e Amber, se preocupa somente com a view ◦ Ou seja, não fornece nenhuma camada de service, controller, model, collection, routes e etc. • O React trabalha apenas com o conceito de componente que recebe propriedades, computa o estado e retorna uma representação virtual do DOM. Mais Informações: https://facebook.github.io/react/
  20. O que vamos construir - Clima Tempo React Version Descrição:

    Extensão que verifica o clima na região a partir da localização do usuário. Objetivo: Adaptação da extensão anterior para utilizar tecnologias web atuais. Resources (esqueleto): https://goo.gl/4eCvM3 http://vamostorcerparafuncionar.com.br Ligeiramente Nublado 19ºC { Dois componentes: • Popup • Clima
  21. O que vamos utilizar - Clima Tempo React Version •

    minifyify: https://github.com/ben-ng/minifyify • parallelshell: https://github.com/keithamus/parallelshell • watchify: https://github.com/substack/watchify • nodemon: http://nodemon.io/ • React: https://facebook.github.io/react/ • Babel: https://babeljs.io/ • Browserify: http://browserify.org/ • ECMA6: http://es6-features.org/
  22. Como Funciona - Clima Tempo React Version clima_tempo_chrome… > tools

    * Os arquivos são monitorados e a cada alteração, gera um novo bundle.js (alteração nos componentes) e style.css (alteração de arquivos de css)
  23. Passo a Passo - Clima Tempo React Version 1. Copiar

    o background.js para a pasta client > public > js 2. Criar dois componentes: Popup.jsx e Clima.jsx 3. Passar a lógica para a Popup.jsx de modo que ele atualize o Clima.jsx de acordo com a resposta da API do Forecast 4. Fazer uma reza das boas para não dar pau na demonstração :) Reza das boas
  24. Usando a MEAN Stack - Clima Tempo React Version MEAN

    how to be Para exemplicar como usar a MEAN Stack, vamos alterar a nossa extensão: 1. Criar uma cópia do método que faz chamada a API do Forcast 2. Criar no servidor um método que responde com a API do Forcast (usando os mesmos argumentos) 3. Utilizar o método criado! Excellent.
  25. Como publicar a sua extensão 1. Acessar o painel de

    controle do desenvolvedor https://chrome.google. com/webstore/developer/dashboard?hl=pt-BR 2. Pagar a taxa de U$ 5,00 para poder publicar na Chrome Web Store 3. Feito o registro e pagamento, voltar ao painel e adicionar novo item 4. O upload é sempre de arquivos zipados, para isso, usar a compressão presente no projeto (npm run compress) 5. Preencher os campos (atenção ao campo: “Opções de Visibilidade”) 6. Salvar e aguardar o tempo de publicação!
  26. Próximos Passos • Testes ◦ Mocha (js): https://github.com/mochajs/mocha ◦ Jest

    (para components react): https://facebook.github.io/jest/ ◦ Travis (integração contínua): https://travis-ci.org/ ▪ AppVeyor https://www.appveyor.com/ • Desenvolvimento paralelo ◦ Adaptando este template, podemos desenvolver a extensão e o servidor no mesmo projeto! • React <3 Redux
  27. Outros Links Bacanas • 8 Chrome Extension Examples ◦ https://react.rocks/tag/Chrome_Extension

    • react-chrome-extension-boilerplate ◦ https://github.com/jhen0409/react-chrome-extension-boilerplate • Chrome Extension generator (Yeoman) ◦ https://github.com/yeoman/generator-chrome-extension • Creating Chrome Extensions with React ◦ http://michelletilley.net/2014/02/24/creating-chrome-extensions-with-react.html Em breve: Construindo extensões para o Google Chrome