Chrome Web Store Assets Generator: Pare de perder tempo criando ícones e banners manualmente

Interface do Chrome Web Store Assets Generator: design focado em simplicidade para transformar logos em ativos prontos para a loja em segundos

Se você já desenvolveu ou está desenvolvendo uma extensão para o Google Chrome, sabe que a parte final — o envio para a Chrome Web Store — pode ser surpreendentemente trabalhosa (ou chata). Não pelo código em si, mas pelas exigências visuais da loja.

Para publicar sua extensão, o Google exige uma série de ativos em tamanhos específicos:

  • Ícones: 16x16, 32x32, 48x48 e 128x128 pixels.
  • Tiles Promocionais: Small (440x280), Large (920x680) e Marquee (1400x560).

Geralmente, isso significa abrir o Photoshop, Figma ou Gimp e exportar manualmente cada um desses arquivos, garantindo que o padding esteja correto e que as cores combinem. Se você mudar o logo, precisa refazer tudo. Se estou criando extensões para o Chrome em série, isso pode se tornar um problema.

Para resolver essa “dor de cabeça” (que eu mesmo sentia), criei o Chrome Web Store Assets Generator:

Chrome Web Store Assets Generator - Free Icon & Promotional Tile Tool

Free, browser-based tool to generate all Chrome Web Store required icons (16×16, 32×32, 48×48, 128×128) and promotional…

paladini.github.io

O Chrome Web Store Assets Generator é uma ferramenta open-source, gratuita e baseada em navegador que transforma o logo da sua extensão em todos os ativos necessários para a loja com apenas um clique.


Você faz o upload do seu logo uma vez e a ferramenta gera instantaneamente todos os tamanhos de ícones e banners promocionais, prontos para download em um arquivo ZIP organizado.

Como desenvolvedor, eu me importo com privacidade. Por isso, a ferramenta foi construída usando a HTML5 Canvas API e processa 100% das imagens no lado do cliente. Nada sai do seu navegador. Nenhum servidor recebe suas imagens, nenhum cadastro é necessário e não há chaves de API envolvidas.

  1. Geração em Um Clique: Suba o logo e veja a mágica acontecer.
  2. Banners Customizáveis: Defina o nome da extensão, um subtítulo e escolha entre diversas paletas de cores em gradiente que seguem as diretrizes visuais do Google.
  3. Padding Ajustável: Controle o espaçamento do ícone dentro dos banners com preview em tempo real.
  4. Preview da Loja: Uma aba dedicada para você ver exatamente como sua listagem aparecerá na Chrome Web Store antes mesmo de subir os arquivos.
  5. Snippet do Manifest v3: A ferramenta gera o bloco de código do manifest.json pronto para você copiar e colar no seu projeto.
  6. Download em ZIP: Baixe tudo de uma vez, organizado em pastas icons/ e banners/.

Para quem gosta de detalhes técnicos, o projeto foi uma oportunidade incrível de testar as versões mais recentes das ferramentas que amo:

  • React 19 e Vite 6 para uma experiência de desenvolvimento ultra-rápida.
  • TypeScript para garantir a robustez do código.
  • Tailwind CSS v4 para um design moderno e responsivo.
  • Lucide React para ícones e JSZip para a geração do pacote de download.

O projeto é totalmente aberto e você pode contribuir no GitHub. Além da versão web, eu disponibilizei uma imagem Docker para quem prefere rodar a ferramenta localmente ou em sua própria infraestrutura:

docker run -d -p 3000:80 --name assets-generator paladini/chrome-web-store-assets-generator:latest

Se você é desenvolvedor de extensões, te convido a testar a ferramenta e me dar um feedback:

Se o projeto te economizou alguns minutos (ou horas) de trabalho, considere deixar uma ⭐ no repositório. Isso ajuda muito a divulgar o trabalho para outros desenvolvedores!

Espero que seja útil para vocês tanto quanto está sendo para mim.
Até a próxima!

0 comentários:

Assinar: Postar comentários (Atom)