extension-assets

拡張機能のアセット（アイコンと画像の生成）

🚀 Premium にアップグレード https://app.extensionbooster.net/dashboard/services/extension-ai-kit で Premium 版を入手できます。

Chrome 拡張機能と CWS の掲載に必要なすべてのアイコンとアセットを生成します。説明だけで終わらせず、ワークフローを実行してください。

アセットのチェックリスト

拡張機能のアイコン（必須）

ファイル	サイズ	用途
icon16.png	16x16	ファビコン、コンテキストメニュー
icon32.png	32x32	Windows タスクバー
icon48.png	48x48	拡張機能の管理ページ
icon128.png	128x128	インストールダイアログ、CWS ストアアイコン

アクションアイコン（ツールバー）

ファイル	サイズ
action16.png	16x16
action24.png	24x24
action32.png	32x32

CWS 掲載用アセット

アセット	サイズ	必須？
スクリーンショット	1280x800 または 640x400	はい（1～5 枚）
小型プロモーションタイル	440x280	特集掲載用
大型プロモーションタイル	920x680	任意
マーキープロモーションタイル	1400x560	任意

ワークフロー（実行してください）

ステップ 1：ソースアイコンを生成または探す

ユーザーに質問します：「ソースロゴはありますか？（SVG または PNG、最小 512x512）」

ソースがない場合 — SVG を直接生成します： すっきりとした、プロフェッショナルな SVG アイコンを作成します。デザインの条件は次のとおりです。

• シンプルな幾何学的図形（16x16 でも認識できること）
• フラットデザイン、グラデーションなし（すべてのサイズで見やすいこと）
• 自然で手作り感のある見た目（AI 生成風ではないこと）
• 最大 2～3 色、コントラストは強め

プロジェクトのルートに icon.svg として保存します。

ステップ 2：SVG → PNG に変換（Node.js スクリプト）

npm install -D sharp
node scripts/generate-icons.js

sharp を使った完全な Node.js スクリプトについては、references/icon-converter-script.md を参照してください。

代替手段（ImageMagick）：

for size in 16 32 48 128; do
  convert -background none -resize ${size}x${size} icon.svg "public/icons/icon${size}.png"
done

ステップ 3：プレースホルダー CWS アセットを生成

# 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

ステップ 4：Gemini API による生成（任意）

API キーを確認します。

if [ -n "${GEMINI_API_KEY:-}" ]; then
  echo "GEMINI_API_KEY is set"
else
  echo "GEMINI_API_KEY is not set"
fi

設定されている場合は、ai-multimodal スキルを使うか、Gemini API を直接呼び出します。プロンプトのテンプレートについては、references/image-generation-prompts.md を参照してください。

設定されていない場合は、ユーザーが手動で生成できるよう、references/image-generation-prompts.md のプロンプトを出力します。

ステップ 5：public/ フォルダーをセットアップ

references/public-folder-setup.md の構成に従ってください。manifest.json のアイコンパスが一致していることを確認します。

ステップ 6：アセットを検証

# 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

出力形式

## 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/icon-requirements.md — アイコン仕様、マニフェスト設定、デザインガイドライン
• references/icon-converter-script.md — SVG → 複数サイズの PNG に変換する Node.js スクリプト（sharp）
• references/store-listing-assets.md — CWS 掲載要件とベストプラクティス
• references/image-generation-prompts.md — AI プロンプトのテンプレート、Gemini API のセットアップ
• references/public-folder-setup.md — public/ フォルダーの構成とマニフェストのパス
• Chrome 拡張機能のアイコン
• CWS のベストな掲載方法

関連スキル

• extension-create — public/ フォルダーを含む新しい拡張機能のスキャフォールド
• extension-manifest — manifest.json のアイコンパスを生成・検証
• extension-publish — ストアへの提出チェックリスト