A criação de uma extensão do Chrome pode ser esmagadora. É diferente de criar um aplicativo Web, pois você não deseja colocar muita sobrecarga (JS) no navegador, pois sua extensão será executada juntamente com o site que você está visitando. Você também geralmente não obtém o benefício de empacotamento e depuração disponíveis nos pacotes e estruturas atuais.

Quando decidi criar uma extensão do Chrome, descobri que o número de posts e artigos sobre a criação de um é bastante pequeno. E as informações ficam ainda mais limitadas quando você deseja usar uma das tecnologias mais recentes, como o TailwindCSS.

Neste tutorial, descobriremos como criar uma extensão do Chrome usando o Parcel.js para empacotar e assistir e TailwindCSS para estilizar. Também falaremos sobre como separar seu estilo do site para evitar a colisão de CSS – mas mais sobre isso mais tarde.

Existem alguns tipos de extensões do Chrome que vale a pena mencionar:

  • Scripts de conteúdo: O primeiro tipo de extensões do Chrome é o mais comum. É executado no contexto de uma página da web e pode ser usado para modificar seu conteúdo. É isso que usaremos neste post.
  • Aparecer: As extensões baseadas em pop-up usam o ícone de extensão à direita da barra de endereço para abrir um pop-up que pode conter qualquer conteúdo HTML que você desejar.
  • UI de opções: Você adivinhou! Interface do usuário para personalizar opções em uma extensão. É acessível clicando com o botão direito do mouse no ícone da extensão e selecionando “opções” ou navegando até a página da extensão na lista de extensões do Chrome chrome://extensions
  • Extensão do DevTools: “Uma extensão do DevTools adiciona funcionalidade ao Chrome DevTools. Ele pode adicionar novos painéis e barras laterais da interface do usuário, interagir com a página inspecionada, obter informações sobre solicitações de rede e muito mais”. –Documentação do Google Chrome

Neste tutorial, criaremos uma extensão do Chrome usando apenas scripts de conteúdo, exibindo conteúdo na página da web e interagindo com o DOM.

Como agrupar sua extensão do Chrome usando o Parcel.js V2

O Parcel.js é um empacotador de aplicativo da Web de configuração zero. Pode usar qualquer tipo de arquivo como ponto de entrada. É simples de usar e funcionará para qualquer tipo de aplicativo, incluindo as extensões do Chrome.

Primeiro, crie uma nova pasta chamada demo-extension (Assegure-se de ter yarn ou npm instalado, eu vou usar yarn para esta postagem):

$ mkdir demo-extension && cd demo-extension && yarn init -y

Em seguida, instalaremos o Parcel como uma dependência local:

$ yarn add -D parcel@next

Agora crie um novo diretório chamado src:

$ mkdir src

Adicionando um arquivo de manifesto

Toda extensão de navegador precisa de um arquivo de manifesto. É aqui que definimos a versão e os metadados sobre nossa extensão, mas também os scripts que são usados ​​(conteúdo, plano de fundo, pop-up … etc) e permissões, se houver.

Você pode encontrar o esquema completo na documentação do Chrome: https://developer.chrome.com/extensions/manifest

Vamos em frente e adicione um novo arquivo em src chamado manifest.json com este conteúdo:

Agora, antes de entrarmos em mais detalhes sobre como as extensões do Chrome funcionam e o tipo de coisa que você pode fazer com elas, vamos configurar TailwindCSS

Como usar o TailwindCSS com sua extensão do Chrome

TailwindCSS é uma estrutura CSS que usa classes de utilitário de nível inferior para criar componentes visuais reutilizáveis, mas também personalizáveis ​​da interface do usuário.

O vento de cauda pode ser instalado de duas maneiras, mas a maneira mais comum de usá-lo é através do pacote NPM:

$ yarn add tailwindcss

Além disso, vá em frente e adicione autoprefixer e postcss-import:

$ yarn add -D autoprefixer postcss-import

Você precisa deles para adicionar prefixos de fornecedores aos seus estilos e poder escrever sintaxe como @import "tailwindcss/base" importar arquivos Tailwind diretamente de node_modules, respectivamente.

Agora que o instalamos, vamos criar um novo arquivo dentro do diretório raiz e chamá-lo postcss.config.js. Este é o arquivo de configuração do PostCSS e, por enquanto, conterá estas linhas:

A ordem dos plugins é importante aqui!

É isso aí! É tudo o que você precisa para começar a usar o TailwindCSS na sua extensão do Chrome.

Crie um arquivo chamado style.css dentro do seu src e inclua os arquivos Tailwind:

Remova CSS não utilizado usando PurgeCSS

Vamos também garantir que apenas importemos os estilos que usamos, ativando o recurso de purga do Tailwind.

Crie um novo arquivo de configuração Tailwind executando:

