# web-auto-plugin

**Repository Path**: copper-core/web-auto-plugin

## Basic Information

- **Project Name**: web-auto-plugin
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-11
- **Last Updated**: 2026-05-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Web Auto Plugin

一个浏览器自动化插件，可以接收客户端指令并对页面元素进行操作。

## 功能特性

- 支持点击操作（click）
- 支持输入文本操作（input）
- 支持页面截图功能（screenshot）

## 文件结构

```
web-auto-plugin/
├── manifest.json    # 插件配置文件
├── background.js    # 后台服务脚本
├── content.js       # 内容脚本（WebSocket客户端）
├── server.js        # Node.js服务端（WebSocket/HTTP服务器）
└── README.md        # 说明文档
```

## 安装说明

### 1. 安装依赖

```bash
npm install ws
```

### 2. 启动服务端

```bash
node server.js
```

### 3. 安装浏览器插件

1. 打开 Chrome 浏览器
2. 访问 `chrome://extensions/`
3. 开启右上角的「开发者模式」
4. 点击「加载已解压的扩展程序」
5. 选择 `web-auto-plugin` 目录

## 使用方法

### 方式一：HTTP API

发送 POST 请求到 `http://127.0.0.1:8888/execute`

```bash
# 点击操作
curl -X POST http://127.0.0.1:8888/execute \
  -H "Content-Type: application/json" \
  -d '{"action": "click", "selector": "button.submit"}'

# 输入操作
curl -X POST http://127.0.0.1:8888/execute \
  -H "Content-Type: application/json" \
  -d '{"action": "input", "selector": "input.username", "value": "testuser"}'

# 截图操作
curl -X POST http://127.0.0.1:8888/execute \
  -H "Content-Type: application/json" \
  -d '{"action": "screenshot", "filename": "my-screenshot.png"}'
```

### 方式二：WebSocket

连接到 `ws://127.0.0.1:8888` 并发送消息：

```javascript
const ws = new WebSocket('ws://127.0.0.1:8888');

ws.onopen = () => {
  // 点击操作
  ws.send(JSON.stringify({ action: 'click', selector: 'button' }));
  
  // 输入操作
  ws.send(JSON.stringify({ action: 'input', selector: 'input[type="text"]', value: 'Hello World' }));
  
  // 截图操作
  ws.send(JSON.stringify({ action: 'screenshot', filename: 'screenshot.png' }));
};
```

### 方式三：浏览器控制台

在浏览器控制台直接调用：

```javascript
// 点击元素
executeAction('click', 'button.submit');

// 输入文本
executeAction('input', 'input.username', 'myusername');
```

## API 参数

| 参数 | 类型 | 必填 | 说明 |
|------|------|------|------|
| action | string | 是 | 操作类型：`click`、`input` 或 `screenshot` |
| selector | string | 否 | CSS选择器，用于定位元素（click 和 input 操作必填） |
| value | string | 否 | 输入操作时的文本内容 |
| filename | string | 否 | 截图保存的文件名（screenshot 操作可选） |

## 支持的操作类型

- **click**: 点击指定元素
- **input**: 向指定元素输入文本
- **screenshot**: 截取当前页面并保存为 PNG 图片，返回文件路径

## 截图功能说明

截图操作会自动捕获当前活动标签页的可见区域，并保存为 PNG 格式图片。

### 截图返回格式

```json
{
  "success": true,
  "message": "截图已保存",
  "filePath": "C:\\Users\\YourName\\Downloads\\screenshot-2026-05-08T10-30-00-000Z.png"
}
```

### 截图文件名

- 如果未指定 `filename` 参数，系统会自动生成带时间戳的文件名，格式为：`screenshot-YYYY-MM-DDTHH-MM-SS-SSSZ.png`
- 如果指定了 `filename`，则使用指定的文件名保存

## 注意事项

1. 确保服务端已启动
2. 插件需要在目标页面加载后才能生效
3. 选择器需要准确匹配页面元素
4. 某些网站可能有反爬机制，使用时请遵守网站规则