☰

Fetch Logger

Logs fetch requests in a GUI for user viewing

  1. // ==UserScript==
  2. // @name         Fetch Logger
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.2 
  5. // @description  Logs fetch requests in a GUI for user viewing
  6. // @author       zuxity
  7. // @match        *://*/*
  8. // @grant        none
  9. // ==/UserScript==
  10.  
  11. (function() {
  12.     'use strict';
  13.  
  14.     // Create a container for logging fetch requests
  15.     const logContainer = document.createElement('div');
  16.     logContainer.style.position = 'fixed';
  17.     logContainer.style.top = '0';
  18.     logContainer.style.right = '0';
  19.     logContainer.style.background = '#fff';
  20.     logContainer.style.border = '1px solid #ccc';
  21.     logContainer.style.padding = '10px';
  22.     logContainer.style.maxWidth = '300px';
  23.     logContainer.style.overflow = 'auto';
  24.     logContainer.style.zIndex = '9999';
  25.     document.body.appendChild(logContainer);
  26.  
  27.     // Intercept fetch requests
  28.     const originalFetch = window.fetch;
  29.     window.fetch = function(url, options) {
  30.         return originalFetch(url, options)
  31.             .then(response => {
  32.                 // Log the fetch request
  33.                 logFetch(url, options, response);
  34.                 return response;
  35.             })
  36.             .catch(error => {
  37.                 // Log errors
  38.                 logError(url, options, error);
  39.                 throw error;
  40.             });
  41.     };
  42.  
  43.     // Function to log fetch requests
  44.     function logFetch(url, options, response) {
  45.         const logEntry = document.createElement('div');
  46.         logEntry.textContent = `URL: ${url}, Method: ${options.method}, Status: ${response.status}`;
  47.         logContainer.appendChild(logEntry);
  48.     }
  49.  
  50.     // Function to log errors
  51.     function logError(url, options, error) {
  52.         const logEntry = document.createElement('div');
  53.         logEntry.textContent = `Error fetching ${url}: ${error}`;
  54.         logContainer.appendChild(logEntry);
  55.     }
  56. })();