API Response Pretty-Printer

WHAT IT DOES

API Response Pretty-Printer intercepts all fetch() and XMLHttpRequest calls made from a webpage, captures the responses, and displays them in a beautiful, structured format. The extension automatically parses JSON responses and presents them as a collapsible tree view with syntax highlighting for keys, strings, numbers, booleans, and null values. You can switch between Tree, Raw, and Compact view modes to see the data in different formats. The panel shows the request URL, HTTP method, status code, response headers, and timestamp for each captured API call. Use the search and filter functionality to find specific keys or values within responses. Copy any response to the clipboard with a single click, or clear all captured responses to start fresh. The extension updates dynamically as new API calls are made, making it an essential tool for debugging, API development, and understanding how web applications communicate with their backends.

WHERE IT RUNS

The extension works on every website that makes API calls using fetch or XMLHttpRequest, including complex single-page applications, traditional websites, and any page that communicates with a backend API. It runs locally in your browser, intercepting network requests at the JavaScript level without sending any data to external servers. The extension supports all major browsers and adapts to both desktop and mobile viewports seamlessly.

HOW TO USE

After installation, a "📡 API" badge appears in the bottom-right corner showing the number of captured API responses. Click the badge to open the API Response panel. The panel displays a list of all captured API calls on the left and the selected response details on the right. Select any response from the list to view its details. Use the view mode buttons (🌳 Tree, 📄 Raw, 📝 Compact) to switch between different display formats. In Tree view, click the expand/collapse arrows to explore nested objects and arrays. Click the "Copy" button to copy the selected response data to your clipboard. Use "Clear" to remove all captured responses. To customize the experience, open the extension panel and toggle "Auto-open panel on new response" to automatically show the panel when an API call is made. Toggle "Show status badge" to show or hide the badge. Toggle "Include response headers" to show or hide headers in the response view.

THE ACTUAL MECHANISM — FETCH AND XMLHTTPREQUEST INTERCEPTION WITH RESPONSE CLONING

The extension uses two interception strategies. For fetch(), it replaces the global window.fetch with a wrapper that calls the original fetch and then clones the response using response.clone() (since the response body can only be consumed once). The clone is then read as text and passed to the addResponse() handler. For XMLHttpRequest, it intercepts the open and send methods. When open is called, the extension stores the method and URL. When send is called, it wraps the onreadystatechange handler. When readyState reaches 4 (complete), the extension reads the status, statusText, and responseText, then calls addResponse(). Both interceptors extract response headers by iterating over the headers object (fetch) or parsing the getAllResponseHeaders() string (XHR). All captured responses are stored in an array with a timestamp, and the UI is updated through a render pipeline that checks the current view mode and renders the response body as a tree (recursive object traversal), raw JSON, or compact JSON. The tree renderer recursively traverses objects and arrays, building nested HTML structures with toggleable expand/collapse behavior. Syntax highlighting is applied using CSS classes for JSON elements.

THE PANEL

The settings panel is a lightweight, draggable overlay that appears in the center of your screen. You can reposition it by clicking and dragging the title bar; release it near the screen edge and it will snap into place automatically. To collapse the panel into a compact title bar, click the minimize button, expanding it again with the same control. The panel is fully responsive, adapting to different screen resolutions with a minimum width of 300px and a maximum of 480px. Press the Escape key at any time to dismiss the panel without applying changes. All controls—the enable/disable toggle, show panel button, close panel button, clear responses button, auto-open toggle, status badge toggle, headers toggle, and per-site controls—are accessible within a clean, high-contrast interface that respects your system's color scheme.

PLEASE NOTE

This extension requires the free BotGentz companion extension to be installed and active, which provides the underlying DOM access, clipboard, and storage engine. The interception works at the JavaScript level and may not capture all network requests, particularly those made via service workers or the browser's native fetch API after the page has loaded. The extension does not intercept requests made from iframes or cross-origin contexts. Response bodies are stored in memory and may consume significant resources if many large responses are captured—use the "Clear" button to manage memory usage. No personal data, browsing history, or API response data is ever collected, stored, or transmitted. All settings are saved using the browser's storage API and remain solely on your device. The extension does not inject ads, trackers, or analytics of any kind.