# WebCef3Trigger **Repository Path**: MoSheng2020/web-cef3-trigger ## Basic Information - **Project Name**: WebCef3Trigger - **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-01-22 - **Last Updated**: 2026-01-23 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # WebCef3Trigger 远程触发 CEF3 浏览器的完整方案，使用 FBroSharp 和 WebSocket 实现浏览器自动化。 ## 系统架构 ``` ┌─────────────┐ WebSocket ┌─────────────┐ Process.Start ┌─────────────┐ │ Node.js │ ◄──────────────► │ C# 客户端 │ ◄──────────────────► │ CEF3 浏览器 │ │ 服务端 │ │ (.NET 4.8) │ │ (FBro) │ └─────────────┘ └─────────────┘ └─────────────┘ │ │ │ fbro-mcp 工具集 │ └────────────────────────────────────────────────────────────────────┘ ``` ## 项目结构 ``` WebCef3Trigger/ ├── server/ # Node.js WebSocket 服务端 + 网页端控制台 │ ├── package.json │ ├── server.js # WebSocket 服务器主入口 │ ├── browserManager.js # 浏览器实例管理 │ └── commandHandler.js # fbro-mcp 命令处理 (CDP) │ ├── CSharpClient/ # C# WebSocket 客户端 │ ├── CSharpClient.csproj │ ├── Program.cs │ ├── WebSocketClient.cs # WebSocket 通信 │ ├── BrowserLauncher.cs # 浏览器进程管理 │ ├── MainForm.cs # 主窗体 │ └── MainForm.Designer.cs │ ├── FBroBrowser/ # FBro CEF3 浏览器 │ ├── FBroBrowser.csproj │ ├── Program.cs # 主入口，命令行解析 │ ├── BrowserConfig.cs # 配置数据类 │ ├── FBroInitializer.cs # FBroSharp 初始化 │ ├── FBroWebSocketClient.cs # WebSocket 通信 │ ├── MainForm.cs # 浏览器窗体 │ └── MainForm.Designer.cs │ ├── WebCef3Trigger.sln # Visual Studio 解决方案 ├── CLAUDE.md # Claude Code 指南 └── README.md # 本文件 ``` ## 快速开始 ### 1. 安装 Node.js 依赖 ```bash cd server npm install ``` ### 2. 启动 Node.js 服务端 ```bash cd server npm start # 或 node server.js ``` 服务端将在端口 8080 启动。 ### 2.1 server（网页端控制台）说明（重要） `server` 不仅是 WebSocket 服务端，也提供一个**网页端控制台**，用于： - 在浏览器里点击按钮发起 `launch_browser`（启动 FBroBrowser） - 对已启动的浏览器发送自动化命令（导航/执行JS/截图等） 启动 `server` 后，在本机打开网页端页面： - `http://localhost:8080/` 页面位于 `server/public/index.html`，按钮点击后会通过 WebSocket/HTTP（以当前实现为准）把“启动浏览器/执行命令”的请求发给后端。 ![91fbd1d972ed610f6d4385d600e4b3e6](https://img.msblog.cc/img/91fbd1d972ed610f6d4385d600e4b3e6.png) ### 3. 构建 C# 项目 使用 Visual Studio 打开 `WebCef3Trigger.sln`，或使用命令行： ```bash # 还原 NuGet 包 nuget restore WebCef3Trigger.sln # 构建解决方案 msbuild WebCef3Trigger.sln /p:Configuration=Debug ``` **注意**: FBroBrowser 项目需要安装 FBroSharp.Common NuGet 包（版本 4.21.42）。 ### 4. 运行 C# 客户端 启动 `CSharpClient.exe`，点击 "Connect" 连接到服务端。 ### 5. 启动浏览器 在 C# 客户端中： 1. 输入目标 URL 2. 设置窗口大小 3. 点击 "Launch" 启动浏览器 ### 5.1 CSharpClient 里需要修改 FBroBrowser.exe 路径（重要） 编译 `FBroBrowser` 后，`CSharpClient` 通过 `Process.Start()` 启动 `FBroBrowser.exe`。 默认路径在 `CSharpClient/BrowserLauncher.cs` 构造函数里： - 文件：`CSharpClient/BrowserLauncher.cs` - 位置：`BrowserLauncher(string browserExePath = null)` 中的 `_browserExePath` - 当前默认值（你需要按实际输出目录修改）： `T:\vue\WebCef3Trigger\FBroBrowser\bin\Debug\FBroBrowser.exe` 你可以用两种方式改： 1) 直接改默认路径（最简单） 2) 在创建 `BrowserLauncher` 时传入 `browserExePath`（更灵活，适合不同机器/不同配置） ## 消息协议 所有 WebSocket 通信使用 JSON 格式： ```json { "type": "message_type", "data": { ... } } ``` ### 消息类型 | 类型 | 方向 | 说明 | |------|------|------| | `register_client` | C# → Server | 客户端注册 | | `register_response` | Server → C# | 注册响应 | | `launch_browser` | Server → C# | 启动浏览器请求 | | `browser_ready` | FBro → Server | 浏览器就绪通知 | | `fbro_command` | Server → FBro | 自动化命令 | | `command_result` | FBro → Server | 命令执行结果 | | `close_browser` | Server → C# | 关闭浏览器请求 | | `error` | Any → Any | 错误通知 | ## 支持的自动化命令 通过 Chrome DevTools Protocol (CDP) 执行： - **导航**: `navigate`, `go_back`, `go_forward`, `refresh` - **交互**: `click`, `type` - **获取**: `screenshot`, `get_text`, `get_html`, `evaluate` - **等待**: `wait_for_element` ### 命令示例 ```javascript // 导航到 URL { "type": "fbro_command", "data": { "browserId": 1, "command": "navigate", "params": { "url": "https://www.baidu.com" } } } // 点击元素 { "type": "fbro_command", "data": { "browserId": 1, "command": "click", "params": { "selector": "#submit-btn" } } } // 执行 JavaScript { "type": "fbro_command", "data": { "browserId": 1, "command": "evaluate", "params": { "expression": "document.title" } } } ``` ## FBroSharp 配置 FBroSharp 初始化使用以下配置： ```csharp FBroSharpInitSet: - no_sandbox = true // Windows 必需 - multi_threaded_message_loop = true // 独立消息循环线程 - cache_path = %LocalAppData%\FBroCache - user_data_path = %LocalAppData%\FBroUserData - locale = "zh-CN" - remote_debugging_port = [动态分配] // 从 9222 开始 - persist_session_cookies = true - persist_user_preferences = true - enableprocessmessage = true ``` **重要提示**: - 使用 `FBroSharp.FBroSharp.Initialize(initSet)` 初始化，**不是** `FBroSharpSetValue` - 命令行处理必须使用 `IFBroSharpCommandLine`（带 `I` 前缀） - `Shutdown` 需要 bool 参数 ## 测试验证 ### 测试 1：基础连接 1. 启动 Node.js 服务端 2. 启动 C# 客户端 3. 验证 WebSocket 连接成功 ### 测试 2：浏览器启动 1. 通过 C# 客户端发送启动请求 2. 验证 FBro 浏览器窗口打开 3. 验证 `browser_ready` 消息返回 ### 测试 3：自动化操作 1. 发送 `navigate` 命令导航到测试页面 2. 发送 `click` 命令点击元素 3. 发送 `screenshot` 命令截图验证 ## 安全注意事项 1. **URL 验证**: C# 客户端包含 URL 清理，防止加载非 http(s) 协议 2. **进程隔离**: 每个浏览器作为独立进程运行，使用唯一调试端口 3. **沙箱配置**: 浏览器以 `no_sandbox=true` 运行以保证兼容性 4. **WebSocket 认证**: 生产环境建议实现基于令牌的认证 ## 依赖项 ### Node.js - `ws` - WebSocket 服务器 - `chrome-remote-interface` - Chrome DevTools Protocol 客户端 ### C# (.NET 4.8) - `Newtonsoft.Json` - JSON 序列化 - `FBroSharp.Common` (4.21.42) - CEF3 浏览器框架 ## 许可证 MIT License ### 请我喝一杯 ☕

支付宝

支付宝

微信

微信
### 联系方式： QQ：1098901025 微信：zhx_ms > 添加请注明来意