Media
2 items
Description
Capture interface request packets from web pages, intercepting Fetch/XHR network requests. # 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 ✕ button on the right clears the search content with one click. ────────────────────────────────────── 5. One-Click Copy · Quick Sharing ────────────────────────────────────── Each request has a 「Copy」 button on its right. Click it, and the complete request data (method, URL, timestamp, duration, request headers, request body, response headers, response body) is copied to your system clipboard as formatted JSON, ready to paste into: · Bug reports · API documentation · Chat tools (to share with colleagues) · AI chat interfaces (to let AI analyze the data) ────────────────────────────────────── 6. 6-Language Interface · International Support ────────────────────────────────────── Click the 🌐 globe icon in the upper-right corner of the panel to instantly switch the interface language without refreshing the page: · English · 简体中文 (Simplified Chinese) · 繁體中文 (Traditional Chinese) · 한국어 (Korean) · 日本語 (Japanese) Your language preference is automatically saved for next time. ────────────────────────────────────── 7. Refined Interface · Zero-Distraction Design ────────────────────────────────────── · VS Code-style dark theme with a professional color palette, suitable for extended use · Shadow DOM isolation — fully independent from page styles, never interferes with any website's original styling or functionality · Smooth animations and transitions; toast notifications confirm successful settings changes · Both the panel and floating button are draggable and repositionable to suit different workflow layouts ═══════════════════════════════════════════ 【Who Is This For?】 ═══════════════════════════════════════════ 👨💻 Frontend / Full-Stack Developers Quickly debug APIs without constantly opening DevTools, improving development efficiency. 🧪 Test Engineers / QA Log interface requests during testing, forward them to your test reporting system, and verify request parameter compliance. 📊 Data Analysts Analyze API data formats from target platforms, assisting with crawler development and data collection. 🔬 Security Researchers Audit web application interface call behaviors and check for sensitive data exposure risks. 🤖 AI Application Developers Capture streaming API responses from AI platforms (DeepSeek, ChatGPT, Claude, etc.), analyze data formats, and support secondary development. 📋 Product Managers / Operations Understand platform interface call patterns, assist with troubleshooting online issues, and perform self-service analysis without developer assistance. ═══════════════════════════════════════════ 【How to Use】 ═══════════════════════════════════════════ Step 1: Install & Activate Install the plugin from the Chrome Web Store. After installation, a blue circular floating button appears in the upper-right corner of any webpage you visit. Step 2: Configure Settings (Optional) Click the floating button to expand the panel → Click the 「Settings」 button → Enter your server address and/or filter keywords → Click 「Save」. If you only need to view requests within the panel, no server address is required. Step 3: Start Capturing Click the **「Start」** button in the panel. The floating button turns into a red pulsing animation, indicating that capture is in progress. Step 4: View & Analyze Navigate your target page and trigger relevant actions. The request list updates in real time. Click any request to view full details. Use the **「Copy」** button to copy data with one click, or use the search box to filter for specific requests. Step 5: Stop & Clear Click 「Stop」 to end capture, and click 「Clear」 to wipe the list. ═══════════════════════════════════════════ 【Pricing】 ═══════════════════════════════════════════ 💰 Price: $1.00 USD (one-time payment) 🔓 Purchase unlocks permanent use — no subscriptions or renewals 🌍 Supports Visa / Mastercard / Alipay and other major payment methods (securely processed by Stripe) 💻 Purchase state can be restored** on new devices via email Purchase Process: 1. Click the floating button, then click 「Buy Now — $1」 on the purchase page 2. Complete payment via Stripe's secure checkout 3. Return to the browser and click the floating button again — your purchased status is automatically recognized, and all features are unlocked immediately Restore Purchase: On the purchase page, click 「Already purchased? Sign in to restore」, enter the email address used at the time of purchase, and your usage rights will be restored on the new device. ═══════════════════════════════════════════ 【Privacy & Security】 ═══════════════════════════════════════════ Our Commitment to User Privacy: 🔒 You have full control over your data The plugin itself does not collect, store, or upload any network request data from your browser. All captured data exists only in your browser's local memory and is automatically cleared when you close the tab or refresh the page. If you configure a server forwarding address, data will be sent to the server you specify. The plugin developer has no access to any of your captured data. 🔒 Minimum Permission Principle This plugin only requests the following browser permissions: · storage (local storage) Purpose: To save your settings (server address, language preference, panel position) Scope: Only stores 5 configuration fields; does not store any request data · clipboardWrite** (clipboard write) Purpose: To implement the **「Copy」** button function, writing request data to the clipboard Scope: Triggered only when you actively click the **「Copy」** button; never operates the clipboard automatically · host_permissions (access all URLs) Purpose: To run content scripts on arbitrary web pages, enabling interception of Fetch/XHR requests on those pages Note: This is a necessary permission for any network capture tool. The plugin only intercepts network requests; it does not read or modify page content, nor does it access cookies, passwords, or form data. 🔒 **Local Processing, No Third-Party Involvement** Request interception and data processing all happen locally in your browser. Unless you proactively configure a forwarding address, your data never leaves your device. Payment processing is handled by ExtensionPay and Stripe, both well-known and trusted security-focused payment service providers. ═══════════════════════════════════════════ 【FAQ】 ═══════════════════════════════════════════ Q: Why are some requests not being captured? A: This plugin only captures Fetch API and XHR requests. Static resources (images, JS, CSS), WebSocket connections, and internal browser requests are not within the capture scope. Q: Why do some GET requests show no status code? A: Some GET requests (especially SSE streaming connections) may display `"-"` as the status code when actively interrupted by the page's AbortController. This is normal behavior for streaming requests in browsers. Q: Can I forward data to an HTTP server from an HTTPS page? A: Yes. The plugin forwards requests through a Service Worker background proxy, completely bypassing Mixed Content security restrictions. Both HTTP and HTTPS receiver servers are supported. Q: Does the plugin affect normal page functionality or performance? A: No. The plugin uses Shadow DOM to remain completely isolated from the page, and request interception does not affect the normal sending or receiving of original requests. Page functionality, performance, and styling remain entirely unaffected. Q: What is the maximum number of displayed request records? A: The panel retains the latest 300 records at most. Older records are automatically removed when this limit is exceeded. Q: Which browsers are supported? A: Currently only Google Chrome (version 88+). Chromium-based browsers (such as Microsoft Edge, Brave) are theoretically compatible but have not been officially fully tested. ═══════════════════════════════════════════ 【Version Info】 ═══════════════════════════════════════════ Current Version: 1.0.0 Manifest Version: V3 Minimum Chrome Version: 88+ Tech Stack: Vanilla JavaScript (zero third-party framework dependencies) Interface Languages: English · 简体中文 · 繁體中文 · 한국어 · 日本語 ═══════════════════════════════════════════ Thank you for choosing CatchPacket Plugins. For just $1, a single investment that permanently boosts your development and testing efficiency. If you have any questions or feature suggestions, please leave a comment in the store's review section — we read every piece of feedback carefully.