CatchPacket Plugins

# CatchPacket Plugins — Professional Web Request Capture & Real-Time Forwarding Tool ═══════════════════════════════════════════ 【Product Overview】 ═══════════════════════════════════════════ CatchPacket Plugins is a lightweight, professional browser network request capture tool. It resides on your browser pages as an elegant floating panel, allowing you to capture all Fetch and XMLHttpRequest (XHR) network requests from the current page in real time — without ever needing to open Chrome DevTools. It also supports forwarding complete request and response data to your own server for logging and analysis. One payment, lifetime use, for just $1 USD. ═══════════════════════════════════════════ 【Why Do You Need CatchPacket Plugins?】 ═══════════════════════════════════════════ In daily web development, API testing, and data analysis work, have you often encountered these scenarios? ▸ Need to check what API requests a page sends to the backend, but constantly opening DevTools is too much hassle? ▸ Want to automatically log captured interface data to your own database, rather than manually copy-pasting? ▸ Hoping to monitor third-party platform API calls without modifying any code? ▸ Need to push front-end interface data in real time to your team's shared analysis platform? ▸ During testing, want to quickly verify whether a request's parameters and response format are correct? CatchPacket Plugins is designed precisely for these scenarios, making network request capture and forwarding easier than ever. ═══════════════════════════════════════════ 【Core Features Explained】 ═══════════════════════════════════════════ ────────────────────────────────────── 1. Floating Panel · Always Available ────────────────────────────────────── After installing the plugin, a blue circular floating button appears in the upper-right corner of the screen. Click it to expand the full feature panel; click again to collapse it, without interfering with any page operations. · Capture status indicator** — While capturing, the floating button automatically switches to a red pulsing animation, so you always know the current working state. · Draggable panel — Drag the top title bar to move the panel anywhere on the screen. · Draggable button — Long-press and drag the floating button to reposition it to any corner of the screen. · Persistent positioning — All position settings are saved automatically and persist across page refreshes. ────────────────────────────────────── 2. Real-Time Request Capture · Zero Misses ────────────────────────────────────── Click the 「Start」 button, and the plugin immediately enters capture mode, automatically intercepting and logging all requests from the page, including: · Fetch API requests (the modern standard for web applications) · XMLHttpRequest (XHR)** requests (traditional AJAX) The request list updates in real time, with each entry showing a summary: · Method — GET (green) / POST (blue) / PUT (yellow) / DELETE (red) / PATCH (purple) · Path — Automatically displays the URL path; full URL appears on hover · Duration — Precise to the millisecond, quickly identifies performance bottlenecks Click any request to expand full details: 【Request Details】 · Full request URL · Request Headers — displayed in a clean key-value table · Request Body — JSON data automatically recognized and formatted · Request Timestamp — precise to the millisecond (format: HH:MM:SS.mmm) 【Response Details】 · Status code and status text · Response Headers — complete key-value list · Response Body — auto-detects JSON / plain text / binary content · Response Timestamp — precise to the millisecond (format: HH:MM:SS.mmm) Up to 300 records are retained simultaneously; click 「Clear」 at any time to wipe the list. ────────────────────────────────────── 3. Real-Time Forwarding · Automatic Data Ingestion ────────────────────────────────────── This is the most distinctive professional feature of CatchPacket Plugins. Simply enter your server's receiving URL in the settings panel, and the plugin will forward every captured request (including complete request and response information) as a JSON payload via a POST request to your server in real time. Typical Use Cases: · Store data in a database to build a historical query system · Integrate with log analysis platforms (e.g., ELK, Grafana) · Share captured results with team members in real time · Connect to AI analysis pipelines for automated interface data processing ✅ Built-in Mixed Content Solution Even if you're working on an HTTPS page, you can forward data to an HTTP server without any additional configuration. The plugin forwards requests through a Service Worker background proxy, completely bypassing browser mixed-content security restrictions. ✅ Complimentary Python Receiver Server Example Click 「Download receiver example code」 in the settings panel to get a complete Python Flask receiver server source code (`receive_web_server.py`). With Flask installed, you can run it directly and have a local receiving service up and running within 5 minutes — ready to use out of the box. The example code already includes built-in SSE streaming response extraction logic for DeepSeek / ChatGPT and other AI platforms, making it ideal for analyzing and logging AI interface data. ────────────────────────────────────── 4. Dual Filters · Pinpoint Your Targets ────────────────────────────────────── 【Capture Filter (configured in settings panel)】 Enter a URL keyword and the plugin will only capture requests whose URL contains that keyword, filtering out irrelevant noise. For example, entering `"/api/chat"` will only log requests whose path contains `/api/chat`. Leave blank to capture all Fetch/XHR requests from the current page. 【Real-Time Search Filter (panel search box)】 Type any keyword into the search box above the request list, and the list is filtered in real time to precisely locate the target request. The search result count updates dynamically, and the ✕ butto…