Web Master Tools - All in One Chrome Extension

Modern Chrome uzantısı ile web geliştirme araçları paketi.

Özellikler

Font Bulucu

• Mouse ile elementlerin üzerine gelerek font bilgilerini görüntüle
• Font Family, Font Size, Line Height, Color bilgileri
• ESC tuşu ile kapatma

Dark Mode

• Sayfayı anında karanlık moda çevir
• Resim ve videoları koruyarak bozulmayı önle
• Kullanıcı tercihini kaydet

Teknoloji Analizi

• Sayfadaki teknolojileri otomatik tespit et
• CMS, JavaScript framework'leri, CSS framework'leri
• Analytics araçları ve e-commerce platformları

Performans Analizi

• Modern Performance API ile detaylı metrikler
• Load Time, DOM Content Loaded, LCP, FCP, TTFB
• Renk kodlaması ile performans durumu

Dosya Yapısı

chrome-extension-skeleton/
├── manifest.json          # Uzantı yapılandırması
├── popup.html            # Popup arayüzü
├── popup.css             # Popup stilleri
├── popup.js              # Popup mantığı
├── content.js            # Sayfa içi script
├── background.js         # Servis worker
├── icons/                # İkonlar (16x16, 48x48, 128x128)
│   ├── icon16.png
│   ├── icon48.png
│   └── icon128.png
└── README.md             # Bu dosya

Kurulum

1. Chrome'u aç ve adres çubuğuna chrome://extensions yaz
2. Geliştirici Modu (Developer Mode) anahtarını aç
3. Paketlenmemiş öğe yükle (Load unpacked) butonuna tıkla
4. Proje klasörünü seç
5. Uzantı tarayıcıya yüklendi!

Kullanım

1. Tarayıcının sağ üstündeki yapboz ikonuna tıkla
2. "Web Master Tools" uzantısını bul ve raptiye ikonuyla sabitle
3. Herhangi bir web sitesinde ikona tıkla ve araçları kullan

İzinler

• activeTab: Aktif sekme üzerinde işlem yapmak
• scripting: Script enjekte etmek için
• storage: Kullanıcı tercihlerini kaydetmek için
• <all_urls>: Tüm web sitelerinde çalışmak için

Teknik Detaylar

• Manifest V3 uyumlu
• Modern JavaScript (ES6+)
• Performance API ve PerformanceObserver kullanımı
• Responsive popup tasarımı
• ESC tuşu desteği

Gelecek Özellikler

• SEO analizi
• Accessibility kontrolü
• Responsive test araçları
• Color picker
• CSS grid inspector

Lisans

MIT License - İstediğiniz gibi kullanabilirsiniz.

---

Web Master Tools - Her geliştiricinin ihtiyaç duyduğu araçlar tek bir uzantıda! 🚀