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

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

9ce1dc6b940b4ab85ecb2f1eacfbe7c1?s=128

Diego Martins de Pinho

July 05, 2016
Tweet

Transcript

  1. 3.

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

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

    • 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. 6.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Agora vamos para a parte mais divertida... também relativamente mais

    difícil D: caso dê pau na hora de mostrar
  19. 25.

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

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

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

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

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

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

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

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

    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