# 🎨 Chrome Extension Icons **浏览器扩展图标自动化生成工具** [![Version](https://img.shields.io/badge/version-1.0.0-blue?style=flat-square)](https://github.com/Boulea7/ChromeExtensionIconsSkill/releases) [![License](https://img.shields.io/badge/license-MIT-green?style=flat-square)](https://github.com/Boulea7/ChromeExtensionIconsSkill/blob/main/LICENSE) [![Node](https://img.shields.io/badge/node-%3E%3D18.17.0-brightgreen?style=flat-square)](https://nodejs.org/) [![Icons](https://img.shields.io/badge/icons-275%2C000%2B-orange?style=flat-square)](https://iconify.design/) [![Stars](https://img.shields.io/github/stars/Boulea7/ChromeExtensionIconsSkill?style=flat-square)](https://github.com/Boulea7/ChromeExtensionIconsSkill/stargazers) 一个强大的工具，让 Chrome 扩展图标生成变得简单。从 Iconify 的 **275,000+** 免费图标库中搜索，自动生成 Chrome 要求的 **4 种尺寸** PNG 图标，并自动更新 `manifest.json` 配置。 [English](./README_EN.md) | 简体中文 [快速开始](#-快速开始) • [功能特性](#-功能特性) • [使用文档](#-使用文档) • [常见问题](#-常见问题)
--- ## 🌟 为什么选择这个工具？ 开发 Chrome 扩展时，你是否遇到过这些麻烦： - ❌ 需要手动搜索和下载图标 - ❌ 需要用 Photoshop/Sketch 调整 4 种不同尺寸 - ❌ 需要手动编辑 manifest.json 配置 - ❌ 图标格式不符合 Chrome 要求 **现在，一行命令搞定一切！** ✨ ```bash node skill/scripts/generate-icons.js generate --icon "mdi:calendar" --output "./icons" ``` ✅ 自动搜索最佳图标 ✅ 自动生成 4 种尺寸 PNG ✅ 自动更新 manifest.json ✅ 仅需 **3 秒**完成全部流程 --- ## ✨ 功能特性
### 🔍 海量图标库 从 Iconify 的 **275,000+** 免费开源图标中搜索，涵盖： - Material Design Icons (7,000+) - Font Awesome (2,000+) - Heroicons, Lucide, Carbon... - 200+ 图标集合 ### 🎨 一键生成 自动生成 Chrome 要求的全部尺寸： - **16x16** - Favicon、工具栏图标 - **32x32** - Windows 任务栏 - **48x48** - 扩展管理页面 ⭐ 必需 - **128x128** - Web Store 展示 ⭐ 必需
### 🌈 颜色定制 轻松应用品牌色： ```bash --color "#ba3329" ``` 将图标转换为你的品牌配色 ### 📁 本地转换 已有 logo？直接转换： ```bash --input "./my-logo.svg" ``` 将你的 SVG logo 转换为标准格式
### 📦 批量处理 一次处理多个项目： ```json { "projects": [ { "icon": "mdi:calendar", ... }, { "icon": "mdi:music", ... } ] } ``` ### ⚡ 极速性能 - 搜索：< 1 秒 - 生成：< 3 秒 - 文件：仅 3-4 KB - 成功率：100%
--- ## 🚀 快速开始 ### 方式一：作为 Claude Code Skill 使用 ⭐ 推荐 如果你使用 **Claude Code**，可以将本工具安装为 Skill，通过自然语言对话使用。 #### 📦 安装 Skill **步骤 1：克隆仓库** ```bash git clone https://github.com/Boulea7/ChromeExtensionIconsSkill.git cd ChromeExtensionIconsSkill ``` **步骤 2：部署 Skill** 选择以下任一方式：
选项 A：个人 Skill（仅你自己使用） ```bash # 创建个人 Skill 目录 mkdir -p ~/.claude/skills/chrome-extension-icons # 复制 Skill 文件 cp -r skill/* ~/.claude/skills/chrome-extension-icons/ # 安装依赖 cd ~/.claude/skills/chrome-extension-icons npm install ``` **验证安装**： ```bash ls ~/.claude/skills/chrome-extension-icons/SKILL.md # 应显示：SKILL.md 文件路径 ```
选项 B：符号链接（推荐开发者） ```bash # 使用符号链接，便于后续更新 ln -s "$(pwd)/skill" ~/.claude/skills/chrome-extension-icons # 安装依赖 cd ~/.claude/skills/chrome-extension-icons npm install ``` **优点**：修改源代码后无需重新复制
选项 C：项目 Skill（团队共享） 如果你想让团队成员也能使用： ```bash # 在你的扩展项目根目录 mkdir -p .claude/skills/chrome-extension-icons cp -r /path/to/ChromeExtensionIconsSkill/skill/* .claude/skills/chrome-extension-icons/ # 提交到 Git git add .claude/skills/ git commit -m "Add chrome-extension-icons Skill" git push # 团队成员 pull 后自动可用 ```
**步骤 3：验证 Skill 可用** 在 Claude Code 中询问： ``` 我需要为 Chrome 扩展生成一个日历图标 ``` Claude 应该自动使用此 Skill 帮你搜索、生成图标。 #### 🎯 如何使用 Skill **完全自然语言交互**，无需记忆命令： ``` "我想为我的书签管理扩展添加一个书签图标" "生成一个音乐图标，颜色用 #ba3329" "帮我把 company-logo.svg 转换成 Chrome 扩展图标" "我有 3 个扩展项目需要批量生成图标" ``` Claude 会自动： 1. 🔍 搜索相关图标 2. 📋 展示最佳匹配和预览链接 3. 💬 询问你的确认 4. 🎨 生成 4 种尺寸的 PNG 5. 📝 更新 manifest.json 6. ✅ 报告完成情况和备选方案 #### ⚙️ Skill 触发条件 Skill 会在以下情况自动激活： - 提到 "extension icon"（扩展图标） - 提到 "browser extension icon"（浏览器扩展图标） - 提到 "chrome icon"（Chrome 图标） - 提到 "add icon to extension"（为扩展添加图标） - 提到 "manifest.json icon setup"（manifest 图标配置） #### 🔧 系统要求 - **Claude Code** - [下载安装](https://code.claude.com/) - **Node.js** >= 18.17.0 - **Sharp 依赖**：部分系统需要先安装 libvips
Sharp 安装问题？点击查看解决方案 **macOS**: ```bash brew install vips cd ~/.claude/skills/chrome-extension-icons && npm install ``` **Ubuntu/Debian**: ```bash sudo apt-get install libvips-dev cd ~/.claude/skills/chrome-extension-icons && npm install ``` **Windows**: ```bash npm install --global windows-build-tools cd ~/.claude/skills/chrome-extension-icons && npm install ```
--- ### 方式二：直接使用命令行工具 如果你不使用 Claude Code，也可以直接运行脚本。 #### 📦 安装 ```bash # 1. 克隆仓库 git clone https://github.com/Boulea7/ChromeExtensionIconsSkill.git cd ChromeExtensionIconsSkill # 2. 安装依赖 npm install # 3. 测试运行 node skill/scripts/generate-icons.js search "star" ``` #### 🎯 基础用法
1. 搜索图标 ```bash node skill/scripts/generate-icons.js search "calendar" ``` 返回匹配的图标列表和预览链接。
2. 生成图标 ```bash node skill/scripts/generate-icons.js generate \ --icon "mdi:calendar" \ --output "./icons" \ --manifest "./manifest.json" ``` 自动生成 4 个尺寸并更新配置。
3. 自定义颜色 ```bash node skill/scripts/generate-icons.js generate \ --icon "mdi:home" \ --color "#ba3329" ```
4. 转换本地 SVG ```bash node skill/scripts/generate-icons.js convert \ --input "./my-logo.svg" \ --output "./icons" ```
5. 批量处理 创建 `batch-config.json`： ```json { "projects": [ { "name": "项目A", "icon": "mdi:calendar", "output": "./projectA/icons", "manifest": "./projectA/manifest.json" } ] } ``` 运行： ```bash node skill/scripts/generate-icons.js batch --config batch-config.json ```
--- ## 📸 效果演示 ### 搜索图标 ```bash $ node skill/scripts/generate-icons.js search "calendar" 🔍 搜索 "calendar"... ✨ 找到 32 个图标： 1. mdi:calendar 预览: https://icon-sets.iconify.design/mdi/icons/calendar.html 2. mdi:calendar-outline 预览: https://icon-sets.iconify.design/mdi/icons/calendar-outline.html 3. material-symbols:calendar 预览: https://icon-sets.iconify.design/material-symbols/icons/calendar.html 💡 最佳匹配: mdi:calendar ``` ### 生成图标 ```bash $ node skill/scripts/generate-icons.js generate --icon "mdi:calendar" --output "./icons" ⬇️ 下载: mdi:calendar ✓ 已下载 240 bytes 🔄 转换为 PNG... ✓ 已生成 16x16: icons/icon16.png (0.2 KB) ✓ 已生成 32x32: icons/icon32.png (0.2 KB) ✓ 已生成 48x48: icons/icon48.png (0.3 KB) ✓ 已生成 128x128: icons/icon128.png (0.6 KB) 📝 更新 manifest.json... ✓ 已创建: ./manifest.json ✅ 图标生成完成！ 已生成 4 个 PNG 文件 总大小: 1.3 KB ``` ### 自动更新 manifest.json ```json { "manifest_version": 3, "name": "My Extension", "version": "1.0.0", "icons": { "16": "icons/icon16.png", "32": "icons/icon32.png", "48": "icons/icon48.png", "128": "icons/icon128.png" } } ``` --- ## 📖 使用文档 ### 命令参数详解
search - 搜索图标 ```bash node skill/scripts/generate-icons.js search <关键词> ``` **示例**: ```bash node skill/scripts/generate-icons.js search "music" node skill/scripts/generate-icons.js search "settings" node skill/scripts/generate-icons.js search "bookmark" ``` **返回**: - 匹配图标列表（最多 20 个） - 每个图标的预览链接 - 最佳匹配建议
generate - 生成图标（从 Iconify） ```bash node skill/scripts/generate-icons.js generate [选项] ``` **必需参数**: - `--icon ` - Iconify 图标 ID（格式：`prefix:name`，如 `mdi:home`） **可选参数**: - `--output <目录>` - 输出目录（默认：`./icons`） - `--manifest <路径>` - manifest.json 路径（默认：`./manifest.json`） - `--color <颜色>` - Hex 颜色（如：`#ff0000`） - `--sizes <尺寸>` - 自定义尺寸（如：`16,32,48,128,256`） **示例**: ```bash # 基础使用 node skill/scripts/generate-icons.js generate --icon "mdi:home" # 自定义颜色 node skill/scripts/generate-icons.js generate --icon "mdi:star" --color "#ba3329" # 自定义尺寸和路径 node skill/scripts/generate-icons.js generate \ --icon "mdi:music" \ --output "./assets/icons" \ --manifest "./src/manifest.json" \ --sizes "16,24,32,48,128" ```
convert - 转换本地 SVG ```bash node skill/scripts/generate-icons.js convert [选项] ``` **必需参数**: - `--input <文件>` - 本地 SVG 文件路径 **可选参数**: - `--output <目录>` - 输出目录（默认：`./icons`） - `--manifest <路径>` - manifest.json 路径 - `--color <颜色>` - 应用颜色（会替换 SVG 中的填充色） - `--sizes <尺寸>` - 自定义尺寸 **示例**: ```bash # 转换公司 logo node skill/scripts/generate-icons.js convert \ --input "./company-logo.svg" \ --output "./icons" # 转换并改色 node skill/scripts/generate-icons.js convert \ --input "./logo.svg" \ --output "./icons" \ --color "#2563eb" ```
batch - 批量处理 ```bash node skill/scripts/generate-icons.js batch --config <配置文件> ``` **配置文件格式**: ```json { "projects": [ { "name": "日历扩展", "icon": "mdi:calendar", "output": "./project-calendar/icons", "manifest": "./project-calendar/manifest.json" }, { "name": "音乐扩展", "icon": "mdi:music", "output": "./project-music/icons", "manifest": "./project-music/manifest.json", "color": "#ff0000" }, { "name": "本地 Logo", "input": "./my-logo.svg", "output": "./project-logo/icons", "manifest": "./project-logo/manifest.json" } ] } ``` **示例**: ```bash node skill/scripts/generate-icons.js batch --config batch-config.json ```
--- ## 🎯 使用示例 ### 场景 1: 新项目快速开始 ```bash # 搜索合适的图标 node skill/scripts/generate-icons.js search "bookmark" # 选择 mdi:bookmark 并生成 node skill/scripts/generate-icons.js generate \ --icon "mdi:bookmark" \ --output "./icons" \ --manifest "./manifest.json" ``` **结果**: - ✅ 生成 4 个 PNG 文件 - ✅ 创建 manifest.json（如果不存在） - ✅ 配置正确的图标路径 ### 场景 2: 使用品牌色 ```bash # 生成红色的心形图标 node skill/scripts/generate-icons.js generate \ --icon "mdi:heart" \ --color "#e11d48" \ --output "./icons" ``` **适用于**: 单色 SVG 图标 **效果**: 所有填充色替换为指定颜色 ### 场景 3: 转换公司 Logo ```bash # 将公司的 logo.svg 转换为 Chrome 格式 node skill/scripts/generate-icons.js convert \ --input "./assets/company-logo.svg" \ --output "./extension/icons" \ --manifest "./extension/manifest.json" ``` ### 场景 4: 管理多个扩展项目 ```bash # 创建批量配置 cat > my-extensions.json << 'EOF' { "projects": [ { "name": "待办事项扩展", "icon": "mdi:checkbox-marked", "output": "./todo-extension/icons", "manifest": "./todo-extension/manifest.json" }, { "name": "书签管理器", "icon": "mdi:bookmark-multiple", "output": "./bookmark-manager/icons", "manifest": "./bookmark-manager/manifest.json", "color": "#3b82f6" }, { "name": "密码管理器", "icon": "mdi:shield-key", "output": "./password-manager/icons", "manifest": "./password-manager/manifest.json", "color": "#10b981" } ] } EOF # 一次性生成全部 node skill/scripts/generate-icons.js batch --config my-extensions.json ``` --- ## 📊 性能表现
指标 数值 评级
🔍 搜索速度 0.8-1.2 秒 ⚡️ 优秀
🎨 单图标生成 1.5-2.5 秒 ⚡️ 优秀
📦 批量 4 项目 ~2.3 秒 🚀 极优
💾 16x16 文件 ~300 字节 💎 完美
💾 128x128 文件 ~1.5 KB 💎 完美
📦 4 个图标总大小 3-4 KB 💎 完美
--- ## 🛠️ Chrome Extension 图标要求 Chrome 扩展对图标有严格要求，本工具自动满足所有规范： | 尺寸 | 用途 | 是否必需 | 生成文件 | |------|------|----------|----------| | 16x16 | Favicon、工具栏 | 推荐 | ✅ icon16.png | | 32x32 | Windows 任务栏 | 推荐 | ✅ icon32.png | | 48x48 | 扩展管理页面 | **必需** | ✅ icon48.png | | 128x128 | Web Store、安装对话框 | **必需** | ✅ icon128.png | **格式要求**: - ✅ PNG 格式（唯一支持的格式） - ✅ 透明背景支持 - ❌ SVG 不支持（Chrome 限制） **manifest.json 配置**: 本工具自动生成正确的配置： ```json { "icons": { "16": "icons/icon16.png", "32": "icons/icon32.png", "48": "icons/icon48.png", "128": "icons/icon128.png" }, "action": { "default_icon": { "16": "icons/icon16.png", "32": "icons/icon32.png", "48": "icons/icon48.png", "128": "icons/icon128.png" } } } ``` --- ## 💡 使用技巧 ### ✅ 推荐做法 1. **先预览再生成**: 使用 `search` 命令查看图标样式，点击预览链接确认 2. **选择简单图标**: 扁平化设计在小尺寸（16x16）下显示更清晰 3. **使用品牌色**: 单色图标配合 `--color` 参数效果最佳 4. **批量处理**: 多个项目用 batch 模式节省时间 5. **保持文件小**: 生成的 PNG 总大小应 < 100 KB ### ⚠️ 注意事项 1. **复杂 SVG 可能失真**: 包含渐变、滤镜的图标建议选择其他简单风格 2. **颜色功能限制**: 只能替换纯色填充，不影响渐变和图案 3. **文件路径**: manifest.json 中使用相对路径，确保正确性 --- ## 🔧 常见问题
Q: Sharp 安装失败怎么办？ Sharp 依赖 libvips 图像处理库，部分系统需要手动安装： **macOS**: ```bash brew install vips cd skill && npm install ``` **Ubuntu/Debian**: ```bash sudo apt-get install libvips-dev cd skill && npm install ``` **Windows**: 通常会自动安装。如果失败： ```bash npm install --global windows-build-tools cd skill && npm install ```
Q: Claude Code 没有使用我的 Skill？ **原因 1**：Skill 未正确安装 验证方法： ```bash ls ~/.claude/skills/chrome-extension-icons/SKILL.md ``` **原因 2**：触发短语不匹配 确保你的描述包含关键词： - "扩展图标" 或 "extension icon" - "Chrome 图标" 或 "chrome icon" - "浏览器扩展" 或 "browser extension" **原因 3**：依赖未安装 ```bash cd ~/.claude/skills/chrome-extension-icons npm install ```
Q: API 请求失败或超时？ **原因**: 网络问题或 Iconify API 暂时不可用 **解决方案**: - 脚本会自动重试 3 次 - 检查网络连接 - 等待片刻后重试 - 或使用本地 SVG：`convert --input "./logo.svg"`
Q: 生成的图标不满意？ **方案 1**: 尝试其他关键词 ```bash # 如果 "calendar" 结果不理想 node skill/scripts/generate-icons.js search "schedule" node skill/scripts/generate-icons.js search "date" ``` **方案 2**: 选择不同的图标集 - Material Design: `mdi:*` - Font Awesome: `fa:*` - Heroicons: `heroicons:*` - Carbon: `carbon:*` - Lucide: `lucide:*` **方案 3**: 使用自己的 SVG ```bash node skill/scripts/generate-icons.js convert --input "./my-design.svg" ```
Q: 如何自定义图标颜色？ ```bash # 使用 --color 参数，支持 3 位或 6 位 Hex 颜色 node skill/scripts/generate-icons.js generate \ --icon "mdi:home" \ --color "#ba3329" # 6 位完整格式 # 或简写 --color "#f00" # 3 位简写 ``` **注意**: 颜色功能最适合单色 SVG。复杂图标（多色、渐变）可能效果不佳。
Q: 可以生成其他尺寸吗？ 可以！使用 `--sizes` 参数： ```bash node skill/scripts/generate-icons.js generate \ --icon "mdi:star" \ --sizes "16,24,32,48,64,128,256" ``` **常用尺寸**: - Chrome 标准: 16, 32, 48, 128 - 高清显示: 24, 64, 256 - 自定义: 任何 1-1024 之间的尺寸
Q: 批量处理如何配置？ 创建 JSON 配置文件，每个项目可以： - 使用 Iconify 图标（`icon` 字段） - 或转换本地 SVG（`input` 字段） - 自定义颜色、尺寸、路径 ```json { "projects": [ { "name": "项目 A", "icon": "mdi:calendar", "output": "./projectA/icons", "manifest": "./projectA/manifest.json" }, { "name": "项目 B", "input": "./logo-b.svg", "output": "./projectB/icons", "manifest": "./projectB/manifest.json", "color": "#ff0000", "sizes": [16, 32, 48, 128, 256] } ] } ```
--- ## 📂 项目结构 ``` ChromeExtensionIconsSkill/ ├── 📄 README.md # 本文档（中文） ├── 📄 README_EN.md # 英文文档 ├── 📄 LICENSE # MIT 许可证 ├── 📦 package.json # 项目配置 ├── 🎯 skill/ # 核心代码目录 │ ├── 📄 SKILL.md # Claude Code Skill 定义 │ ├── 📦 package.json # 依赖配置 │ ├── 📁 scripts/ │ │ └── 💻 generate-icons.js # 主脚本（~400 行） │ └── 📁 examples/ │ └── 📄 usage.md # 详细使用示例（10 个场景） └── 🔌 plugin/ # 插件打包目录 ├── 📦 package.json └── 📁 .claude-plugin/ ├── 📄 plugin.json # 插件元数据 └── 📁 skills/ # Skill 符号链接 ``` --- ## 🤝 贡献指南 我们欢迎所有形式的贡献！ ### 如何贡献 1. **Fork** 本仓库 2. 创建功能分支 (`git checkout -b feature/AmazingFeature`) 3. 提交更改 (`git commit -m 'Add some AmazingFeature'`) 4. 推送到分支 (`git push origin feature/AmazingFeature`) 5. 开启 **Pull Request** ### 贡献方向 - 🐛 报告 Bug - 💡 提出新功能建议 - 📝 改进文档 - 🎨 优化代码 - 🌍 翻译文档 ### 代码规范 - 使用清晰的变量命名 - 添加必要的注释（英文） - 遵循现有代码风格 --- ## 📄 许可证 本项目采用 **MIT 许可证** - 详见 [LICENSE](LICENSE) 文件 这意味着你可以： - ✅ 自由使用、修改、分发 - ✅ 用于商业项目 - ✅ 二次开发 - ⚠️ 需保留原作者版权声明 --- ## 🙏 致谢 ### 技术支持 - [**Iconify**](https://iconify.design/) - 提供 275,000+ 免费开源图标 - [**Sharp**](https://sharp.pixelplumbing.com/) - 高性能 Node.js 图像处理库 - [**Chrome Extension 文档**](https://developer.chrome.com/docs/extensions/) - 官方开发指南 ### 社区支持 感谢所有 Star、Fork 和贡献代码的开发者们！❤️ --- ## 📞 联系方式
[![GitHub Issues](https://img.shields.io/badge/Issues-提交问题-red?style=flat-square&logo=github)](https://github.com/Boulea7/ChromeExtensionIconsSkill/issues) [![GitHub Discussions](https://img.shields.io/badge/Discussions-讨论交流-blue?style=flat-square&logo=github)](https://github.com/Boulea7/ChromeExtensionIconsSkill/discussions)
- 🐛 **报告 Bug**: [提交 Issue](https://github.com/Boulea7/ChromeExtensionIconsSkill/issues/new) - 💬 **功能建议**: [开启 Discussion](https://github.com/Boulea7/ChromeExtensionIconsSkill/discussions) - 📧 **其他咨询**: 通过 GitHub Issues 联系 --- ## 🔗 相关资源 ### 官方文档 - [Chrome Extension 开发指南](https://developer.chrome.com/docs/extensions/) - [Chrome Extension Icons 规范](https://developer.chrome.com/docs/extensions/reference/manifest/icons) - [Manifest V3 文档](https://developer.chrome.com/docs/extensions/mv3/intro/) - [Claude Code Skills 文档](https://code.claude.com/docs/skills) ### 图标资源 - [Iconify 图标库](https://iconify.design/) - 275,000+ 免费图标 - [Material Design Icons](https://materialdesignicons.com/) - 7,000+ 图标 - [Heroicons](https://heroicons.com/) - 精美的手工制作图标 - [Lucide Icons](https://lucide.dev/) - 美观的开源图标 ### 开发工具 - [Sharp 文档](https://sharp.pixelplumbing.com/) - 图像处理库 - [Chrome Web Store](https://chrome.google.com/webstore) - 扩展发布平台 --- ## 📈 路线图 ### v1.0.0 ✅ 当前版本 - ✅ 基础搜索和生成功能 - ✅ 自定义颜色支持 - ✅ 本地 SVG 转换 - ✅ 批量处理 - ✅ 自动 manifest 更新 - ✅ Claude Code Skill 集成 ### v1.1.0 🔄 计划中 - ⏳ 懒加载 Sharp（优化启动速度） - ⏳ 改进错误处理和重试逻辑 - ⏳ 支持 browser_action 和 page_action - ⏳ 增强输入校验 - ⏳ 添加图标预览功能 ### v2.0.0 💭 未来展望 - 💭 Web 界面 - 💭 图标编辑功能 - 💭 支持更多图标源 - 💭 CI/CD 集成 - 💭 VSCode 扩展 --- ## 🌟 Star History 如果这个项目对你有帮助，请给个 ⭐ Star 支持一下！ [![Star History Chart](https://api.star-history.com/svg?repos=Boulea7/ChromeExtensionIconsSkill&type=Date)](https://star-history.com/#Boulea7/ChromeExtensionIconsSkill&Date) ---
### Made with ❤️ for Chrome Extension Developers 如果这个工具帮到了你，别忘了给个 ⭐ **Star**！ [⬆️ 回到顶部](#-chrome-extension-icons)