# zhongchongan/easyspider architecture

> Architecture diagram of the GitHub repository zhongchongan/easyspider, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-30). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/zhongchongan/easyspider
- Repository: https://github.com/zhongchongan/easyspider

## Overview

EasySpider is a visual, no-code browser automation and web data collection product, with both desktop and command-line execution modes. The documented user journey is to select page elements, configure extraction or interaction steps, and execute the resulting task. The graph includes the desktop, browser-extension design surface, execution runtime, and its browser-driver layer. Some subsystem relationships are based on README descriptions; unsampled task-editor and server internals are shown without asserting unverified call paths.

Main entry points: [`ExecuteStage/easyspider_executestage.py`](https://github.com/zhongchongan/easyspider/blob/master/ExecuteStage/easyspider_executestage.py) (Task runner), [`ExecuteStage/undetected_chromedriver_ES/__init__.py`](https://github.com/zhongchongan/easyspider/blob/master/ExecuteStage/undetected_chromedriver_ES/__init__.py) (Chrome driver), [`Extension/manifest_v3/src/content-scripts/main.js`](https://github.com/zhongchongan/easyspider/blob/master/Extension/manifest_v3/src/content-scripts/main.js) (Page selection UI), [`ExecuteStage/myChrome.py`](https://github.com/zhongchongan/easyspider/blob/master/ExecuteStage/myChrome.py) (Browser adapter)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_desktop["Desktop application"]
  node_desktop_ui["Desktop interface<br/>[index.js]"]
  node_desktop_main["Desktop controller<br/>[main.js]"]
  node_desktop_server["Desktop service<br/>[server.js]"]
end

subgraph group_designer["Visual task design"]
  node_task_editor["Task flow editor<br/>[FlowChart.js]"]
  node_extension_entry["Page selection UI<br/>[main.js]"]
  node_selection_state["Element selection<br/>[global.js]"]
  node_selection_toolkit["Selection toolkit<br/>[toolkit.vue]"]
  node_iframe_view["Iframe support<br/>[iframe.vue]"]
  node_extension_messages["Message interaction"]
  node_extension_trail["Page trail<br/>[trail.js]"]
end

subgraph group_execution["Task execution"]
  node_execution_cli["Task runner"]
  node_single_runner["Single-task runner"]
  node_runtime_utils["Execution utilities<br/>[utils.py]"]
  node_custom_code["Custom code<br/>[myCode.py]"]
  node_task_service["Task configuration"]
end

subgraph group_browser["Browser automation"]
  node_browser_api["Browser adapter<br/>[myChrome.py]"]
  node_uc_core["Chrome driver<br/>[__init__.py]"]
  node_uc_options["Driver options<br/>[options.py]"]
  node_uc_patcher["Driver patching<br/>[patcher.py]"]
  node_uc_process["Driver process<br/>[dprocess.py]"]
  node_uc_cdp["DevTools protocol<br/>[cdp.py]"]
  node_uc_reactor["Event reactor<br/>[reactor.py]"]
  node_uc_element["Web elements<br/>[webelement.py]"]
end

node_user(("Task designer"))
node_browser["Chrome browser"]
node_web_page["Target website"]
node_collected_data["Collected output"]
node_remote_service["Remote task service"]

node_user -->|"starts design"| node_desktop_ui
node_desktop_ui -->|"requests design"| node_desktop_main
node_user -.->|"configures task"| node_task_editor
node_user -->|"selects elements"| node_extension_entry
node_extension_entry -->|"uses selection"| node_selection_state
node_extension_entry -->|"renders toolkit"| node_selection_toolkit
node_extension_entry -->|"renders iframe view"| node_iframe_view
node_selection_toolkit -->|"generates parameters"| node_selection_state
node_selection_toolkit -.->|"uses messaging"| node_extension_messages
node_extension_trail -->|"uses page state"| node_selection_state
node_desktop_main -.->|"configures service"| node_desktop_server
node_user -->|"runs task"| node_execution_cli
node_execution_cli -->|"imports utilities"| node_runtime_utils
node_execution_cli -->|"uses browser"| node_browser_api
node_execution_cli -->|"loads task config"| node_task_service
node_execution_cli -->|"queries task"| node_remote_service
node_single_runner -.->|"uses browser"| node_browser_api
node_execution_cli -.->|"invokes custom code"| node_custom_code
node_browser_api -->|"uses driver"| node_uc_core
node_uc_core -->|"configures options"| node_uc_options
node_uc_core -->|"patches driver"| node_uc_patcher
node_uc_core -->|"manages process"| node_uc_process
node_uc_core -->|"dispatches events"| node_uc_reactor
node_uc_core -.->|"uses DevTools"| node_uc_cdp
node_uc_core -.->|"provides elements"| node_uc_element
node_browser_api -->|"controls browser"| node_browser
node_browser -->|"interacts with page"| node_web_page
node_execution_cli -->|"collects results"| node_collected_data

click node_desktop_ui "https://github.com/zhongchongan/easyspider/blob/master/ElectronJS/src/index.js"
click node_desktop_main "https://github.com/zhongchongan/easyspider/blob/master/ElectronJS/main.js"
click node_desktop_server "https://github.com/zhongchongan/easyspider/blob/master/ElectronJS/server.js"
click node_task_editor "https://github.com/zhongchongan/easyspider/blob/master/ElectronJS/src/taskGrid/FlowChart.js"
click node_extension_entry "https://github.com/zhongchongan/easyspider/blob/master/Extension/manifest_v3/src/content-scripts/main.js"
click node_selection_state "https://github.com/zhongchongan/easyspider/blob/master/Extension/manifest_v3/src/content-scripts/global.js"
click node_selection_toolkit "https://github.com/zhongchongan/easyspider/blob/master/Extension/manifest_v3/src/content-scripts/toolkit.vue"
click node_iframe_view "https://github.com/zhongchongan/easyspider/blob/master/Extension/manifest_v3/src/content-scripts/iframe.vue"
click node_extension_messages "https://github.com/zhongchongan/easyspider/blob/master/Extension/manifest_v3/src/content-scripts/messageInteraction.js"
click node_extension_trail "https://github.com/zhongchongan/easyspider/blob/master/Extension/manifest_v3/src/content-scripts/trail.js"
click node_execution_cli "https://github.com/zhongchongan/easyspider/blob/master/ExecuteStage/easyspider_executestage.py"
click node_single_runner "https://github.com/zhongchongan/easyspider/blob/master/ExecuteStage/easyspider_executestage_single.py"
click node_runtime_utils "https://github.com/zhongchongan/easyspider/blob/master/ExecuteStage/utils.py"
click node_custom_code "https://github.com/zhongchongan/easyspider/blob/master/ExecuteStage/myCode.py"
click node_task_service "https://github.com/zhongchongan/easyspider/tree/master/ExecuteStage"
click node_browser_api "https://github.com/zhongchongan/easyspider/blob/master/ExecuteStage/myChrome.py"
click node_uc_core "https://github.com/zhongchongan/easyspider/blob/master/ExecuteStage/undetected_chromedriver_ES/__init__.py"
click node_uc_options "https://github.com/zhongchongan/easyspider/blob/master/ExecuteStage/undetected_chromedriver_ES/options.py"
click node_uc_patcher "https://github.com/zhongchongan/easyspider/blob/master/ExecuteStage/undetected_chromedriver_ES/patcher.py"
click node_uc_process "https://github.com/zhongchongan/easyspider/blob/master/ExecuteStage/undetected_chromedriver_ES/dprocess.py"
click node_uc_cdp "https://github.com/zhongchongan/easyspider/blob/master/ExecuteStage/undetected_chromedriver_ES/cdp.py"
click node_uc_reactor "https://github.com/zhongchongan/easyspider/blob/master/ExecuteStage/undetected_chromedriver_ES/reactor.py"
click node_uc_element "https://github.com/zhongchongan/easyspider/blob/master/ExecuteStage/undetected_chromedriver_ES/webelement.py"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_desktop_ui,node_desktop_main,node_desktop_server,node_browser toneBlue
class node_task_editor,node_extension_entry,node_selection_state,node_selection_toolkit,node_iframe_view,node_extension_messages,node_extension_trail toneAmber
class node_execution_cli,node_single_runner,node_runtime_utils,node_custom_code,node_task_service toneMint
class node_browser_api,node_uc_core,node_uc_options,node_uc_patcher,node_uc_process,node_uc_cdp,node_uc_reactor,node_uc_element,node_user,node_remote_service toneRose
class node_web_page,node_collected_data toneIndigo
```

## Components

### Desktop application

- [Desktop interface](https://github.com/zhongchongan/easyspider/blob/master/ElectronJS/src/index.js): `ElectronJS/src/index.js`
- [Desktop controller](https://github.com/zhongchongan/easyspider/blob/master/ElectronJS/main.js): `ElectronJS/main.js`
- [Desktop service](https://github.com/zhongchongan/easyspider/blob/master/ElectronJS/server.js): `ElectronJS/server.js`

### Visual task design

- [Task flow editor](https://github.com/zhongchongan/easyspider/blob/master/ElectronJS/src/taskGrid/FlowChart.js): `ElectronJS/src/taskGrid/FlowChart.js`
- [Page selection UI](https://github.com/zhongchongan/easyspider/blob/master/Extension/manifest_v3/src/content-scripts/main.js): `Extension/manifest_v3/src/content-scripts/main.js`
- [Element selection](https://github.com/zhongchongan/easyspider/blob/master/Extension/manifest_v3/src/content-scripts/global.js): `Extension/manifest_v3/src/content-scripts/global.js`
- [Selection toolkit](https://github.com/zhongchongan/easyspider/blob/master/Extension/manifest_v3/src/content-scripts/toolkit.vue): `Extension/manifest_v3/src/content-scripts/toolkit.vue`
- [Iframe support](https://github.com/zhongchongan/easyspider/blob/master/Extension/manifest_v3/src/content-scripts/iframe.vue): `Extension/manifest_v3/src/content-scripts/iframe.vue`
- [Message interaction](https://github.com/zhongchongan/easyspider/blob/master/Extension/manifest_v3/src/content-scripts/messageInteraction.js): `Extension/manifest_v3/src/content-scripts/messageInteraction.js`
- [Page trail](https://github.com/zhongchongan/easyspider/blob/master/Extension/manifest_v3/src/content-scripts/trail.js): `Extension/manifest_v3/src/content-scripts/trail.js`

### Task execution

- [Task runner](https://github.com/zhongchongan/easyspider/blob/master/ExecuteStage/easyspider_executestage.py): `ExecuteStage/easyspider_executestage.py`
- [Single-task runner](https://github.com/zhongchongan/easyspider/blob/master/ExecuteStage/easyspider_executestage_single.py): `ExecuteStage/easyspider_executestage_single.py`
- [Execution utilities](https://github.com/zhongchongan/easyspider/blob/master/ExecuteStage/utils.py): `ExecuteStage/utils.py`
- [Custom code](https://github.com/zhongchongan/easyspider/blob/master/ExecuteStage/myCode.py): `ExecuteStage/myCode.py`
- [Task configuration](https://github.com/zhongchongan/easyspider/tree/master/ExecuteStage): `ExecuteStage`

### Browser automation

- [Browser adapter](https://github.com/zhongchongan/easyspider/blob/master/ExecuteStage/myChrome.py): `ExecuteStage/myChrome.py`
- [Chrome driver](https://github.com/zhongchongan/easyspider/blob/master/ExecuteStage/undetected_chromedriver_ES/__init__.py): `ExecuteStage/undetected_chromedriver_ES/__init__.py`
- [Driver options](https://github.com/zhongchongan/easyspider/blob/master/ExecuteStage/undetected_chromedriver_ES/options.py): `ExecuteStage/undetected_chromedriver_ES/options.py`
- [Driver patching](https://github.com/zhongchongan/easyspider/blob/master/ExecuteStage/undetected_chromedriver_ES/patcher.py): `ExecuteStage/undetected_chromedriver_ES/patcher.py`
- [Driver process](https://github.com/zhongchongan/easyspider/blob/master/ExecuteStage/undetected_chromedriver_ES/dprocess.py): `ExecuteStage/undetected_chromedriver_ES/dprocess.py`
- [DevTools protocol](https://github.com/zhongchongan/easyspider/blob/master/ExecuteStage/undetected_chromedriver_ES/cdp.py): `ExecuteStage/undetected_chromedriver_ES/cdp.py`
- [Event reactor](https://github.com/zhongchongan/easyspider/blob/master/ExecuteStage/undetected_chromedriver_ES/reactor.py): `ExecuteStage/undetected_chromedriver_ES/reactor.py`
- [Web elements](https://github.com/zhongchongan/easyspider/blob/master/ExecuteStage/undetected_chromedriver_ES/webelement.py): `ExecuteStage/undetected_chromedriver_ES/webelement.py`

### Other components

- **Task designer**
- **Chrome browser**
- **Target website**
- **Collected output**
- **Remote task service**

## Connections

- Task designer → Desktop interface: starts design
- Desktop interface → Desktop controller: requests design (evidence: `ElectronJS/src/index.js`)
- Task designer → Task flow editor: configures task
- Task designer → Page selection UI: selects elements
- Page selection UI → Element selection: uses selection (evidence: `Extension/manifest_v3/src/content-scripts/main.js`)
- Page selection UI → Selection toolkit: renders toolkit (evidence: `Extension/manifest_v3/src/content-scripts/main.js`)
- Page selection UI → Iframe support: renders iframe view (evidence: `Extension/manifest_v3/src/content-scripts/main.js`)
- Selection toolkit → Element selection: generates parameters (evidence: `Extension/manifest_v3/src/content-scripts/toolkit.vue`)
- Selection toolkit → Message interaction: uses messaging (evidence: `Extension/manifest_v3/src/content-scripts/toolkit.vue`)
- Page trail → Element selection: uses page state (evidence: `Extension/manifest_v3/src/content-scripts/trail.js`)
- Desktop controller → Desktop service: configures service
- Task designer → Task runner: runs task
- Task runner → Execution utilities: imports utilities (evidence: `ExecuteStage/easyspider_executestage.py`)
- Task runner → Browser adapter: uses browser (evidence: `ExecuteStage/easyspider_executestage.py`)
- Task runner → Task configuration: loads task config (evidence: `ExecuteStage/easyspider_executestage.py`)
- Task runner → Remote task service: queries task (evidence: `ExecuteStage/easyspider_executestage.py`)
- Single-task runner → Browser adapter: uses browser
- Task runner → Custom code: invokes custom code
- Browser adapter → Chrome driver: uses driver (evidence: `ExecuteStage/myChrome.py`)
- Chrome driver → Driver options: configures options (evidence: `ExecuteStage/undetected_chromedriver_ES/__init__.py`)
- Chrome driver → Driver patching: patches driver (evidence: `ExecuteStage/undetected_chromedriver_ES/__init__.py`)
- Chrome driver → Driver process: manages process (evidence: `ExecuteStage/undetected_chromedriver_ES/__init__.py`)
- Chrome driver → Event reactor: dispatches events (evidence: `ExecuteStage/undetected_chromedriver_ES/__init__.py`)
- Chrome driver → DevTools protocol: uses DevTools (evidence: `ExecuteStage/undetected_chromedriver_ES/__init__.py`)
- Chrome driver → Web elements: provides elements (evidence: `ExecuteStage/undetected_chromedriver_ES/__init__.py`)
- Browser adapter → Chrome browser: controls browser
- Chrome browser → Target website: interacts with page
- Task runner → Collected output: collects results