HTTP Visual

About

Visualize HTTP requests from the active tab in Chrome Side Panel with smart decoding for query and headers.

### Detailed description

**HTTP Visual** helps web developers, API engineers and testers quickly understand real HTTP traffic sent by the current browser tab, without switching away from the page or digging through complex DevTools panels.

The extension appears as a **Side Panel** and shows a lightweight, read‑only view of requests, focused on “seeing and understanding” rather than modifying traffic.

#### Key features

- **Active‑tab only, read‑only view**
  - Only captures requests from the **currently active tab**.
  - Does **not** modify, block or replay any requests.
  - No persistence: data is kept in memory only for the current page session.

- **HTTP request list with expandable details**
  - Shows method, host, path, status (or `ERR` on failures), start time and duration (ms).
  - Displays newest requests at the top in reverse chronological order.
  - Each request can be expanded to see:
    - Full URL
    - Start / End / Duration / Status
    - Query parameters (searchable)
    - Request headers (searchable)
    - Response headers (searchable)
    - Error information for failed requests

- **Page URL insight panel**
  - Shows full page URL at the top of the Side Panel.
  - When expanded, breaks down protocol, host, hostname, port, pathname and hash.
  - Visualizes query parameters with:
    - Search box for filtering keys/values
    - Smart grouping for repeated keys

- **Smart value formatter for query and headers**
  - Automatically runs a formatter pipeline on each value:
    - URL decode
    - Timestamp detection (10/13‑digit UNIX timestamps) with local time conversion
    - Base64 decoding (including URL‑safe variants)
    - JWT parsing (supports `Bearer <token>` and raw tokens; shows header & payload JSON)
  - Results are presented as “**raw value + interpreted value**” so you can:
    - Quickly see readable timestamps
    - Inspect JWT header and payload
    - Decode Base64 strings when they contain human‑readable text

- **Side Panel aware performance behavior**
  - HTTP capture starts **only after** the Side Panel connects to the background script.
  - When all Side Panel connections are closed, the extension:
    - Removes webRequest listeners
    - Clears in‑memory records to free resources

#### How it works

- The background script listens to `webRequest` events for the active tab.
- For each request, it records:
  - Method, URL, host, path
  - Status, duration (ms), start/end timestamps
  - Request and response headers
  - Error details if the request fails
- These records are streamed to the Side Panel via a message port and rendered in a React UI with:
  - Mantine UI components
  - Zustand for local state
  - Tailwind CSS for layout and styling

All processing happens **locally in the browser**. The extension does not send captured data to any remote server.