# automa-style-selector 

**Repository Path**: MoSheng2020/automa-style-selector

## Basic Information

- **Project Name**: automa-style-selector 
- **Description**: QQ群：179430136
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: https://msblog.cc
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-25
- **Last Updated**: 2025-08-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 🎯 智能自动化工具 v2.0

> Chrome扩展：智能选择器捕获 + 工作流录制，支持Automa风格的元素选择和操作序列自动化录制

[![Chrome Extension](https://img.shields.io/badge/Chrome-Extension-green.svg)](https://developer.chrome.com/docs/extensions/)
[![Manifest V3](https://img.shields.io/badge/Manifest-V3-blue.svg)](https://developer.chrome.com/docs/extensions/mv3/)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

## 🚀 新功能特性 (v2.0)

### 🎯 智能选择器模式
- **Automa风格交互**：手动激活选择模式，精确控制
- **悬浮高亮显示**：鼠标悬停时元素实时高亮
- **双重选择器生成**：同时提供XPath和CSS选择器
- **一键复制功能**：快速复制选择器到剪贴板

### 📝 工作流录制模式 (✨ 新增)
- **智能文本录制**：记录表单最终输入值，而非逐字键盘输入
- **操作序列捕获**：自动记录点击、输入、滚动、选择等操作
- **实时动作显示**：录制过程中实时显示捕获的动作
- **符合规范的JSON**：导出的工作流符合标准节点定义规范

### 🔄 双模式切换
- **选择器模式**：专注于元素选择器的精确捕获
- **工作流模式**：完整操作序列的智能录制
- **独立控制**：两种模式可独立使用，互不干扰
- **状态保持**：模式切换时保持各自的数据状态

## 📋 支持的工作流节点类型

### 基础操作节点
- **navigate** - 页面导航
- **click_element** - 元素点击
- **input_text** - 智能文本输入
- **select_option** - 下拉选择
- **scroll** - 页面滚动

### 生成的JSON格式示例
```json
{
  "id": "workflow-recorded-1640995200000",
  "name": "录制的工作流 - 2024/1/24 22:33:15",
  "description": "自动录制于 https://example.com",
  "version": "1.0.0",
  "variables": {
    "baseUrl": "https://example.com",
    "recordedAt": "2024-01-24T14:33:15.000Z"
  },
  "nodes": [
    {
      "id": "navigate-1",
      "type": "navigate",
      "position": { "x": 100, "y": 100 },
      "data": {
        "label": "导航到 https://example.com",
        "parameters": {
          "url": "https://example.com",
          "waitFor": "load",
          "timeout": 30000
        }
      }
    },
    {
      "id": "input_text-2",
      "type": "input_text",
      "position": { "x": 300, "y": 100 },
      "data": {
        "label": "输入文本到 INPUT#username",
        "parameters": {
          "selector": "#username",
          "selectorType": "css",
          "xpath": "//*[@id=\"username\"]",
          "text": "admin@example.com",
          "clearBefore": true,
          "inputType": "type",
          "pressEnter": false
        }
      }
    }
  ],
  "edges": [
    {
      "id": "edge-1",
      "source": "navigate-1",
      "target": "input_text-2",
      "sourceHandle": "success",
      "targetHandle": "input",
      "data": {
        "condition": "always",
        "delay": 1500
      }
    }
  ],
  "metadata": {
    "recordStartTime": 1640995200000,
    "recordEndTime": 1640995230000,
    "totalDuration": 30000,
    "actionsCount": 5,
    "recordedUrl": "https://example.com"
  }
}
```

## 🎮 使用方法

### 安装扩展
1. 下载或克隆此仓库到本地
2. 打开Chrome浏览器，访问 `chrome://extensions/`
3. 开启右上角的"开发者模式"
4. 点击"加载已解压的扩展程序"
5. 选择项目文件夹

### 选择器捕获模式
1. 点击扩展图标打开侧边栏
2. 确保在"🎯 选择器"标签页
3. 点击"🎯 开始选择"按钮
4. 在目标网页上悬停查看高亮，点击元素捕获选择器
5. 在侧边栏中查看XPath和CSS选择器
6. 点击"📋 复制"按钮复制选择器
7. 按ESC键或点击"🚫 停止选择"退出模式

### 工作流录制模式 (✨ 新功能)
1. 点击扩展图标打开侧边栏
2. 切换到"📝 工作流"标签页
3. 点击"🔴 开始录制"按钮
4. 在目标网页上进行正常操作：
   - 🌐 页面导航 (自动检测)
   - 🖱️ 点击按钮、链接等元素
   - ✏️ 在表单中输入文本 (失去焦点时记录完整值)
   - 📋 选择下拉选项
   - 📜 滚动页面
5. 实时查看录制的动作序列
6. 按ESC键或点击"⏹️ 停止录制"结束录制
7. 点击"📤 导出工作流"保存JSON文件

## 📊 界面说明

### 选择器模式界面
```
🎯 智能自动化工具
选择模式：捕获元素选择器 | 录制模式：记录操作序列生成工作流

[🎯 选择器] [📝 工作流]

[🎯 开始选择] [🗑️ 清空记录] [📤 导出选择器]

🎯 选择器已捕获    22:33:15
捕获元素:
标签: BUTTON
ID: submit-btn
Class: btn btn-primary
文本: 提交表单

📍 XPath                    [📋 复制]
//*[@id="submit-btn"]

🎯 CSS选择器                [📋 复制]  
#submit-btn
```

### 工作流模式界面
```
🎯 智能自动化工具
选择模式：捕获元素选择器 | 录制模式：记录操作序列生成工作流

[🎯 选择器] [📝 工作流]

[🔴 开始录制] [🗑️ 清空工作流] [📤 导出工作流]

录制时间: 02:35    动作数量: 8    当前页面: example.com

🌐 页面导航    00:00
导航到: https://example.com

✏️ 文本输入    00:12
输入文本: "admin@example.com"
目标元素: #username

🖱️ 点击元素    00:18
点击元素: #login-btn
选择器类型: css
```

## 🔧 智能录制特性

### 文本输入优化
- **智能合并**：同一输入框的多次编辑会被合并为单个输入动作
- **最终值记录**：只记录失去焦点时的完整文本，忽略中间编辑过程
- **类型检测**：自动识别密码字段等特殊输入类型

### 操作优化
- **页面跳转检测**：自动检测点击导致的页面跳转并记录
- **滚动节流**：避免记录过于频繁的滚动操作
- **重复合并**：相似的连续操作会被智能合并

### 导出格式
- **标准兼容**：完全符合工作流节点定义规范
- **元数据丰富**：包含录制时间、持续时长等详细信息
- **即用格式**：导出的JSON可直接导入支持该规范的自动化平台

## 🛠️ 技术特性

### 扩展架构
- **Manifest V3**：使用最新的Chrome扩展标准
- **Side Panel API**：持久化侧边栏体验
- **Content Scripts**：无干扰页面操作监听
- **Message Passing**：组件间可靠通信

### 兼容性
- **Chrome 114+**：支持Side Panel API的Chrome版本
- **所有网站**：支持在任何网页上使用
- **无依赖**：纯原生JavaScript实现

## 📦 项目结构

```
input-monitor-extension3.0/
├── manifest.json          # 扩展配置文件
├── content.js            # 内容脚本 (选择器+录制)
├── background.js         # 后台服务 Worker
├── sidepanel.html        # 侧边栏界面
├── sidepanel.js          # 侧边栏逻辑
├── icon.png             # 扩展图标
├── popup.html           # 弹窗界面 (备用)
├── popup.js             # 弹窗逻辑 (备用)
├── 快速打包.cmd         # 打包脚本
├── 打包说明.md          # 打包指南
└── README.md           # 项目文档
```

## 🔄 版本历史

### v2.0.0 (2024-01-24) - 工作流录制版本
- ✨ 新增工作流录制模式
- 🎯 智能文本输入录制 (记录最终值而非逐字输入)
- 📝 支持多种操作类型录制 (导航、点击、输入、选择、滚动)
- 🔄 双模式界面设计 (选择器模式 + 工作流模式)
- 📊 实时统计和状态显示
- 📤 符合规范的JSON导出
- 🎨 全新的UI设计和交互体验

### v1.0.0 (2024-01-20) - 基础选择器版本
- 🎯 Automa风格的元素选择功能
- 📍 XPath和CSS选择器生成
- 📋 一键复制功能
- 💾 选择器数据导出
- 🎨 现代化UI设计

## 📄 许可证

本项目基于 [MIT 许可证](LICENSE) 开源。

## 🙏 致谢

- 感谢 [Automa](https://github.com/AutomaApp/automa) 项目的设计灵感
- 感谢Chrome Extension开发社区的支持

---

⭐ **如果这个项目对您有帮助，请给我们一个Star！**