☰

Network Sniffer 🌐

Logs XHR, Fetch, WebSocket, and Service Worker requests

  1. // ==UserScript==
  2. // @name         Network Sniffer 🌐
  3. // @namespace    http://tampermonkey.net/
  4. // @version      2.2
  5. // @description  Logs XHR, Fetch, WebSocket, and Service Worker requests
  6. // @author       Manu OVG
  7. // @match        *://*/*
  8. // @grant        GM_setClipboard
  9. // ==/UserScript==
  10.  
  11. (function() {
  12.     'use strict';
  13.  
  14.     // 🌍 UI Creation
  15.     let panel = document.createElement('div');
  16.     panel.innerHTML = `
  17.         <style>
  18.             .sniffer-ui {
  19.                 position: fixed;
  20.                 top: 20px;
  21.                 right: 20px;
  22.                 width: 400px;
  23.                 max-height: 500px;
  24.                 background: rgba(30, 30, 30, 0.95);
  25.                 color: white;
  26.                 font-family: Arial, sans-serif;
  27.                 font-size: 12px;
  28.                 border-radius: 8px;
  29.                 padding: 10px;
  30.                 box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  31.                 overflow: hidden;
  32.                 z-index: 9999;
  33.             }
  34.             .sniffer-header {
  35.                 display: flex;
  36.                 justify-content: space-between;
  37.                 align-items: center;
  38.                 padding-bottom: 5px;
  39.                 border-bottom: 1px solid #555;
  40.             }
  41.             .sniffer-title { font-weight: bold; }
  42.             .sniffer-close { cursor: pointer; color: red; font-weight: bold; }
  43.             .sniffer-body {
  44.                 max-height: 400px;
  45.                 overflow-y: auto;
  46.                 padding-top: 5px;
  47.             }
  48.             .sniffer-item {
  49.                 padding: 5px;
  50.                 border-bottom: 1px solid #444;
  51.                 word-wrap: break-word;
  52.             }
  53.             .sniffer-get { color: #4CAF50; }  /* Green */
  54.             .sniffer-post { color: #FFC107; } /* Yellow */
  55.             .sniffer-fetch { color: #03A9F4; } /* Blue */
  56.             .sniffer-websocket { color: #FF5722; } /* Red */
  57.             .sniffer-copy {
  58.                 background: #008CBA;
  59.                 color: white;
  60.                 padding: 4px;
  61.                 border: none;
  62.                 border-radius: 4px;
  63.                 cursor: pointer;
  64.                 font-size: 10px;
  65.                 margin-top: 5px;
  66.             }
  67.             .sniffer-counter {
  68.                 font-size: 14px;
  69.                 font-weight: bold;
  70.                 color: #FFD700;
  71.             }
  72.         </style>
  73.         <div class="sniffer-ui">
  74.             <div class="sniffer-header">
  75.                 <span class="sniffer-title">🌐 Network Sniffer (<span class="sniffer-counter">0</span>)</span>
  76.                 <span class="sniffer-close">✖</span>
  77.             </div>
  78.             <div class="sniffer-body"></div>
  79.         </div>
  80.     `;
  81.  
  82.     document.body.appendChild(panel);
  83.     
  84.     let snifferBody = panel.querySelector('.sniffer-body');
  85.     let closeBtn = panel.querySelector('.sniffer-close');
  86.     let counter = panel.querySelector('.sniffer-counter');
  87.     let requestCount = 0;
  88.  
  89.     // ✖ Close UI on click
  90.     closeBtn.onclick = () => panel.style.display = 'none';
  91.  
  92.     // 🔥 Function to log requests in UI
  93.     function logRequest(type, method, url) {
  94.         requestCount++;
  95.         counter.innerText = requestCount; // Update request counter
  96.         let colorClass = type === 'GET' ? 'sniffer-get' : type === 'POST' ? 'sniffer-post' : type === 'WebSocket' ? 'sniffer-websocket' : 'sniffer-fetch';
  97.         let requestItem = document.createElement('div');
  98.         requestItem.classList.add('sniffer-item', colorClass);
  99.         requestItem.innerHTML = `
  100.             <b>${type} | ${method}</b> → ${url}
  101.             <button class="sniffer-copy">📋 Copy</button>
  102.         `;
  103.  
  104.         snifferBody.prepend(requestItem);
  105.  
  106.         // 📋 Copy URL on click
  107.         requestItem.querySelector('.sniffer-copy').onclick = () => {
  108.             GM_setClipboard(url);
  109.             alert("URL copied!");
  110.         };
  111.     }
  112.  
  113.     // 🕵️ Intercept XHR requests
  114.     (function(open) {
  115.         XMLHttpRequest.prototype.open = function(method, url) {
  116.             this.addEventListener("load", function() {
  117.                 logRequest("XHR", method, url);
  118.             });
  119.             open.apply(this, arguments);
  120.         };
  121.     })(XMLHttpRequest.prototype.open);
  122.  
  123.     // 🕵️ Intercept Fetch requests
  124.     (function(fetch) {
  125.         window.fetch = function() {
  126.             let url = arguments[0];
  127.             let method = arguments[1] && arguments[1].method ? arguments[1].method.toUpperCase() : 'GET';
  128.             logRequest("Fetch", method, url);
  129.             return fetch.apply(this, arguments);
  130.         };
  131.     })(window.fetch);
  132.  
  133.     // 🕵️ Capture WebSocket requests
  134.     let originalWebSocket = window.WebSocket;
  135.     window.WebSocket = function(url, protocols) {
  136.         let ws = new originalWebSocket(url, protocols);
  137.         logRequest("WebSocket", "CONNECT", url);
  138.         ws.addEventListener('message', function(event) {
  139.             console.log("WebSocket Message: ", event.data);
  140.         });
  141.         return ws;
  142.     };
  143.  
  144.     // 🕵️ Capture Service Worker requests
  145.     if ('serviceWorker' in navigator) {
  146.         navigator.serviceWorker.addEventListener('message', function(event) {
  147.             logRequest("ServiceWorker", event.data.method, event.data.url);
  148.         });
  149.     }
  150. })();