---

名称: chrome-extension-icons 描述: 为Chrome浏览器扩展搜索和生成图标。自动从Iconify（27.5万+免费图标）下载SVG图标，转换为所需的PNG尺寸（16x16、32x32、48x48、128x128），并更新manifest.json配置。当用户提到“扩展图标”、“浏览器扩展图标”、“Chrome图标”、“为扩展添加图标”、“为扩展生成图标”或处理Chrome扩展manifest.json图标设置时使用。支持颜色定制、本地SVG转换和多个项目的批量生成。 允许工具: Bash、Read、Write、Edit、Grep、Glob 版本: 1.0.0

Chrome扩展图标

使用Iconify庞大的27.5万+免费开源图标库，在几秒钟内为Chrome浏览器扩展生成专业图标。

快速开始工作流程

当用户请求扩展图标时，请按照以下步骤操作：

1. 理解请求

提取关键信息：

• 图标主题/关键词：需要什么类型的图标？（例如：“日历”、“音乐”、“设置”、“书签”）
• 目标目录：图标保存位置（默认：./icons）
• 清单位置：manifest.json路径（默认：./manifest.json）
• 颜色偏好：任何特定的颜色要求（可选）
• 上下文：manifest.json是否已存在？这是一个新项目吗？

2. 自动搜索图标

使用提取的关键词运行搜索命令：

node ~/.claude/skills/chrome-extension-icons/scripts/generate-icons.js search "<关键词>"

预期输出：

• 匹配图标列表及预览URL
• 自动识别最佳匹配
• 显示前5个结果（最佳匹配 + 4个备选方案）

向用户展示：

• 显示最佳匹配图标及其ID和预览链接
• 简要说明如果用户想要选择不同的样式，还有4个备选方案可用
• 提供预览URL，以便用户查看图标外观

示例展示：

我为您的扩展找到了一个很棒的日历图标：

最佳匹配：mdi:calendar
预览：https://icon-sets.iconify.design/mdi/icons/calendar.html

我将为您的Chrome扩展生成此图标的4种尺寸（16x16、32x32、48x48、128x128）。
如果您更喜欢不同的样式，我还保存了4个备选方案供您选择。

是否继续使用此图标？

3. 生成图标

一旦确认（或如果用户对任何图标说“是”则自动继续），运行：

node ~/.claude/skills/chrome-extension-icons/scripts/generate-icons.js generate \
  --icon "<图标ID>" \
  --output "./icons" \
  --manifest "./manifest.json"

使用自定义颜色（如果用户指定了颜色）：

node ~/.claude/skills/chrome-extension-icons/scripts/generate-icons.js generate \
  --icon "<图标ID>" \
  --output "./icons" \
  --manifest "./manifest.json" \
  --color "#ba3329"

4. 验证结果

生成后，检查输出：

ls -lh ./icons/

验证是否创建了4个PNG文件：

• icon16.png
• icon32.png
• icon48.png
• icon128.png

检查manifest.json是否已更新：

cat ./manifest.json | grep -A 6 '"icons"'

5. 向用户报告

提供摘要：

✅ 图标生成完成！

生成的文件：
- icons/icon16.png (1.2 KB)
- icons/icon32.png (2.4 KB)
- icons/icon48.png (3.8 KB)
- icons/icon128.png (9.5 KB)

