APIScribe

A Chrome DevTools extension for frontend developers. Records XHR / Fetch API calls — endpoint, method, request payload, status, headers, response body — in the order they occur, then exports the full session as a structured .txt or .md file.

---

Features

• DevTools panel — lives alongside the Network tab, not a popup
• Start / Pause / Resume / Stop — full recording control without losing captured data
• Pause & Resume — suspend capture mid-session and continue appending to the same file
• Configurable fields — choose exactly which data to include per capture
• Two output formats — Plain Text or Markdown
• Custom filename — prompted on Stop & Save, pre-filled with a timestamp
• No external dependencies — pure Chrome Extension APIs, no backend

---

Quick Start

# 1. Generate icons (one-time, requires Node.js)
node icons/create_icons.js

# 2. Load into Chrome
# chrome://extensions → Developer mode ON → Load unpacked → select this folder

# 3. Open DevTools on any page → click "APIScribe" tab

For full instructions see the docs below.

---

Documentation

Document	Description
Local Testing Guide	Load the extension from source, test it step by step
Deployment Guide	Share with your team via zip, Chrome Web Store, or Group Policy
User Guide	How to use the extension, all settings explained, sample output, FAQ

---

Project Structure

PayloadCollector/
├── manifest.json          Chrome extension manifest (v3)
├── background.js          Service worker — handles file downloads
├── devtools_page.html     Registers the DevTools panel
├── devtools_page.js
├── panel.html             DevTools panel UI
├── panel.css
├── panel.js               Recording logic + file generators
├── options.html           Settings page
├── options.css
├── options.js
├── icons/
│   ├── create_icons.js    Node.js script — generates PNG icons
│   ├── icon16.png
│   ├── icon32.png
│   ├── icon48.png
│   └── icon128.png
└── docs/
    ├── LOCAL_TESTING.md
    ├── DEPLOYMENT.md
    └── USER_GUIDE.md

---

Default Settings

Field	Default
Format	Plain Text (.txt)
Timestamp	On
Latency	On
Response Status	On
Request Payload	On
Request Headers	Off
Response Body	Off
Response Headers	Off

All settings are persisted via chrome.storage.sync and available on the Settings page.