extension-assets

Original：🇺🇸 English
Translated

Generate and manage all Chrome extension assets: icons (16–128px), CWS listing images, promotional tiles, and public/ folder setup. Supports ImageMagick, Gemini API, and manual prompt templates.

1installs
Sourcequangpl/browser-extension-skills
Added on

NPX Install

npx skill4agent add quangpl/browser-extension-skills extension-assets

Tags

Translated version includes tags in frontmatter
chrome-extension-assetsicon-generationcws-listing-toolsimagemagick-automationgemini-api-integration

SKILL.md Content

View Translation Comparison →

Extension Assets (Icon & Image Generator)

Generate all required icons and assets for a Chrome extension and CWS listing. Do NOT just explain — execute the workflow.

Assets Checklist

Extension Icons (required)

FileSizeUsage
icon16.png
16x16Favicon, context menus
icon32.png
32x32Windows taskbar
icon48.png
48x48Extensions management page
icon128.png
128x128Installation dialog, CWS store icon

Action Icons (toolbar)

FileSize
action16.png
16x16
action24.png
24x24
action32.png
32x32

CWS Listing Assets

AssetSizeRequired?
Screenshots1280x800 or 640x400Yes (1–5)
Small promo tile440x280For featured placement
Large promo tile920x680Optional
Marquee promo tile1400x560Optional

Workflow (Execute This)

Step 1: Generate or locate source icon

Ask user: "Do you have a source logo? (SVG or PNG, min 512x512)"
If no source — generate SVG directly: Create a clean, professional SVG icon. Design should be:
  • Simple geometric shapes (recognizable at 16x16)
  • Flat design, no gradients (clean at all sizes)
  • Natural, hand-crafted look (NOT AI-generated style)
  • 2-3 colors max, bold contrast
Save as 
icon.svg
in project root.

Step 2: Convert SVG → PNG (Node.js script)

bash
npm install -D sharp
node scripts/generate-icons.js
See 
references/icon-converter-script.md
for the full Node.js script using sharp.
Fallback (ImageMagick):
bash
for size in 16 32 48 128; do
  convert -background none -resize ${size}x${size} icon.svg "public/icons/icon${size}.png"
done

Step 3: Generate placeholder CWS assets

bash
# Screenshot placeholder (1280x800)
convert -size 1280x800 xc:"#f8f9fa" \
  -font DejaVu-Sans -pointsize 48 -fill "#6c757d" \
  -gravity center -annotate 0 "Screenshot Placeholder\n1280x800" \
  public/store/screenshot1.png

# Small promo tile (440x280)
convert -size 440x280 xc:"#4285f4" \
  -font DejaVu-Sans -pointsize 32 -fill white \
  -gravity center -annotate 0 "Extension Name\nChrome Web Store" \
  public/store/promo-small.png

Step 4: Gemini API generation (optional)

Check for API key:
bash
echo $GEMINI_API_KEY
If set, use 
ai-multimodal
skill or call Gemini API directly. See 
references/image-generation-prompts.md
for prompt templates.
If not set, output prompts from 
references/image-generation-prompts.md
for user to generate manually.

Step 5: Set up public/ folder

Follow structure in 
references/public-folder-setup.md
. Verify manifest.json icon paths match.

Step 6: Validate assets

bash
# Check all required icons exist and are correct size
for size in 16 32 48 128; do
  identify public/icons/icon${size}.png | grep "${size}x${size}" \
    && echo "icon${size}.png OK" || echo "icon${size}.png MISSING/WRONG SIZE"
done

Output Format

## Assets Generation Report: <extension-name>

### Generated Icons
- icon16.png ✓ | icon32.png ✓ | icon48.png ✓ | icon128.png ✓
- action16.png ✓ | action24.png ✓ | action32.png ✓

### CWS Listing Assets
- screenshot1.png (1280x800) ✓
- promo-small.png (440x280) ✓

### Pending (manual generation needed)
- Large promo tile (920x680) — prompt provided below
- Screenshots with real extension UI

### Prompts for Manual Generation
<see references/image-generation-prompts.md>

References

  • references/icon-requirements.md
    — Icon specs, manifest config, design guidelines
  • references/icon-converter-script.md
    — Node.js script (sharp) to convert SVG → multi-size PNG
  • references/store-listing-assets.md
    — CWS listing requirements and best practices
  • references/image-generation-prompts.md
    — AI prompt templates, Gemini API setup
  • references/public-folder-setup.md
    — public/ folder structure and manifest paths
  • Chrome Extension Icons
  • CWS Best Listing

Related Skills

  • extension-create
    — Scaffold new extension with public/ folder
  • extension-manifest
    — Generate/validate manifest.json icon paths
  • extension-publish
    — Store submission checklist