Skill: sunshine-del-ux/chrome-extension-generator (version 1.0.0)

--- name: chrome-extension-generator description: 一键生成 Chrome 扩展程序模板，支持 Popup、Background Script、Content Script、Options 页面等多种类型。 metadata: {"clawdbot":{"emoji":"📦","requires":{},"primaryEnv":""}} --- # Chrome Extension Generator 一键生成 Chrome 扩展程序模板，快速启动你的扩展开发。 ## 功能 - ⚡ 快速生成项目结构 - 🎨 多种模板可选 - 📝 完整的配置文件 - 🧪 测试模板 - 📖 生成 README - 🚀 支持 TypeScript ## 模板类型 | 模板 | 说明 | |------|------| | `basic` | 基础 Hello World | | `popup` | 带 Popup 界面 | | `options` | 设置页面 | | `content-script` | 内容脚本 | | `background` | 后台脚本 | | `full` | 完整功能扩展 | ## 使用方法 ### 生成扩展 ```bash # 基本用法 chrome-extension-generator "扩展名称" "描述" # 指定模板 chrome-extension-generator "My Extension" "描述" --template popup # 指定技术栈 chrome-extension-generator "扩展" "描述" --template full --stack typescript ``` ### 选项 | 选项 | 说明 | |------|------| | `--template, -t` | 模板类型 | | `--stack, -s` | JavaScript/TypeScript | | `--output, -o` | 输出目录 | ## 输出结构 ``` my-extension/ ├── manifest.json ├── popup.html ├── popup.js ├── popup.css ├── background.js ├── content.js ├── options.html ├── options.js ├── icon.png ├── README.md └── _locales/ └── en/ └── messages.json ``` ## 示例 ### Popup 扩展 ```bash chrome-extension-generator "Focus Timer" "Pomodoro timer extension" --template popup ``` ### 内容脚本扩展 ```bash chrome-extension-generator "Page Highlighter" "Highlight text on pages" --template content-script ``` ### 完整扩展 ```bash chrome-extension-generator "All-in-One Tool" "Ultimate browser tool" --template full ``` ## manifest.json 示例 ```json { "manifest_version": 3, "name": "My Extension", "version": "1.0.0", "description": "An amazing Chrome extension", "permissions": ["storage", "activeTab"], "action": { "default_popup": "popup.html" }, "background": { "service_worker": "background.js" } } ``` ## 安装 ```bash # 无需依赖 ``` ## 开发流程 1. 生成模板 2. 修改 manifest.json 3. 编写功能代码 4. 本地加载扩展 5. 测试并发布 ## 发布到 Chrome Web Store 生成模板包含： - 发布检查清单 - 上传截图模板 - 商店描述模板 ## 变现思路 1. **付费模板** - 专业版模板 2. **定制开发** - 为客户开发扩展 3. **插件市场** - 建立扩展市场 4. **广告收入** - 在扩展中展示广告 5. **联盟营销** - 推广产品获取佣金 ## 示例扩展 - 广告拦截器 - 密码管理器 - 截图工具 - 笔记工具 - 社媒工具 - 开发辅助工具 ## 常用权限 | 权限 | 说明 | |------|------| | `storage` | 本地存储 | | `activeTab` | 当前标签页 | | `tabs` | 标签页管理 | | `bookmarks` | 书签管理 | | `history` | 历史记录 | | `cookies` | Cookie 管理 | | `webRequest` | 网络请求 |

path: _meta.json
content: {
  "schema_version": "1",
  "name": "chrome-extension-generator",
  "version": "1.0.0",
  "description": "一键生成 Chrome 扩展程序模板",
  "author": {"name": "Sunshine-del-ux"},
  "keywords": ["chrome-extension", "generator", "browser-extension", "template"],
  "license": "MIT"
}


path: chrome-extension-generator.sh
content: #!/bin/bash

# Chrome Extension Generator
# Usage: chrome-extension-generator "Extension Name" "Description" [options]

set -e

NAME="${1:-}"
DESCRIPTION="${2:-}"
TEMPLATE="${3:-basic}"
STACK="${4:-javascript}"

OUTPUT_DIR="${5:-.}"

