03 · Developer tool · Chrome extension
NetworkLogger
A Manifest V3 extension that records fetch, XHR, sendBeacon and form traffic so logs survive popups, closed tabs and short-lived windows.
Problem
DevTools loses the network panel when a tab or popup closes, which is exactly when some bugs happen: OAuth popups, redirects, short-lived windows. I wanted a recorder that keeps going.
What I built
- A page-world script that patches fetch, XMLHttpRequest, sendBeacon and form submission to capture requests and, where the browser allows, responses.
- A relay content script that forwards events to the background service worker only while recording is on.
- Per-domain persistence in chrome.storage.local and JSON export of the captured logs.
Architecture
Page
fetch / XHR / beacon
Capture script
MAIN world
Relay
isolated world
Service worker
chrome.storage
JSON export
Engineering decisions
- Run in the page's own JS world
- Capture code is injected into the MAIN world so it patches the page's real network APIs; a separate isolated-world relay carries messages to the extension.
- Work around MV3 limits
- Service workers cannot create object URLs, so an offscreen document builds the Blob that is then handed to the downloads API.
- Be explicit about limits
- Navigation form POST responses and cross-origin subresource bodies are not visible to page JavaScript. The tool documents that and captures timing and size where it can.
Technology
- JavaScript
- Chrome Extensions
- Manifest V3
- Service Workers
- chrome.storage
Result
A debugging tool for real web apps, deliberately upfront about what a browser lets an extension see.