Network Listener Documentation

A userscript that monitors and intercepts Fetch, XHR, and WebSocket network calls, dispatching custom events for easy consumption by other scripts. Eliminates the need for repetitive monkey-patching in multiple userscripts.

Have one script handle all network activity and simply listen to events dispatched by that script in your other scripts.

Installation

Install the userscript using a userscript manager like Tampermonkey or Greasemonkey:

  1. Copy the entire script content
  2. Create a new script in your userscript manager
  3. Paste and save
  4. Now you can add event listeners to the script to listen to network events in your own scripts without having to monkey-patching the network calls in your scripts.

Note: The script runs at document-start to ensure it captures all network activity from the beginning.

Quick Start

Basic Usage

After installation, listen for network events in your code:

Fetch Interceptor

window.addEventListener("hardy-fetch", (event) => {
            const { url, body, response } = event.detail;
            console.log("Fetch call:", { url, body, response });
            // Your custom logic here
        });

XHR Interceptor

window.addEventListener("hardy-xhr", (event) => {
            const { url, body, response } = event.detail;
            console.log("XHR call:", { url, body, response });
            // Your custom logic here
        });

WebSocket Interceptor

window.addEventListener("hardy-socket", (event) => {
            const { url, response } = event.detail;
            console.log("WebSocket message:", { url, response });
            // Your custom logic here
        });

API Reference

Custom Events

The script dispatches three types of custom events:

Event Type Trigger Event Detail Structure
hardy-fetch When a fetch request completes 
{
            "url": string,
            "body": string | null,
            "response": string
        }
hardy-xhr When an XHR request completes 
{
            "url": string,
            "body": string | null,
            "response": string | object
        }
hardy-socket When a WebSocket message is received 
{
            "url": string,
            "response": string
        }

Advanced Usage

Filtering Requests

Filter requests by URL or other properties:

window.addEventListener("hardy-fetch", (event) => {
            const { url } = event.detail;
            if (url.includes("/api/")) {
                console.log("API Fetch call:", event.detail);
                // Process only API calls
            }
        });

Examples

Logging All Requests

// Log all network activity
        ['fetch', 'xhr', 'socket'].forEach(type => {
            window.addEventListener(`hardy-${type}`, (event) => {
                console.group(`Network ${type.toUpperCase()}`);
                console.log('URL:', event.detail.url);
                if (event.detail.body) console.log('Body:', event.detail.body);
                console.log('Response:', event.detail.response);
                console.groupEnd();
            });
        });

Error Tracking


        window.addEventListener("hardy-xhr", (event) => {
            try {
                const response = JSON.parse(event.detail.response);
                if (response.error) {
                    console.error('API Error:', {
                        url: event.detail.url,
                        error: response.error
                    });
                }
            } catch (e) {
                // Not JSON response
            }
        });

Limitations

  • Cannot intercept requests made by browser extensions
  • Does not track request headers due to browser security restrictions
  • May not work with some CORS requests