Skip to content

Chrome extension · Developer tool

A Chrome extension that captures a page's REST, WebSocket and SSE traffic in an in-page panel for inspection and debugging.

Role

Solo developer

Source Download .zip

01Overview

The problem

Network Monitor puts a page's API traffic in a panel on the page itself: fetch, XHR, WebSocket and Server-Sent Events, with headers, payloads, responses and socket messages. The panel can float, dock to the side or bottom, or be resized.

Who it's for

Developers debugging REST, WebSocket and SSE traffic in web apps.

Features

  • Full traffic capture

    fetch, XHR, WebSocket and Server-Sent Events — headers, payloads, responses and socket messages — captured before any page script runs.

  • In-page panel

    A panel on the page itself: float it, dock it to the side or bottom, or resize it. Shadow DOM keeps its styles and the site's styles apart.

  • Inspect, filter, copy

    Filter by type, errors or text, copy any request as cURL, and inspect WebSocket conversations message by message.

  • HAR export

    Export a session as HAR — WebSocket messages included — to open in Chrome DevTools. Memory is capped per request and socket so long sessions stay light.

02Architecture

100%
wrapped APIsprivate CustomEventmessagesstatePage scriptsfetch · XHR · WS · SSEInterceptorMAIN world · document_startPanel UIcontent script · Shadow DOMService workertoggle · badgechrome.storage.sessionper-tab state
Capture in the page, UI in an isolated content script, state in the service worker.

Key concepts

  1. 01Capture before the page runs.

    A content script declared in the page's MAIN world at document_start wraps fetch, XMLHttpRequest, WebSocket and EventSource before any page script runs. Because it's a registered content script and not an inline script, the site's Content-Security-Policy can't block it.

  2. 02Isolated from the site.

    Captured events reach the extension's own content script through a private CustomEvent, never through the page's message listeners. The panel renders inside a Shadow DOM, so the site's CSS and the panel's CSS can't affect each other.

  3. 03Inspect, filter and export.

    Requests can be filtered by type, errors or text, copied as cURL, and exported as HAR (WebSocket messages included) to open in Chrome DevTools. Memory is capped per request, socket and body so long sessions stay light.

Tech stack

The Key componets that made it possible

  • Manifest V3
  • chrome.storage.session
  • JavaScript
  • Shadow DOM

Next case study

AI Chatbot Assistant for Business & Ecommerce