Chrome Store Assets

Chrome Web Store assets (and exact-dimension PNGs on macOS)

The core technique: SVG → PNG with sips

macOS ships sips, which rasterizes SVG to PNG at exact pixel dimensions — gradients, text, opacity, ` embeds, clipPath, feDropShadow all render. This is the reliable way to produce store graphics when node-canvas fails (native dlopen) and ImageMagick/rsvg-convert` aren't installed.

# The width/height on the  element set the output pixel size exactly.
sips -s format png input.svg --out output.png
sips -g pixelWidth -g pixelHeight output.png   # verify dimensions

Always render and visually verify the PNG (open/Read it) before delivering — sips occasionally drops a glyph if a font is missing. Stick to font-family="Helvetica, Arial, sans-serif" (always present on macOS). Embed raster images in SVG as base64 data URIs (href="data:image/png;base64,…") rather than file refs.

sips is also the no-dependency way to get image dimensions (-g pixelWidth -g pixelHeight) and to resize/pad/convert existing images.

Required Chrome Web Store assets & sizes

| Asset | Size | Required? | | --- | --- | --- | | Store icon | 128×128 PNG | Yes | | Screenshots | 1280×800 (or 640×400) PNG/JPEG, 1–5 | Yes (≥1) | | Small promo tile | 440×280 PNG | Recommended | | Marquee promo tile | 1400×560 PNG | Only if Google features you |

Design language that reads well at every size: a strong diagonal brand gradient, one clear product motif, white text with a hierarchy, generous rounding, and a soft drop shadow on any "card." Keep the icon to ONE bold idea — detail disappears at 16px.

Scripts in this skill

• scripts/frame-screenshots.mjs — turns raw product screenshots into store-spec 1280×800 PNGs: branded background, the screenshot in a rounded frame with a shadow, and a caption across the top. Drop images in /store-assets/raw/ named 1.png, 2.png …, set captions in store-assets/captions.json (array, Nth caption → Nth file), run node scripts/frame-screenshots.mjs. Output in store-assets/screenshots/. Run it from the target project root (it resolves store-assets/ relative to CWD), or copy it into the project's scripts/.
• scripts/make-promo-tiles.mjs — writes branded SVGs for the icon / small tile / marquee from a small config (product name, tagline, colors) and rasterizes them with sips. Edit the config block at the top, run, verify the PNGs.

Both are pure Node + sips; no npm install. If the machine has no system Node, point them at whatever Node install is available (e.g. a user-local ~/.local/node*/bin).

Listing-field reference

See references/listing-fields.md for ready-to-paste:

• Permission justifications (activeTab, scripting, tabs, storage, downloads, offscreen, contextMenus, host permissions).
• Privacy-practices answers (single purpose, remote-code = No, data-collection declaration, the three certification checkboxes).
• Category guidance, the 132-char summary limit, and the gotcha that Title and Summary are pulled from manifest.json (name / description) and are NOT editable in the dashboard — change them in the manifest, rebuild, and re-upload the package.

Hard-won gotchas

• The CWS developer dashboard and the Stripe dashboard both BLOCK browser automation. Don't try to drive them with a browser-control tool — guide the user click-by-click and supply copy-paste field values instead.
• Manifest description (= store Summary) and the store Summary field both cap at 132 chars. A package over that is rejected at upload.
• Screenshots must be exactly 1280×800 or 640×400 — odd sizes are rejected or look bad; frame/pad them.
• For marketing screenshots, capture with the paid/clean state active so free-tier limitation banners don't appear in the hero shots (unless that's intentional upsell).

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: JCreatesGH
• Source: JCreatesGH/claude-skills
• License: MIT

Install and usage instructions live in the source repository linked above.