{"id":50360796,"url":"https://github.com/codeweiz/json-forge-extension","last_synced_at":"2026-05-30T01:20:59.394Z","repository":{"id":342213025,"uuid":"1172651120","full_name":"codeweiz/json-forge-extension","owner":"codeweiz","description":null,"archived":false,"fork":false,"pushed_at":"2026-03-05T07:11:05.000Z","size":365,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-03-05T12:22:46.195Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/codeweiz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-03-04T14:49:05.000Z","updated_at":"2026-03-05T07:11:11.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/codeweiz/json-forge-extension","commit_stats":null,"previous_names":["codeweiz/json-forge-extension"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/codeweiz/json-forge-extension","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeweiz%2Fjson-forge-extension","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeweiz%2Fjson-forge-extension/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeweiz%2Fjson-forge-extension/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeweiz%2Fjson-forge-extension/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codeweiz","download_url":"https://codeload.github.com/codeweiz/json-forge-extension/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeweiz%2Fjson-forge-extension/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33677253,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-05-29T02:00:06.066Z","response_time":107,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-05-30T01:20:58.626Z","updated_at":"2026-05-30T01:20:59.387Z","avatar_url":"https://github.com/codeweiz.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# JSON Forge\n\n\u003e The API developer's All-in-One JSON workbench — Chrome Extension\n\n[中文](./README.zh-CN.md)\n\n[![CI](https://github.com/codeweiz/json-forge-extension/actions/workflows/ci.yml/badge.svg)](https://github.com/codeweiz/json-forge-extension/actions/workflows/ci.yml)\n[![Release](https://img.shields.io/github/v/release/codeweiz/json-forge-extension)](https://github.com/codeweiz/json-forge-extension/releases/latest)\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)\n\nJSON Forge is a Chrome extension built for the entire API development lifecycle. Centered around JSON, it connects **design, development, and testing** into a seamless closed-loop workflow. It auto-renders JSON pages in the browser, captures API traffic from DevTools, and provides a full-featured workbench with code generation, schema validation, mock data, diff, queries, API docs, and test assertions — all without leaving the browser.\n\n## Features\n\n### 1. Auto JSON Page Rendering\n\nWhen the browser opens a URL that returns JSON, JSON Forge automatically detects and renders it:\n\n- Syntax highlighting (strings, numbers, booleans, null color-coded)\n- Collapsible/expandable tree view\n- Top toolbar with one-click \"Open in Forge\" to launch the full workbench\n\n### 2. DevTools Traffic Capture Panel\n\nA dedicated **JSON Forge** panel in Chrome DevTools captures API requests in real time:\n\n| Feature | Description |\n|---------|-------------|\n| **Request List** | Auto-filters JSON responses; shows Method (color-coded), Status, Path, Size, Time |\n| **Request Detail** | Three sub-tabs: Response Body / Request Body / Headers |\n| **Recording Control** | Pause/resume capture, clear list |\n| **One-Click Actions** | Send to Forge, Generate Schema, Save Endpoint, Copy JSON |\n| **Endpoint Management** | Endpoints grouped by domain, auto-aggregated by method + normalized path (numeric/UUID segments replaced with `:param`), up to 20 snapshots per endpoint |\n\n### 3. Forge Workbench (7 Tools)\n\nEnter the full workbench via \"Send to Forge\" from DevTools or \"Open in Forge\" from the page toolbar. Left panel: Monaco editor. Right panel: 7-tab tool suite.\n\n#### Schema — JSON Schema Generation\n\n- Auto-derive JSON Schema from JSON data\n- Supports Draft-07 and Draft-2020-12\n- Real-time generation (300ms debounce)\n- Copy or download\n\n#### CodeGen — Multi-Language Code Generation\n\nGenerate type definitions from JSON in 5 languages:\n\n| Language | Output |\n|----------|--------|\n| **TypeScript** | `interface` + `type` |\n| **Java** | POJO class (private fields + getters/setters) |\n| **Kotlin** | `data class` (nullable `?` support) |\n| **Go** | `struct` (with `json:\"tag\"`, auto PascalCase) |\n| **Python** | Pydantic `BaseModel` (auto camelCase to snake_case) |\n\nSupports nested objects, arrays, union types, integer/float distinction. Copy or download generated code.\n\n#### Mock — Smart Mock Data Generation\n\nTwo modes:\n\n- **Field-Name Inference**: Generates realistic data by analyzing field name semantics (email, name, price, etc. — 16+ recognized field patterns)\n- **Schema Mode**: Generates data based on JSON Schema constraints (minimum/maximum, enum, format, minLength/maxLength)\n\nSupports batch array generation (1-20 items). Faker.js is lazy-loaded for optimal performance.\n\n#### Diff — JSON Comparison\n\n- Field-level diff detection: added (green), removed (red), changed (yellow), unchanged (gray)\n- \"From History\" button: pick a comparison target from saved endpoint snapshots — no manual pasting\n- Change summary stats + one-click copy report\n\n#### Query — JSONPath Queries\n\n- Real-time JSONPath expression evaluation (300ms debounce)\n- Match count and result list\n- 4 built-in example expressions, click to use\n- Powered by jsonpath-plus\n\n#### API Doc — OpenAPI Documentation Generation\n\n- Generate OpenAPI 3.0 spec from saved endpoints\n- Auto-extracts: paths, methods, path parameters, request bodies, response schemas\n- JSON or YAML output format\n- Editable document title and version\n- Select which endpoints to include, then generate + download\n\n#### Validate — Validation \u0026 Testing\n\nThree sub-modes:\n\n**Schema Validation**\n- Paste a schema or load from saved endpoints\n- Validates editor JSON against schema using ajv\n- Detailed error list: field path, error type, expected vs. actual values\n\n**Breaking Change Detection**\n- Compare old and new schemas, auto-detect breaking changes\n- Three severity levels: Breaking (field removed / type changed / new required field) | Warning (optional field added / enum value removed) | Safe\n- Copy change report as Markdown\n\n**Assertion Code Generation**\n- Auto-generate test assertion code from JSON\n- 4 frameworks: Jest/Vitest, Chai, Playwright, pytest\n- Recursively traverses JSON structure; generates type checks, null checks, array checks\n\n### 4. Additional Features\n\n- **Theme**: Light, Dark, and Auto (follows system preference)\n- **Internationalization (i18n)**: English and Chinese, switchable in Settings\n- **Keyboard Shortcuts**:\n  | Shortcut | Action |\n  |----------|--------|\n  | `Cmd/Ctrl+Shift+F` | Format JSON |\n  | `Cmd/Ctrl+Shift+M` | Minify JSON |\n  | `Cmd/Ctrl+Shift+C` | Copy to clipboard |\n  | `Cmd/Ctrl+S` | Download file |\n  | `Cmd/Ctrl+,` | Open Settings |\n  | `Cmd/Ctrl+1-7` | Switch tool tabs |\n  | `Esc` | Close drawer |\n- **Settings Panel**: Theme, language, font size, tab size, word wrap, minimap — all persisted\n- **Toast Notifications**: Non-intrusive feedback for copy, save, export, and error actions\n- **Welcome Guide**: 3-step onboarding walkthrough for first-time users (re-accessible from Settings)\n- **History**: Auto-saves editor content (after 10s idle), persists across sessions, load/clear support\n- **JSON Toolbar**: Format, Minify, Fix (repair broken JSON), Escape, Unescape\n- **Export**: Copy to clipboard or download as file\n\n## Installation\n\n### Development Mode\n\n```bash\n# Clone the repository\ngit clone https://github.com/codeweiz/json-forge-extension.git\ncd json-forge-extension\n\n# Install dependencies (pnpm required)\npnpm install\n\n# Start dev server\npnpm dev\n```\n\nLoad the extension in Chrome:\n\n1. Open `chrome://extensions/`\n2. Enable \"Developer mode\"\n3. Click \"Load unpacked\"\n4. Select the project root directory (CRXJS handles HMR automatically)\n\n### Production Build\n\n```bash\npnpm build\n```\n\nBuild output is in `dist/` — load it as an unpacked extension in Chrome.\n\n### Pre-built Release\n\nDownload the latest `.zip` or `.crx` from [GitHub Releases](https://github.com/codeweiz/json-forge-extension/releases/latest). Unzip and load as an unpacked extension, or drag the `.crx` file into `chrome://extensions/`.\n\n## Tech Stack\n\n| Category | Technology |\n|----------|------------|\n| Framework | React 19 + TypeScript 5.9 |\n| Build | Vite 7 + CRXJS (Chrome Extension Vite Plugin) |\n| Styling | Tailwind CSS v4 |\n| Editor | Monaco Editor |\n| Validation | ajv + ajv-formats |\n| Mock Data | @faker-js/faker |\n| Query | jsonpath-plus |\n| Repair | jsonrepair |\n| Testing | Vitest |\n\n## Project Structure\n\n```\nsrc/\n├── manifest.ts                     # Chrome MV3 manifest\n├── i18n/                           # Internationalization\n│   ├── i18n.tsx                    #   I18nProvider + translate()\n│   └── locales/                    #   en.json, zh.json\n├── shared/                         # Shared modules\n│   ├── types.ts                    #   Type definitions (Endpoint, RequestMeta, etc.)\n│   ├── messaging.ts                #   Message protocol + utilities\n│   ├── endpointDb.ts               #   Endpoint storage CRUD\n│   ├── schemaMerge.ts              #   Multi-response schema merging\n│   ├── settings.ts                 #   Settings type + load/save\n│   ├── SettingsProvider.tsx         #   React settings context provider\n│   ├── shortcuts.ts                #   Keyboard shortcut definitions\n│   └── ToastProvider.tsx            #   Toast notification context\n├── devtools/                       # DevTools panel\n│   ├── devtools.ts                 #   Panel registration\n│   └── panel/                      #   Panel UI\n│       ├── PanelApp.tsx            #     Main app (Requests/Endpoints views)\n│       ├── useNetworkCapture.ts    #     Network request capture hook\n│       ├── RequestList.tsx         #     Request list\n│       ├── RequestDetail.tsx       #     Request detail + action bar\n│       └── EndpointList.tsx        #     Endpoint list (grouped by domain)\n├── background/\n│   └── index.ts                    # Service Worker message router\n├── content/                        # Content script (lightweight DOM, no React)\n│   ├── detector.ts                 #   JSON page detection\n│   ├── renderer.ts                 #   JSON tree rendering\n│   ├── toolbar.ts                  #   Top toolbar\n│   └── index.ts                    #   Entry point\n├── forge/                          # Forge workbench\n│   ├── App.tsx                     #   Main app\n│   ├── components/                 #   Shared components (Layout, SplitPane, TabBar)\n│   └── features/\n│       ├── editor/                 #   Monaco editor + JSON utilities\n│       ├── schema/                 #   JSON Schema generation\n│       ├── codegen/                #   Multi-language code generation\n│       │   └── generators/         #     TypeScript, Java, Kotlin, Go, Python\n│       ├── mock/                   #   Mock data generation (field-name + schema modes)\n│       ├── diff/                   #   JSON diff + history comparison\n│       ├── query/                  #   JSONPath queries\n│       ├── apidoc/                 #   OpenAPI document generation\n│       ├── validate/               #   Schema validation + breaking changes + assertions\n│       ├── history/                #   History management\n│       ├── workbench/              #   Tool panel (7-tab routing)\n│       ├── settings/               #   Settings drawer\n│       └── welcome/                #   Welcome onboarding modal\n└── popup/                          # Extension popup\n```\n\n## Development\n\n```bash\n# Run tests\npnpm vitest run\n\n# Run a single test file\npnpm vitest run src/shared/messaging.test.ts\n\n# Dev mode (HMR)\npnpm dev\n\n# Production build\npnpm build\n\n# Lint\npnpm lint\n```\n\n## Design Philosophy\n\n**Closed-Loop Workflow**: JSON Forge's core differentiator is its bidirectional closed loop — it generates contracts (schemas) from real API traffic, then drives code generation, mock data, documentation, and tests from those contracts. This makes it not just a JSON formatter, but a full-cycle API development workbench covering design, development, and testing.\n\n**Browser-Native**: Everything happens inside the browser. No need to switch to Postman, Swagger Editor, or other external tools. The DevTools panel integrates seamlessly into the developer's existing workflow.\n\n**Lightweight-First**: The content script uses vanilla DOM (no React). Faker.js is lazy-loaded. Monaco Editor initializes on demand. The extension never compromises page performance.\n\n## License\n\n[MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodeweiz%2Fjson-forge-extension","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodeweiz%2Fjson-forge-extension","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodeweiz%2Fjson-forge-extension/lists"}