Criando extensões para o Google Chrome com React e Typescript

Recentemente navegando pela internet me deparei com o assunto de criar extensões para google chrome, surgiu um interesse então resolvi estudar um pouco sobre.

E qual a melhor forma de estudar nesse ramo tech? Botando a mão na massa.

Comecei lendo alguns artigos, posts no stackoverflow e por ai vai. Mas me deparei com inúmeros meios de fazer a mesma coisa, e muitos deles, mega complicados.

Mas precisa mesmo ser tão complexo?

Porque não utilizar de ferramentas que facilitam essa trabalho? Foi ai que me deparei com um post explicando o uso dessa solução com React + Typescript + Webpack.

Bom, parece simples, mas nem tanto rsrsrs. Por isso resolvi criar esse breve conteúdo como forma de aprendizado e também pra disponibilizar algumas coisas que não encontrei por ai mas sim botando a mão na massa pra fazer.

Deixei esse conteúdo também disponível no Github caso queiram usar como boilerplate ou até mesmo evoluir este pra comunidade.

https://github.com/lucaxsilveira/react-typescript-chrome-extension

Tecnologias principais utilizadas nesse projeto:

• React

• Typescript

• Webpack

• Tailwindcss

• Eslint + prettier + editorconfig

Bora lá, uma extensão é basicamente construída dentro de um popup, o qual é definido no arquivo de manifest definido pelo google (manifest v3).

manifest v3

Alguns pontos importantes nesse arquivo:

• actions - basicamente qual será o html responsável pela exibição do popup ao abrir a extensão

• permissions - permissões que sua extensão pode ter

• background - arquivo relacionado a comandos que serão enviados para o background da sua extensão

• content_scripts - múltiplos arquivos que poderão ser adicionar e que rodam dentro da janela em questão

Para um melhor definição de todas as possíveis chaves e valores, você pode encontrar aqui https://developer.chrome.com/docs/extensions/reference/manifest?hl=pt-br

Falando um pouco mais sobre content_scripts, esses arquivos serão adicionados a página em questão que o usuário está navegando e não dentro do popup.html que é aberto no click da extensão. Por exemplo, podemos ter o seguinte comportamento:

O usuário clica em um botão, nesse caso Open content page, e ai por diante você poderá a partir de uma condição / ou não renderizar algo dentro da página.

chrome browser content script

Isso abre um leque enorme de possibilidades de interações para a página.

Mas beleza, como fazemos isso via código? Simples, renderizando mais uma aplicação React dentro do próprio contentScript.js

renderizando o contentScript

Este arquivo é injetado automaticamente pelo browser, então muito cuidado com o que você faz dentro dele, geralmente adicionar alguma regra de visualização é necessária.

regra de visualização do content_scripts

Como vemos nesse código acima, ele só será exibido caso receba uma mensagem, aqui que vem a mágica.

Podemos disparar isso diretamente do popup.html

disparando evento para o content_script

O click no botão então dispara uma mensagem, essa mensagem pro sua vez é "ouvida" pelo content_scripts, fazendo assim exibir a div na página pro usuário.

Com esses listerners, pode ser feito uma infinidade de regras de negócio, trouxe um caso mais simples para mostrar que é possível termos a visualização diretamente na página de maneira simples e com as melhores tecnologias do mercado.

Exemplo de disparo

chrome.tabs.sendMessage(tab.id, {
  value: "openPopup",
});

Exemplo de escuta

chrome.runtime.onMessage.addListener((message) => {
  if (message.value === "openPopup") {
      
  }
});

Bom, é isso, até breve!