Boilerplat for a userscript that hooks into the XHR 'load' event, for handling lazy-loaded pages

xhr_hook_example.js

// ==UserScript==
// @name         XHR Hook Example
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Hook into XHR requests
// @match        *://*/*
// @grant        none
// ==/UserScript==

// source:
//   https://duckduckgo.com/?q=hook+into+xhr+loading+with+javascript+event+listener&ia=chat&bang=true
//
// with the additional prompt:
//   > i don't have an xhr object; i'm writing a userscript, and I don't have
//   > any of the other xmlhttpresponse instances in my function scope
//
// this actually worked!

(function() {
    // Store the original XMLHttpRequest constructor
    const OriginalXMLHttpRequest = window.XMLHttpRequest;

    // Create a new constructor that wraps the original
    function NewXMLHttpRequest() {
        const xhr = new OriginalXMLHttpRequest();

        // Add event listeners to the new XHR instance
        xhr.addEventListener('load', function() {
            console.log('Request completed successfully:', xhr.responseText);
        });

        xhr.addEventListener('error', function() {
            console.error('Request failed');
        });

        xhr.addEventListener('progress', function(event) {
            if (event.lengthComputable) {
                const percentComplete = (event.loaded / event.total) * 100;
                console.log('Loading progress: ' + percentComplete + '%');
            }
        });

        // Return the new XHR instance
        return xhr;
    }

    // Replace the global XMLHttpRequest with the new one
    window.XMLHttpRequest = NewXMLHttpRequest;
})();