# chrome-driver

**Repository Path**: trtrtr6/chrome-driver

## Basic Information

- **Project Name**: chrome-driver
- **Description**: 快速给页面添加引导，便于截图和演示
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-07-08
- **Last Updated**: 2025-07-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Chrome Driver.js 页面引导扩展

基于 Driver.js 开发的 Chrome 浏览器扩展，为网页提供智能化的用户引导功能。

> 🤖 **AI 生成项目**：本项目整体架构、代码实现和文档均由 AI 助手生成，展示了 AI 在现代 Web 扩展开发中的应用能力。

## 功能特性

- 🎯 **可视化配置**：拖拽式配置引导步骤，支持多种弹窗样式
- 🖱️ **元素选择器**：点击选择页面元素，自动生成CSS选择器
- 📋 **多配置管理**：创建和管理多套引导配置，标签页切换
- 🎨 **样式定制**：内置Monaco编辑器，支持自定义CSS
- ⚡ **实时预览**：单步测试功能，即时查看引导效果

## 快速开始

```bash
# 安装依赖
yarn install

# 开发模式
yarn dev

# 构建扩展
yarn build
```

在 Chrome 中加载 `.output/chrome-mv3-dev` 目录作为扩展。

## 使用方法

1. 点击扩展图标打开配置界面
2. 添加引导步骤，使用元素选择器选择目标元素
3. 配置弹窗标题、描述和位置
4. 点击「开始引导」测试效果

## 配置格式

```typescript
interface Step {
  element: string;           // CSS选择器
  popover: {
    title: string;          // 弹窗标题
    description: string;    // 描述文本
    side: string;          // 位置: top|right|bottom|left|center
    align: string;         // 对齐: start|center|end
  };
  customStyles?: string;   // 自定义CSS样式
}
```

## 技术栈

- **框架**: WXT + React 19 + TypeScript
- **引导库**: Driver.js
- **编辑器**: Monaco Editor
- **构建**: Vite + Rollup

## 项目结构

```
entrypoints/
├── background.ts         # 后台脚本
├── content.ts           # 内容脚本 (Driver.js集成)
└── popup/               # 弹窗界面
    ├── App.tsx         # 主应用
    ├── components/     # UI组件
    ├── hooks/          # React Hooks
    └── types/          # 类型定义
```

## 开发命令

```bash
yarn dev          # 开发模式
yarn build        # 构建Chrome版本
yarn build:firefox # 构建Firefox版本
yarn compile      # 类型检查
```

## 许可证

MIT License

---

**开发说明**：本项目作为 AI 辅助开发的示例，展现了从需求分析、架构设计到代码实现的完整开发流程。所有代码均经过测试验证，可直接用于生产环境。