$ npx tailwindcss init: isso criará um novo tailwind.config.js Arquivo.

Para remover CSS não utilizado, adicionaremos nossos arquivos de origem ao campo de limpeza como este:

Agora, nosso CSS será eliminado e os estilos não utilizados serão removidos quando você criar para produção.

Como ativar o recarregamento a quente na sua extensão do Chrome

Mais uma coisa antes de adicionar algum conteúdo à nossa extensão: vamos ativar o recarregamento a quente.

O Chrome não recarrega os arquivos de origem quando você faz novas alterações. É necessário clicar no botão “Atualizar” na página de extensões. Felizmente, existe um pacote NPM que recarrega a quente para nós.

$ yarn add crx-hotreload

Para usá-lo, criaremos um novo arquivo chamado background.js dentro do nosso src pasta e importação crx-hotreload

Finalmente, aponte para background.js no manifest.json para que possa ser veiculado com nossa extensão (o recarregamento a quente está desativado na produção por padrão):

Chega de configuração. Vamos criar um pequeno formulário de script em nossa extensão.

Tipos de scripts em uma extensão do Chrome

Conforme mencionado no início desta postagem, nas extensões do Chrome, existem alguns tipos de scripts que você pode usar.

Scripts de conteúdo são scripts executados no contexto da página da web visitada. Você pode executar qualquer código JavaScript disponível em qualquer página da Web comum (incluindo o acesso / manipulação do DOM).

Um script em segundo plano, por outro lado, é onde você pode reagir aos eventos do navegador e ter acesso às APIs de extensão do Chrome.

Adicionando um script de conteúdo

Crie um novo arquivo chamado content-script.js debaixo de src pasta.

Vamos adicionar este formulário HTML ao nosso arquivo recém-criado:

O estilo de uma extensão do navegador não é tão simples quanto você imagina, porque você precisa garantir que os estilos do site não sejam afetados por seus próprios estilos.

Para separá-los, vamos usar algo chamado DOM da sombra. O Shadow DOM é uma poderosa técnica de encapsulamento para estilos. Isso significa que o estilo tem escopo definido na árvore Sombra. Portanto, nada vazou para a página da web visitada. Os estilos externos também não substituem o conteúdo do Shadow DOM, embora as variáveis ​​CSS ainda possam estar acessíveis.

UMA host sombra é qualquer elemento DOM ao qual gostaríamos de anexar nossa árvore Shadow. UMA Raiz das Sombras é o que é retornado de attachShadow e seu conteúdo é o que é renderizado.

Cuidado, a única maneira de estilizar o conteúdo de uma árvore Shadow é inlining styles. O Parcel V2 possui um novo recurso interno, no qual é possível importar o conteúdo de um pacote e usá-lo como texto compilado nos arquivos JavaScript. O pacote será substituído no momento da embalagem.

Fizemos exatamente isso com a nossa style.css agrupar. Agora, podemos incorporar o CSS automaticamente no DOM da sombra no momento da criação.

Agora precisamos informar o navegador sobre esse novo arquivo, vamos incluí-lo adicionando estas linhas ao nosso manifesto:

Para servir nossa extensão, adicionaremos alguns scripts ao nosso package.json:

Finalmente você pode executar yarn watch, vamos para chrome://extensionse certifique-se Modo de desenvolvedor está ativado no canto superior direito da página. Clique em “Load Unpacked” e selecione o dist pasta em demo-extension.

  • Se você receber este erro: Error: Bundles must have unique filePaths você pode simplesmente consertá-lo removendo o main campo no seu package.json

Como publicar sua extensão na Google Chrome Web Store

Antes de aprofundar isso, vamos adicionar um novo script NPM que nos ajudará a compactar os arquivos de extensão conforme exigido pelo Chrome.

Se você não instalou zip no entanto, faça-o:

  • Mac OS: brew install zip
  • Linux: sudo apt install zip
  • Para Windows, você pode usar o comando powershell Compress-Archive similarmente: powershell Compress-Archive -Path .\dist\ -Destination .\chrome-extension.zip

Agora tudo o que você precisa fazer é ir para Painel do desenvolvedor da Chrome Web Store para configurar sua conta e publicar sua extensão 🎉

  • Você pode encontrar a demonstração completa deste tutorial hospedada na minha conta do github aqui

Conclusão

No final, as extensões do Chrome não são tão diferentes dos aplicativos da web. Hoje você aprendeu como desenvolver uma extensão usando as mais recentes tecnologias e práticas em desenvolvimento web.

Espero que este tutorial tenha ajudado a acelerar um pouco o desenvolvimento de extensões!

Se você achou isso útil, envie um tweet sobre ele e siga-me em @marouanerassili, obrigado!



Apaixonado por tecnologia e inovação, traz notícias do seguimento que atua com paixão há mais de 15 anos.