NetScope

A beautiful Chrome extension network inspector that works everywhere. Bypass DevTools restrictions and monitor HTTP traffic with an elegant dark UI.

Features

• Works everywhere - Captures network traffic even on pages that block DevTools
• Fetch & XHR interception - Monitors both fetch() and XMLHttpRequest calls via content script injection
• Full request details - View headers, request/response bodies, timing, and status codes
• Beautiful dark UI - Modern interface with Inter and JetBrains Mono fonts
• Filter & search - Filter by URL or request type (XHR, Fetch, Script, CSS, Image, etc.)
• Recording control - Pause and resume traffic capture
• Persistent storage - Requests survive browser restarts (up to 1000 requests)
• Copy to clipboard - One-click copy for any header, URL, or body value

Installation

1. Clone or download this repository
2. Open Chrome and navigate to chrome://extensions/
3. Enable Developer mode (toggle in top right)
4. Click Load unpacked and select the extension directory
5. The NetScope icon should appear in your toolbar

Usage

1. Click the NetScope icon in your Chrome toolbar to open the popup
2. Network requests will appear automatically as you browse
3. Click any request to view its details in the right panel
4. Use the Headers, Preview, Request, Response, and Timing tabs to inspect different aspects
5. Use the search box to filter by URL or the dropdown to filter by type
6. Click Recording to pause/resume capture, or Clear to remove all requests

Architecture

File	Purpose
manifest.json	Extension manifest (MV3) with permissions and configuration
background.js	Service worker that listens to webRequest events, manages state, and persists to chrome.storage
content.js	Injected into pages to intercept fetch and XMLHttpRequest calls and forward them to the background script
popup.html	Extension popup UI with embedded styles
popup.js	Popup logic for rendering requests, filtering, and displaying details

Permissions

• storage - Persist captured requests across sessions
• tabs - Track the active tab for scoped capture
• webRequest - Monitor network traffic at the browser level
• scripting - Inject content script into pages for fetch/XHR interception
• <all_urls> - Required to monitor requests to any origin

Tech Stack

• Chrome Extension Manifest V3
• Vanilla JavaScript
• CSS with custom properties (dark theme)

License

MIT