paladini/chrome-web-store-assets-generator repository overview

⁠✨ What is this?

Chrome Web Store Assets Generator is a free, open-source, browser-based tool that takes your extension's logo and automatically generates every icon size and promotional tile required by the Chrome Web Store — all in one click, with no server, no upload, no sign-up.

Built with React, TypeScript, Vite, and the HTML5 Canvas API. All processing happens 100% client-side.

⁠🚀 Features

• One-click generation — upload your logo once, get all assets instantly
• All official sizes — icons (16×16, 32×32, 48×48, 128×128) and promotional tiles (Small, Large, Marquee)
• Customizable banners — set your extension name, subtitle, and pick from gradient palettes
• Adjustable icon padding — fine-tune spacing with a live preview
• Store Preview tab — see how your listing will look on the Chrome Web Store
• Manifest v3 snippet — copy-paste-ready manifest.json icons block
• ZIP download — download all assets at once, organised into icons/ and banners/ folders
• 100% client-side — nothing leaves your browser; no API key needed for image generation
• Dark/light gradients — multiple palettes to match your brand

⁠📐 Chrome Web Store Image Specifications

The table below lists every image asset the Chrome Web Store can use and whether this tool generates it automatically.

Source: Chrome Web Store developer documentation⁠

⁠🛠️ Getting Started

⁠Option 1 — Docker Hub (Fastest)

The quickest way to run the tool without cloning the repository. Requires Docker⁠.

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

Open http://localhost:3000⁠ in your browser.

To stop and remove the container:

docker stop assets-generator && docker rm assets-generator

⁠Option 2 — Docker Compose

Ideal for self-hosting alongside other services.

⁠Using the remote image (No clone needed):

Create a docker-compose.yml file:

services:
  app:
    image: paladini/chrome-web-store-assets-generator:latest
    ports:
      - "3000:80"
    restart: unless-stopped

Then run: docker compose up -d

⁠Using the local source (For developers):

git clone https://github.com/paladini/chrome-web-store-assets-generator.git
cd chrome-web-store-assets-generator

docker compose up -d --build

Open http://localhost:3000⁠ in your browser.

⁠Option 3 — Node.js

Prerequisites: Node.js⁠ 18+

# Clone the repository
git clone https://github.com/paladini/chrome-web-store-assets-generator.git
cd chrome-web-store-assets-generator

# Install dependencies
npm install

# Start the development server
npm run dev

Open http://localhost:3000⁠ in your browser.

⁠Build for production

npm run build

The output will be in the dist/ folder. Serve it with any static file server.

⁠📖 How to Use

1. Upload your logo — drag & drop or click the upload area. Any image format is supported (PNG, SVG, JPG, WebP). Recommended minimum: 512×512 px for best results.
2. Customise — adjust icon padding, set your extension name and subtitle, and choose a gradient colour palette for the promotional banners.
3. Generate — assets are generated automatically as you make changes. Switch between the Icons, Banners, and Store Preview tabs.
4. Download — click Download All (.zip) to get a ZIP archive organised into icons/ and banners/, or download individual files.
5. Add to your manifest — use the Manifest Snippet to copy the ready-to-use icons block into your manifest.json.

⁠🏗️ Tech Stack

⁠🤝 Contributing

Contributions are welcome and appreciated! Please read CONTRIBUTING.md⁠ before opening a pull request.

# Fork the repo, create a feature branch
git checkout -b feature/your-feature-name

# Make your changes, then run type-checking
npm run lint

# Open a PR against main

⁠📄 License

Distributed under the MIT License⁠. See LICENSE for more information.

⁠👤 Author

Fernando Paladini — @paladini⁠

If this project saved you time, consider giving it a ⭐ on GitHub!