https://github.com/saadjs/chrome-json-formtr
Simple extension to format JSON responses in Chrome
https://github.com/saadjs/chrome-json-formtr
chrome chrome-extension devtools json
Last synced: 4 days ago
JSON representation
Simple extension to format JSON responses in Chrome
- Host: GitHub
- URL: https://github.com/saadjs/chrome-json-formtr
- Owner: saadjs
- License: mit
- Created: 2025-08-27T22:41:34.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2026-04-01T00:21:32.000Z (2 months ago)
- Last Synced: 2026-04-01T02:44:02.983Z (2 months ago)
- Topics: chrome, chrome-extension, devtools, json
- Language: TypeScript
- Homepage: https://chromewebstore.google.com/detail/json-formtr/hcjipcjiddbnmjlabhdoppkgmphfmedc?authuser=0&hl=en
- Size: 108 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# chrome-json-formtr
A Chrome extension that automatically detects and formats raw JSON responses with syntax highlighting and customizable themes.
**Keyboard shortcut:** Ctrl + Shift + F (or Cmd + Shift + F on Mac) to toggle between raw and formatted JSON views.
## Features
- Syntax highlighting with 11 built-in themes
- Collapsible sections with element counts (e.g. `// 3 keys`, `// 12 items`)
- Sort keys alphabetically (A-Z toggle)
- Byte size and line count display
- Copy formatted JSON, download as file
- URL detection and linkification inside string values
- Smart copy: copies underlying text even when sections are folded
## Project Structure
```
src/
├── background.ts # Service worker for extension lifecycle
├── content_script.ts # Main formatting logic and DOM manipulation
├── options.ts # Settings page functionality
├── popup.ts # Popup UI logic
├── themes.ts # Theme definitions and styling
├── fold_copy.ts # Folding and copy utilities
├── content_script.css # Base styles for formatted JSON
└── vite-env.d.ts # Vite environment types
public/
├── manifest.json # Chrome extension manifest
├── options.html # Settings page UI
├── popup.html # Popup UI
└── options.css # Settings page styles
```
## Installation
### From Source (Development)
```bash
pnpm install # Install dependencies
pnpm run build # Build extension
```
Then load the `dist/` folder as an unpacked extension in Chrome.
### From Distribution
```bash
pnpm run build:zip # Create json-formtr.zip for distribution
```
## Development
```bash
pnpm run dev # Watch mode for development
pnpm run lint # Lint TypeScript files
pnpm run format # Format code with Prettier
pnpm run typecheck # Type check without emitting
```
## License
[MIT](LICENSE) © 2025 Saad Bash