# Parse options
while [[ $# -gt 5 ]]; do
    case $6 in
        --template|-t)
            TEMPLATE="$7"
            shift 2
            ;;
        --stack|-s)
            STACK="$7"
            shift 2
            ;;
        --output|-o)
            OUTPUT_DIR="$7"
            shift 2
            ;;
        *)
            shift
            ;;
    esac
done

GREEN='\033[0;32m'
BLUE='\033[0;34m'
YELLOW='\033[1;33m'
NC='\033[0m'

if [ -z "$NAME" ]; then
    echo -e "${YELLOW}Usage: chrome-extension-generator \"Name\" \"Description\" [--template basic|popup|full]${NC}"
    exit 1
fi

if [ -z "$DESCRIPTION" ]; then
    DESCRIPTION="An amazing Chrome extension"
fi

DIR_NAME=$(echo "$NAME" | tr '[:upper:]' '[:lower:]' | tr ' ' '-')
OUTPUT_PATH="$OUTPUT_DIR/$DIR_NAME"

mkdir -p "$OUTPUT_PATH"
mkdir -p "$OUTPUT_PATH/_locales/en"

echo -e "${BLUE}📦 Generating Chrome Extension${NC}"
echo "Name: $NAME"
echo "Template: $TEMPLATE"
echo ""

# Generate manifest.json
cat > "$OUTPUT_PATH/manifest.json" << MANIFEST
{
  "manifest_version": 3,
  "name": "$NAME",
  "version": "1.0.0",
  "description": "$DESCRIPTION",
  "permissions": ["storage"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  },
  "background": {
    "service_worker": "background.js"
  },
  "icons": {
    "16": "icon.png",
    "48": "icon.png",
    "128": "icon.png"
  }
}
MANIFEST

# Generate popup.html
cat > "$OUTPUT_PATH/popup.html" << POPUP
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>$NAME</title>
  <style>
    body {
      width: 300px;
      padding: 16px;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }
    h1 { font-size: 16px; margin: 0 0 12px; }
    button {
      width: 100%;
      padding: 10px;
      background: #4285f4;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    button:hover { background: #3367d6; }
  </style>
</head>
<body>
  <h1>$NAME</h1>
  <p>$DESCRIPTION</p>
  <button id="actionBtn">Click Me</button>
  <script src="popup.js"></script>
</body>
</html>
POPUP

# Generate popup.js
cat > "$OUTPUT_PATH/popup.js" << POPUP_JS
document.getElementById('actionBtn').addEventListener('click', () => {
  // Your logic here
  console.log('Button clicked!');
  
  // Example: Save to storage
  chrome.storage.local.set({ lastClick: Date.now() }, () => {
    console.log('Saved!');
  });
});
POPUP_JS

# Generate background.js
cat > "$OUTPUT_PATH/background.js" << BACKGROUND
// Background service worker
chrome.runtime.onInstalled.addListener(() => {
  console.log('Extension installed!');
});

// Handle messages from popup or content scripts
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === 'doSomething') {
    // Do something
    sendResponse({ success: true });
  }
});
BACKGROUND

# Generate icon (placeholder)
# In production, you'd generate an actual icon

# Generate README
cat > "$OUTPUT_PATH/README.md" << README
# $NAME

$DESCRIPTION

## Installation

1. Open Chrome and navigate to \`chrome://extensions\`
2. Enable "Developer mode" (top right)
3. Click "Load unpacked"
4. Select this folder

## Development

1. Make changes to the source files
2. Click "Reload" in the extensions page
3. Test your changes

## Files

- \`manifest.json\` - Extension configuration
- \`popup.html/js\` - Popup UI
- \`background.js\` - Background service worker
- \`content.js\` - Content script (add as needed)

## Publishing

1. Package the extension (Pack extension in chrome://extensions)
2. Create a developer account at https://chrome.google.com/webstore/devconsole
3. Upload your packaged extension
4. Fill in store listing details
5. Submit for review

## License

MIT
README

echo -e "${GREEN}✅ Chrome extension generated!${NC}"
echo "📁 Output: $OUTPUT_PATH"
echo ""
echo "Next steps:"
echo "1. cd $OUTPUT_PATH"
echo "2. Add your extension logic"
echo "3. Load in Chrome (chrome://extensions → Developer mode → Load unpacked)"


Security scan verdicts — ClawScan: clean | static analysis: clean | VirusTotal: clean | SkillSpector: clean (LOW)