# warmachine7733/interceptor-extension architecture

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

## Overview

API Mock is a local Chromium extension for configuring request mocks and replaying or recording API flows. The main path is user-edited rules and flows in Options, saved in local browser storage, delivered by the bridge to page scripts, then matched against fetch/XHR requests to mock, override, or pass them through. Recording captures feed back into saved flows. The sampled sources show key storage, messaging, and matching links; some UI and interception details are documented in the README but not fully excerpted.

Main entry points: [`bridge.js`](https://github.com/warmachine7733/interceptor-extension/blob/main/bridge.js) (Content Bridge), [`page-interceptor.js`](https://github.com/warmachine7733/interceptor-extension/blob/main/page-interceptor.js) (Request Interceptor), [`options.js`](https://github.com/warmachine7733/interceptor-extension/blob/main/options.js) (Options UI), [`background.js`](https://github.com/warmachine7733/interceptor-extension/blob/main/background.js) (Background Worker)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_configuration["Configuration UI"]
  node_options["Options UI<br/>[options.js]"]
  node_rule_tools["Rule Editing<br/>[options-utils.js]"]
  node_flow_editor["Flow Editor<br/>[options.js]"]
end

subgraph group_runtime["Page Runtime"]
  node_bridge["Content Bridge<br/>[bridge.js]"]
  node_matcher["Rule Matcher<br/>[rules.js]"]
  node_interceptor["Request Interceptor"]
  node_response_override["Mock / Override"]
  node_stylesheet_rules["Stylesheet Rules<br/>[bridge.js]"]
end

subgraph group_recording["Flow Recording"]
  node_flow_capture["Flow Capture"]
  node_flow_replay["Sequential Replay<br/>[rules.js]"]
  node_recording_indicator["Page Indicator"]
end

subgraph group_storage["Local State"]
  node_local_storage[("Local Settings")]
  node_background["Background Worker<br/>[background.js]"]
end

node_developer(("Developer"))
node_web_requests(("Page Requests"))

node_developer -->|"opens settings"| node_options
node_options -.->|"uses editing helpers"| node_rule_tools
node_options -->|"edits flows"| node_flow_editor
node_options -->|"reads and saves"| node_local_storage
node_background -->|"opens page"| node_options
node_background -->|"stores captures"| node_local_storage
node_bridge -->|"reads configuration"| node_local_storage
node_bridge -->|"posts configuration"| node_interceptor
node_interceptor -->|"uses matching functions"| node_matcher
node_web_requests -->|"intercepted by"| node_interceptor
node_interceptor -->|"mocks or rewrites"| node_response_override
node_interceptor -->|"captures requests"| node_flow_capture
node_interceptor -->|"matches replay steps"| node_flow_replay
node_flow_capture -->|"forwards captures"| node_bridge
node_bridge -->|"sends capture message"| node_background
node_bridge -->|"applies stylesheet rules"| node_stylesheet_rules
node_bridge -->|"broadcasts configuration"| node_recording_indicator
node_flow_replay -.->|"supplies flow response"| node_response_override

click node_options "https://github.com/warmachine7733/interceptor-extension/blob/main/options.js"
click node_rule_tools "https://github.com/warmachine7733/interceptor-extension/blob/main/options-utils.js"
click node_flow_editor "https://github.com/warmachine7733/interceptor-extension/blob/main/options.js"
click node_background "https://github.com/warmachine7733/interceptor-extension/blob/main/background.js"
click node_bridge "https://github.com/warmachine7733/interceptor-extension/blob/main/bridge.js"
click node_matcher "https://github.com/warmachine7733/interceptor-extension/blob/main/rules.js"
click node_interceptor "https://github.com/warmachine7733/interceptor-extension/blob/main/page-interceptor.js"
click node_response_override "https://github.com/warmachine7733/interceptor-extension/blob/main/page-interceptor.js"
click node_flow_capture "https://github.com/warmachine7733/interceptor-extension/blob/main/page-interceptor.js"
click node_flow_replay "https://github.com/warmachine7733/interceptor-extension/blob/main/rules.js"
click node_recording_indicator "https://github.com/warmachine7733/interceptor-extension/blob/main/recording-indicator.js"
click node_stylesheet_rules "https://github.com/warmachine7733/interceptor-extension/blob/main/bridge.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_options,node_rule_tools,node_flow_editor toneBlue
class node_bridge,node_matcher,node_interceptor,node_response_override,node_stylesheet_rules toneAmber
class node_flow_capture,node_flow_replay,node_recording_indicator,node_web_requests toneMint
class node_local_storage,node_background toneRose
class node_developer toneIndigo
```

## Components

### Configuration UI

- [Options UI](https://github.com/warmachine7733/interceptor-extension/blob/main/options.js): `options.js`
- [Rule Editing](https://github.com/warmachine7733/interceptor-extension/blob/main/options-utils.js): `options-utils.js`
- [Flow Editor](https://github.com/warmachine7733/interceptor-extension/blob/main/options.js): `options.js`

### Page Runtime

- [Content Bridge](https://github.com/warmachine7733/interceptor-extension/blob/main/bridge.js): `bridge.js`
- [Rule Matcher](https://github.com/warmachine7733/interceptor-extension/blob/main/rules.js): `rules.js`
- [Request Interceptor](https://github.com/warmachine7733/interceptor-extension/blob/main/page-interceptor.js): `page-interceptor.js`
- [Mock / Override](https://github.com/warmachine7733/interceptor-extension/blob/main/page-interceptor.js): `page-interceptor.js`
- [Stylesheet Rules](https://github.com/warmachine7733/interceptor-extension/blob/main/bridge.js): `bridge.js`

### Flow Recording

- [Flow Capture](https://github.com/warmachine7733/interceptor-extension/blob/main/page-interceptor.js): `page-interceptor.js`
- [Sequential Replay](https://github.com/warmachine7733/interceptor-extension/blob/main/rules.js): `rules.js`
- [Page Indicator](https://github.com/warmachine7733/interceptor-extension/blob/main/recording-indicator.js): `recording-indicator.js`

### Local State

- **Local Settings**
- [Background Worker](https://github.com/warmachine7733/interceptor-extension/blob/main/background.js): `background.js`

### Other components

- **Developer**
- **Page Requests**

## Connections

- Developer → Options UI: opens settings (evidence: `README.md`)
- Options UI → Rule Editing: uses editing helpers
- Options UI → Flow Editor: edits flows (evidence: `options.js`)
- Options UI → Local Settings: reads and saves (evidence: `options.js`)
- Background Worker → Options UI: opens page (evidence: `background.js`)
- Background Worker → Local Settings: stores captures (evidence: `background.js`)
- Content Bridge → Local Settings: reads configuration (evidence: `bridge.js`)
- Content Bridge → Request Interceptor: posts configuration (evidence: `bridge.js`)
- Request Interceptor → Rule Matcher: uses matching functions (evidence: `page-interceptor.js`)
- Page Requests → Request Interceptor: intercepted by (evidence: `README.md`)
- Request Interceptor → Mock / Override: mocks or rewrites (evidence: `README.md`)
- Request Interceptor → Flow Capture: captures requests (evidence: `page-interceptor.js`)
- Request Interceptor → Sequential Replay: matches replay steps (evidence: `page-interceptor.js`)
- Flow Capture → Content Bridge: forwards captures (evidence: `bridge.js`)
- Content Bridge → Background Worker: sends capture message (evidence: `bridge.js`)
- Content Bridge → Stylesheet Rules: applies stylesheet rules (evidence: `bridge.js`)
- Content Bridge → Page Indicator: broadcasts configuration (evidence: `recording-indicator.js`)
- Sequential Replay → Mock / Override: supplies flow response