browser-plugin-creator/templates/devtools/README.md

A modern scaffolding tool for creating browser extensions with ease

# {{name}}

{{description}}

## 功能特性

- 🔍 **元素检查器** - 实时查看页面元素信息
- 📊 **控制台输出** - 捕获和显示页面日志
- 📁 **数据导出** - 导出分析数据到JSON文件
- 🎯 **实时DOM监控** - 监听页面DOM变化
- 🔧 **开发者工具集成** - 深度集成Chrome DevTools

## 开发指南

### 安装依赖
```bash
npm install
```

### 开发模式
```bash
npm run dev
```

### 构建扩展
```bash
npm run build
```

### 打包扩展
```bash
npm run package
```

## 使用方法

1. 打开Chrome扩展管理页面 (`chrome://extensions/`)
2. 开启开发者模式
3. 点击"加载已解压的扩展程序"
4. 选择项目目录
5. 打开任意网页，按F12查看DevTools面板

## 文件结构

```
├── manifest.json          # 扩展清单
├── devtools.html          # DevTools面板HTML
├── devtools.js            # DevTools面板逻辑
├── devtools.css           # 面板样式
├── background.js          # 后台服务
├── content.js             # 内容脚本
└── package.json           # 项目配置
```

## 技术栈

- **Manifest V3** - 最新的Chrome扩展标准
- **Chrome DevTools API** - 开发者工具集成
- **Service Worker** - 后台处理
- **Content Scripts** - 页面注入脚本