API Response Formatter

WHAT IT DOES

API Response Formatter is a browser extension that automatically scans the current webpage for API response data, JSON objects, XML payloads, raw server responses, and API documentation examples. It detects response-related elements by examining class names, IDs, data attributes, and content patterns for JSON or XML structures. The extension adds a floating "format response" button (🔄) next to each detected response element, allowing you to capture response data, endpoint URL, status code, and custom notes. Clicking the button opens a panel where you can pretty-print JSON or XML with customizable indentation, preview the formatted output, copy formatted data to your clipboard, add notes about response structure, field descriptions, or API version, and store formatted responses locally. The extension maintains an API response database per endpoint with formatting history, notes, and tags for each tracked response. The main panel displays all saved responses with endpoint URLs, status codes, formats, entry counts, and notes. All data is stored locally in your browser using GM_setValue, ensuring your formatted response collections persist across page reloads and browser sessions. This helps developers, QA engineers, API testers, technical writers, and anyone working with APIs to format raw responses for debugging, documentation, testing, or integration purposes.

WHERE IT RUNS

This extension runs on any webpage that displays API response data, JSON objects, XML payloads, raw server responses, or API documentation examples – including API testing tools (Postman, Insomnia), API documentation pages, developer dashboards, Swagger/OpenAPI interfaces, logging systems, debugging tools, and any page containing API response data. The extension intelligently adapts to different page structures and supports a wide range of common response display patterns. No manual configuration is required per site; the extension automatically detects response elements using a flexible pattern matching system. This makes it ideal for developers, QA engineers, and technical writers who need to format and track API responses.

HOW TO USE

Simply install the extension and navigate to any webpage displaying API response data. The extension automatically detects response elements and places a small "format response" button (🔄) next to each one. Click any of these buttons to open the formatting panel with the raw response data pre-captured. Select the response format (JSON or XML), set the indent size (default 2 spaces), and click "Format" to pretty-print the data in the preview pane. Copy the formatted output to your clipboard with one click. Add notes about response structure, field descriptions, API version, or any other relevant detail, then click "Save Response" to store it in your local database. A floating button (⚡) appears in the bottom-right corner of the page – click this to open the main panel. The main panel shows all saved responses, sorted by most recent entry, with endpoint URL, status code, format, entry count, and latest note displayed. Use the settings section to enable or disable auto-detection, set your preferred default format, and choose the default indent size. The "Clear All Responses" button removes all tracking data when needed.

ONE TECHNICAL SECTION – WHY IT WORKS

The extension employs a multi-layered detection system that identifies API response data with high accuracy. First, it scans the DOM using a comprehensive set of CSS selectors targeting common response-related class patterns, IDs, and data attributes like "response", "api", "json", "xml", "payload", and "raw". Second, it attempts to parse text content as JSON or examines it for XML-like structure (opening tags and angle brackets) to detect response data. The JSON formatting uses the native JSON.stringify with configurable indentation to produce clean, readable output. The XML formatting uses a custom pretty-print parser that handles tags, attributes, and text content while preserving nesting depth. The endpoint extraction identifies API endpoints from text patterns and data attributes. The status code extraction identifies HTTP status codes (100-599) from text and data attributes. Each tracked response is assigned a unique ID based on the endpoint URL, ensuring that history stays correctly associated. A MutationObserver detects dynamic content updates and re-scans only when new response elements appear, balancing real-time accuracy with system performance.

THE PANEL – DRAG / PER-SITE POSITION / SNAP / COLLAPSE / RESIZE / ESCAPE

The API response formatting panel includes a draggable title bar, allowing you to position it anywhere on screen for convenient access during debugging. The extension remembers your preferred position per website, so the panel opens in the same location each time you return to that domain. The panel supports snap-to-edge behavior – when dragged near screen edges, it gently snaps into place for a tidy workspace layout. You can collapse the panel down to just its title bar by clicking the collapse button, keeping it accessible without taking up screen space. The formatted output preview and history are contained within a scrollable body, ensuring all content remains accessible even on smaller screens. Pressing the Escape key closes the panel instantly, returning you to your debugging workflow.

PLEASE NOTE

This extension requires the free BotGentz extension to be installed and enabled, as it relies on BotGentz's userscript injection and GM_* API shims for cross-browser compatibility. Websites frequently update their HTML structures and class names, which may cause response detection to break temporarily – we actively maintain the matching patterns and release updates regularly. The extension stores all API response data, formatting history, and notes exclusively in your local browser storage (GM_setValue); no data is ever transmitted to any external server or third party. The raw response data is stored locally and may include sensitive information – we recommend periodically clearing old data and reviewing your stored responses. You are responsible for backing up your response data if you switch browsers or clear your storage. The extension does not read, modify, or interfere with any API requests, responses, or site functionality – it operates solely on the static page content and stores only metadata (endpoint URLs, status codes, formatted responses, and notes) that you explicitly create. Use this tool responsibly for internal debugging and documentation purposes.