chrome-ext-scaffold

Chrome v3 扩展插件开发脚手架

功能特性

• 内置React，webpack，Base，antd4.x
• VS Code 扩展集成，可视化创建项目
• 支持 Chrome Manifest V3

使用方式

1. 在VS Code中打开扩展侧边栏
2. 在主界面点击 Chrome扩展插件 卡片
3. 填写项目名称和选择保存位置
4. 点击"立即生成"创建项目

架构说明

视图切换机制

• 主视图 (main): 显示脚手架卡片
• 创建视图 (create): 显示项目创建表单，包含项目名称和保存位置

消息通信

Webview 与扩展主进程通过以下消息类型通信：

• selectScaffold: 选择脚手架类型
• goBack: 返回主视图
• selectFolder: 选择保存文件夹
• createProject: 创建项目
• onError: 错误处理

文件复制机制

copyDirectory 方法会：

1. 递归复制模板目录的所有文件
2. 对文本文件进行变量替换（{{PROJECT_NAME}} 会被替换为实际项目名称）
3. 保持目录结构不变

支持的替换文件类型：

• .json
• .html
• .js
• .ts
• .tsx
• .md

开发调试

# 编译TypeScript
pnpm run compile

# 监听模式编译
pnpm run watch

# 运行lint检查
pnpm run lint

注意事项

• 模板路径使用相对路径，相对于扩展根目录
• 确保模板文件夹存在，否则会显示错误提示
• 项目名称不能为空
• 保存位置必须是有效的文件夹路径