Webhook Payload Viewer Panel

WHAT IT DOES

This script automatically detects webhook payloads, JSON responses, and form data on any page, displaying them in a clean, syntax-highlighted panel. It scans pre and code elements, text nodes, and response-like content, then presents the payload in a formatted view with color-coded keys, strings, numbers, booleans, and null values. The panel includes a raw/pretty toggle to switch between formatted and raw views, copy to clipboard functionality, payload size display, and timestamp tracking. A floating button lets you toggle the panel on demand, and the script automatically detects new payloads as page content changes.

WHERE IT RUNS

The script works on any page that displays or contains webhook payloads—API documentation, webhook testing tools (Webhook.site, RequestBin, ngrok), logs, configuration files, and any page with JSON or form-encoded data. It works on any website regardless of structure, scanning the entire page for payload-like content.

HOW TO USE

After installation, the script automatically detects payloads and displays them in a panel. A floating 📦 button appears in the corner—click it to toggle the panel. The panel shows the formatted payload with syntax highlighting. Use the "Raw" button to switch to raw view, and "Copy" to copy the payload to your clipboard. The panel footer shows payload size and timestamp. Open the settings panel to configure auto-detection, syntax highlighting, dark/light mode, timestamp display, max payload size, and panel position. Click "Detect & Show" to manually scan for payloads.

TECHNICAL MECHANISM

The script uses a multi-stage payload detection and display pipeline. First, it scans the DOM for potential payload content using a TreeWalker on text nodes and direct element queries on pre, code, .json, .payload, and .webhook elements, with configurable size limits. Second, it validates each candidate by attempting JSON parsing with JSON.parse, URLSearchParams for form data, or falling back to plain text. Third, it builds a structured payload object with type (json, form, text), parsed data, and raw text. Fourth, it generates syntax-highlighted HTML by stringifying JSON with indentation, then applying color classes to keys, strings, numbers, booleans, null, and brackets using regex-based tokenization. Fifth, it renders the payload in a floating panel with raw/pretty mode switching, copy functionality, and metadata display. Sixth, it uses a MutationObserver to detect new content and automatically show payloads when they appear.

THE PANEL

The settings panel is fully draggable and can be positioned anywhere on your screen. It automatically snaps to the nearest edge when released, keeping your workspace organized. The panel can be collapsed to a small bubble showing only a gear icon, and restored with a single click. Its position is remembered across page reloads using GM_setValue. The panel also responds to the Escape key, which instantly hides it until you click the bubble again. All settings are saved immediately when changed and persist across browser sessions.

PLEASE NOTE

This script requires the free BotGentz extension to run. Payload detection relies on the page's HTML structure and may not capture all webhook data, especially if it's loaded dynamically or in non-standard formats. The script does not intercept network requests—it only detects payloads already rendered on the page. All processing happens locally in your browser and never leaves your device.