1 of 11

Chrome

Extensions

Introdução

2 of 11

Por que extensões do Chrome?

  • Automatizar tarefas
  • Potencializar ou criar ferramentas sem precisar subir nada
  • Pode te acompanhar durante toda sua experiência de uso
  • Tarefas corriqueiras como checar status ou puxar dados de APIs podem ficar “a um Ctrl+T de distância”

3 of 11

Overview

  • Um único manifest.json
  • 100% baseado em HTML, CSS e JS (total suporte a ES6+!)
  • 5 possíveis elementos:
    • Background
    • Popup
    • Content scripts (inject)
    • Options
    • Override
  • Os scripts podem:
    • Se comunicar entre si (messaging)
    • Guardar dados (storage)
    • E muito mais!

4 of 11

Elementos customizáveis

Background (JS)

​

Popup (HTML, CSS, JS)

​

Content scripts ou Inject (CSS, JS)

​

Options (HTML, CSS, JS)

​

Override (HTML, CSS, JS)

5 of 11

Possibilidades

  • Sobrescrever a “new tab” do navegador com uma SPA completa
  • Criar novas opções no menu do clique direito do mouse (ex: “pesquisar este termo no Google...”)
  • Deixar um ícone interativo na barra do navegador (ex: ColorPicker)
  • Manipular páginas dependendo do contexto (ex: JSON Viewer)
  • Manipular qualquer API do Google Chrome!

Exemplos:

6 of 11

Exemplos

7 of 11

Github XP

8 of 11

JSON Viewer

9 of 11

Google Translate

10 of 11

Bonus Links

Documentação oficial: https://developer.chrome.com/extensions

​

Documentação das APIs do Chrome: https://developer.chrome.com/extensions/api_index

​

Overview das funcionalidades: https://developer.chrome.com/extensions/overview

​

Tutorial básico (getting started): https://developer.chrome.com/extensions/getstarted

​

Como debugar extensões?: https://developer.chrome.com/apps/tut_debugging

​

Como conectar os scripts entre si?: https://developer.chrome.com/extensions/messaging

​

Gerador de boilerplate para extensões: https://extensionizr.com (existem outras opções!)

​

Transformando uma extensão Chrome em uma extensão compatível também com Firefox: https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension

​

Repositório do hands-on: https://github.com/Rikezenho/handson-chrome-extension

11 of 11

Vamos criar nossa primeira extensão?