您的manifest.json已更新：
{
  "icons": {
    "16": "icons/icon16.png",
    "32": "icons/icon32.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  }
}

📌 备选图标（如果您想尝试不同的样式）：
1. mdi:calendar-month - https://icon-sets.iconify.design/mdi/icons/calendar-month.html
2. fa:calendar - https://icon-sets.iconify.design/fa/icons/calendar.html
3. heroicons:calendar - https://icon-sets.iconify.design/heroicons/icons/calendar.html
4. carbon:calendar - https://icon-sets.iconify.design/carbon/icons/calendar.html

如果您想尝试这些备选方案中的任何一个，请告诉我！

高级功能

自定义颜色图标

当用户请求特定颜色时（例如：“把它变成红色”、“使用我的品牌颜色#ba3329”）：

node ~/.claude/skills/chrome-extension-icons/scripts/generate-icons.js generate \
  --icon "mdi:home" \
  --color "#ba3329" \
  --output "./icons"

注意：颜色定制最适合单色SVG图标。复杂的渐变可能无法按预期渲染。

转换本地SVG文件

当用户有自己的徽标或SVG文件时：

1. 首先检查文件是否存在：

   ls -lh <svg文件路径>
   

2. 转换它：

   node ~/.claude/skills/chrome-extension-icons/scripts/generate-icons.js convert \
     --input "<svg文件路径>" \
     --output "./icons" \
     --manifest "./manifest.json"
   

3. 可选应用颜色：

   node ~/.claude/skills/chrome-extension-icons/scripts/generate-icons.js convert \
     --input "./logo.svg" \
     --output "./icons" \
     --color "#ff0000"
   

批量生成

当用户需要为多个项目生成图标时：

1. 创建配置文件 icons-config.json：

   {
     "projects": [
       {
         "name": "项目A",
         "icon": "mdi:calendar",
         "output": "./project-a/icons",
         "manifest": "./project-a/manifest.json"
       },
       {
         "name": "项目B",
         "icon": "mdi:music",
         "output": "./project-b/icons",
         "manifest": "./project-b/manifest.json",
         "color": "#ff0000"
       },
       {
         "name": "项目C",
         "input": "./project-c/logo.svg",
         "output": "./project-c/icons",
         "manifest": "./project-c/manifest.json"
       }
     ]
   }
   

2. 运行批量生成：

   node ~/.claude/skills/chrome-extension-icons/scripts/generate-icons.js batch \
     --config icons-config.json
   

3. 报告摘要，显示每个项目的成功/失败情况

Chrome扩展图标要求

始终告知用户Chrome的图标要求：

• 16x16像素：网站图标、工具栏图标（小显示屏）
• 32x32像素：Windows任务栏（可选但推荐）
• 48x48像素：扩展管理页面（必需）
• 128x128像素：Chrome网上应用店、安装对话框（必需）

格式：仅PNG（manifest.json不支持SVG）

透明度：支持并推荐用于非方形徽标

文件大小：所有4个文件的总大小应< 100 KB

Manifest.json配置

脚本自动创建或更新 icons 字段：

{
  "manifest_version": 3,
  "name": "我的扩展",
  "version": "1.0.0",
  "icons": {
    "16": "icons/icon16.png",
    "32": "icons/icon32.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  }
}

如果存在 action 或 browser_action，default_icon 也会被更新：

{
  "action": {
    "default_icon": {
      "16": "icons/icon16.png",
      "32": "icons/icon32.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  }
}

错误处理

缺少依赖项

如果脚本因Sharp安装错误而失败：

macOS：

brew install vips
cd ~/.claude/skills/chrome-extension-icons && npm install

Ubuntu/Debian：

sudo apt-get install libvips-dev
cd ~/.claude/skills/chrome-extension-icons && npm install

Windows：

npm install --global windows-build-tools
cd ~/.claude/skills/chrome-extension-icons && npm install

如果安装失败，请告知用户这些步骤。

API故障

脚本内置重试逻辑（3次尝试，指数退避）。如果Iconify API失败：

• 建议稍后再试
• 提供使用本地SVG的选项（如果可用）
• 检查网络连接

速率限制

如果发生HTTP 429错误，脚本会自动等待并重试。告知用户：

图标API正在经历高流量。等待60秒后重试...

无效图标选择

如果图标渲染不佳或用户不喜欢：

• 展示4个保存的备选图标
• 提供搜索不同关键词的选项
• 建议使用他们自己的SVG文件

最佳实践

1. 始终预览：在生成前向用户显示图标预览URL
2. 生成前确认：除非用户明确要求立即操作
3. 检查manifest.json是否存在：如果不存在，告知用户将创建新的
4. 验证输出：始终运行 ls 以确认文件成功创建
5. 文件大小：报告文件大小以确保它们合理（每个< 20 KB）
6. 备份警告：如果manifest.json存在，提及它将被更新（不会被替换）

触发此技能的常见用户短语

• “我需要为我的Chrome扩展找一个图标”
• “为我的扩展添加一个日历图标”
• “生成扩展图标”
• “你能为我的浏览器扩展创建图标吗？”
• “我需要manifest.json的图标”
• “将我的徽标转换为Chrome扩展格式”
• “从这个SVG制作扩展图标”

示例

有关详细对话示例和边缘情况，请参见examples/usage.md。

技术细节

• 图标来源：Iconify API（https://iconify.design/）
• 图标总数：27.5万+，来自200+图标集
• 图像处理：Sharp库（高性能Node.js）
• 支持的输入：SVG（来自Iconify或本地文件）
• 输出格式：带透明度的PNG
• Node.js要求：>= 18.17.0

故障排除快速参考

问题	解决方案
Sharp无法安装	安装libvips：brew install vips（macOS）
API超时	稍后重试，检查连接
图标看起来不好	尝试备选方案中的不同图标
颜色错误	对单色图标使用 --color 标志
文件太大	复杂的SVG可能创建大的PNG，尝试更简单的图标
Manifest未更新	检查文件权限，验证路径是否正确

---

记住：此技能自动化了一个繁琐的过程。对用户要有帮助，提供清晰的选项，并确保用户体验流畅。始终在生成前显示预览链接，以便用户知道他们将得到什么。