# hangga/webslurp architecture

> Architecture diagram of the GitHub repository hangga/webslurp, 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/hangga/webslurp
- Repository: https://github.com/hangga/webslurp

## Overview

WebSlurp is a Chrome DevTools extension for capturing, analyzing, editing, and replaying HTTP requests. The workflow starts in the DevTools panel, captures traffic from the inspected page, presents requests for filtering and editing, and replays requests for response inspection or concurrent race testing. Supporting layers hold shared state, parsing helpers, and persisted session/settings data. The README documents IDOR analysis and other security capabilities; sampled source does not expose every analysis path, so those connections are shown only where documented.

Main entry points: [`modules/network.js`](https://github.com/hangga/webslurp/blob/main/modules/network.js) (Capture and replay), [`modules/render.js`](https://github.com/hangga/webslurp/blob/main/modules/render.js) (Request and response view), [`panel.js`](https://github.com/hangga/webslurp/blob/main/panel.js) (Panel entry), [`modules/storage.js`](https://github.com/hangga/webslurp/blob/main/modules/storage.js) (Logs and settings)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_panel["DevTools panel"]
  node_panel_entry["Panel entry<br/>[panel.js]"]
  node_editor_events["Request editor events<br/>[events.js]"]
  node_request_view["Request and response view<br/>[render.js]"]
  node_request_filter["Request filtering<br/>[filter.js]"]
end

subgraph group_traffic["Capture and replay"]
  node_capture_replay["Capture and replay<br/>[network.js]"]
end

subgraph group_analysis["Analysis and inspection"]
  node_security_analysis["Security analysis<br/>[security.js]"]
  node_refresh["Session refresh<br/>[refresh.js]"]
end

subgraph group_support["State and persistence"]
  node_format_helpers["Parsing helpers<br/>[helpers.js]"]
  node_shared_state["Shared UI and request state<br/>[state.js]"]
  node_session_storage["Logs and settings<br/>[storage.js]"]
end

node_tester(("Security tester"))
node_devtools["DevTools host"]
node_inspected["Inspected page"]
node_http["HTTP services"]
node_chrome_storage[("Chrome local storage")]

node_tester -->|"opens panel"| node_devtools
node_devtools -->|"loads panel"| node_panel_entry
node_panel_entry -->|"starts capture"| node_capture_replay
node_inspected -.->|"provides traffic"| node_capture_replay
node_capture_replay -->|"saves logs"| node_session_storage
node_capture_replay -->|"refreshes list"| node_request_view
node_capture_replay -->|"checks authorization"| node_security_analysis
node_capture_replay -->|"sends requests"| node_http
node_request_view -->|"sends edited request"| node_capture_replay
node_request_view -->|"filters logs"| node_request_filter
node_request_view -->|"formats details"| node_format_helpers
node_editor_events -->|"persists edits"| node_session_storage
node_editor_events -->|"rerenders detail"| node_request_view
node_editor_events -->|"starts race test"| node_capture_replay
node_panel_entry -->|"imports and saves logs"| node_session_storage
node_panel_entry -->|"refreshes session"| node_refresh
node_panel_entry -->|"renders list"| node_request_view
node_refresh -->|"loads logs"| node_session_storage
node_refresh -->|"renders session"| node_request_view
node_session_storage -->|"reads and writes"| node_chrome_storage
node_panel_entry -->|"uses UI state"| node_shared_state
node_capture_replay -->|"uses request state"| node_shared_state
node_request_view -->|"uses view state"| node_shared_state
node_security_analysis -.->|"adds findings"| node_request_view

click node_panel_entry "https://github.com/hangga/webslurp/blob/main/panel.js"
click node_editor_events "https://github.com/hangga/webslurp/blob/main/modules/events.js"
click node_request_view "https://github.com/hangga/webslurp/blob/main/modules/render.js"
click node_request_filter "https://github.com/hangga/webslurp/blob/main/modules/filter.js"
click node_capture_replay "https://github.com/hangga/webslurp/blob/main/modules/network.js"
click node_security_analysis "https://github.com/hangga/webslurp/blob/main/modules/security.js"
click node_refresh "https://github.com/hangga/webslurp/blob/main/modules/refresh.js"
click node_format_helpers "https://github.com/hangga/webslurp/blob/main/modules/helpers.js"
click node_shared_state "https://github.com/hangga/webslurp/blob/main/modules/state.js"
click node_session_storage "https://github.com/hangga/webslurp/blob/main/modules/storage.js"

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_panel_entry,node_editor_events,node_request_view,node_request_filter toneBlue
class node_capture_replay,node_chrome_storage toneAmber
class node_security_analysis,node_refresh toneMint
class node_format_helpers,node_shared_state,node_session_storage toneRose
class node_tester,node_devtools,node_inspected,node_http toneIndigo
```

## Components

### DevTools panel

- [Panel entry](https://github.com/hangga/webslurp/blob/main/panel.js): `panel.js`
- [Request editor events](https://github.com/hangga/webslurp/blob/main/modules/events.js): `modules/events.js`
- [Request and response view](https://github.com/hangga/webslurp/blob/main/modules/render.js): `modules/render.js`
- [Request filtering](https://github.com/hangga/webslurp/blob/main/modules/filter.js): `modules/filter.js`

### Capture and replay

- [Capture and replay](https://github.com/hangga/webslurp/blob/main/modules/network.js): `modules/network.js`

### Analysis and inspection

- [Security analysis](https://github.com/hangga/webslurp/blob/main/modules/security.js): `modules/security.js`
- [Session refresh](https://github.com/hangga/webslurp/blob/main/modules/refresh.js): `modules/refresh.js`

### State and persistence

- [Parsing helpers](https://github.com/hangga/webslurp/blob/main/modules/helpers.js): `modules/helpers.js`
- [Shared UI and request state](https://github.com/hangga/webslurp/blob/main/modules/state.js): `modules/state.js`
- [Logs and settings](https://github.com/hangga/webslurp/blob/main/modules/storage.js): `modules/storage.js`

### Other components

- **Security tester**
- **DevTools host**
- **Inspected page**
- **HTTP services**
- **Chrome local storage**

## Connections

- Security tester → DevTools host: opens panel (evidence: `readme.md`)
- DevTools host → Panel entry: loads panel
- Panel entry → Capture and replay: starts capture (evidence: `panel.js`)
- Inspected page → Capture and replay: provides traffic (evidence: `readme.md`)
- Capture and replay → Logs and settings: saves logs (evidence: `modules/network.js`)
- Capture and replay → Request and response view: refreshes list (evidence: `modules/network.js`)
- Capture and replay → Security analysis: checks authorization (evidence: `modules/network.js`)
- Capture and replay → HTTP services: sends requests (evidence: `modules/network.js`)
- Request and response view → Capture and replay: sends edited request (evidence: `modules/render.js`)
- Request and response view → Request filtering: filters logs (evidence: `modules/render.js`)
- Request and response view → Parsing helpers: formats details (evidence: `modules/render.js`)
- Request editor events → Logs and settings: persists edits (evidence: `modules/events.js`)
- Request editor events → Request and response view: rerenders detail (evidence: `modules/events.js`)
- Request editor events → Capture and replay: starts race test (evidence: `modules/events.js`)
- Panel entry → Logs and settings: imports and saves logs (evidence: `panel.js`)
- Panel entry → Session refresh: refreshes session (evidence: `panel.js`)
- Panel entry → Request and response view: renders list (evidence: `panel.js`)
- Session refresh → Logs and settings: loads logs (evidence: `modules/refresh.js`)
- Session refresh → Request and response view: renders session (evidence: `modules/refresh.js`)
- Logs and settings → Chrome local storage: reads and writes (evidence: `modules/storage.js`)
- Panel entry → Shared UI and request state: uses UI state (evidence: `panel.js`)
- Capture and replay → Shared UI and request state: uses request state (evidence: `modules/network.js`)
- Request and response view → Shared UI and request state: uses view state (evidence: `modules/render.js`)
- Security analysis → Request and response view: adds findings (evidence: `readme.md`)