JSONMaster
JSON yanıtlarını otomatik algılayan; ağaç görünümü, Monaco editör, diff, şema doğrulama ve API inspector sunan Manifest V3 Chrome eklentisi.
- süre
- 1 gün
- ekip
- Solo
- rol
- Chrome Extension / Frontend Developer
- kategori
- Tools (CLI / Geliştirici)
JSONMaster, tarayıcıda ham JSON sayfalarını ve API yanıtlarını geliştirici odaklı tek bir arayüzde incelemek için tasarlanmış bir Chrome eklentisidir. İçerik betiği JSON sayfalarını otomatik algılar; DevTools paneli üzerinden application/json ağ isteklerini yakalar ve sol panelde API Inspector listesinde sunar. Monaco Editor ile sözdizimi vurgulama ve pretty-format; sanal kaydırmalı ağaç görünümü ile büyük dosyalarda düğüm daraltma, arama/filtre ve JSONPath benzeri yol kopyalama; yan yana diff editörü; Ajv ile JSON Schema doğrulama; force-directed graf görselleştirme ve JSON, YAML, CSV, TypeScript tip export seçenekleri tek uygulamada birleştirilir.
VS Code esintili koyu tema, klavye kısayolları (Ctrl+Enter format, Ctrl+F arama, Ctrl+Shift+D diff vb.) ve 50 MB’a kadar streaming parser ile büyük payload optimizasyonu hedeflenir. Kod tabanı core/, features/, ui/, extension/ ve entries/ katmanlarına ayrılmış modüler yapıdadır; yeni özellikler feature modülü ile genişletilebilir.
- JSON algılama ve formatlama: ham JSON sayfalarında banner; pretty-format; Monaco ile sözdizimi vurgulama; streaming parser ve yapı doğrulama ile büyük dosya desteği
- Ağaç görünümü: daraltılabilir düğümler; sanal render (500+ düğüm); anahtar, yol ve değer üzerinden arama/filtre; JSONPath tarzı yol kopyalama
- Diff ve tema: Monaco side-by-side diff editörü; VS Code esintili koyu mod; klavye kısayolu odaklı araç çubuğu
- Gelişmiş araçlar: force-directed graf görselleştirme; Ajv ile JSON Schema doğrulama; DevTools API Inspector (ağ JSON yakalama); JSON, YAML, CSV, TypeScript export
- Modüler mimari: core/ (parser, types), features/ (tree, editor, graph, schema, network, export), ui/ (layout, chrome), extension/ (background, content, devtools)
- Performans ve dayanıklılık: @tanstack/react-virtual ile sanal ağaç; idle yielding ile büyük dosya parse; parse hata mesajları; toplu ağ yakalama listesi (son 100 kayıt)
teknolojiler · 12
- TypeScript
- React 19
- Chrome Extension Manifest V3
- Monaco Editor
- Tailwind CSS
- Zustand
- Vite
- @crxjs/vite-plugin
- @tanstack/react-virtual
- Ajv (JSON Schema)
- react-force-graph-2d
- js-yaml