Görsel Boyut Analizcisi

Canlı Demo: Yerinde Gösterim

Bu modda eklenti, bir liste açmak yerine doğrudan resimlerin üzerine boyut etiketleri yapıştırır. Aşağıdaki "Aktif Et" butonunu deneyin.

Taranacak Örnek Görseller

Eklenti Önizlemesi v2.0 Overlay

Görsel Boyutları

Sayfadaki resimlerin üzerine boyut etiketi yapıştırır.

...js injected

Kurulum Kodları (Overlay Modu)

Bu yeni sürüm, boyutları liste yerine direkt resimlerin üzerinde gösterir. Aşağıdaki kodları kullanın.

{
  "manifest_version": 3,
  "name": "Resim Boyut Overlay",
  "version": "2.0",
  "description": "Resimlerin üzerine boyutlarını yazar.",
  "permissions": ["activeTab", "scripting"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
        "16": "icon.png", 
        "48": "icon.png"
    }
  },
  "icons": {
    "16": "icon.png",
    "48": "icon.png"
  }
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    body { width: 250px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; padding: 15px; background: #f8fafc; text-align: center; }
    h3 { margin: 0 0 15px 0; color: #334155; font-size: 16px; }
    button {
      width: 100%; background: #4f46e5; color: white; border: none;
      padding: 12px; border-radius: 8px; cursor: pointer; font-weight: 600;
      transition: background 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px;
    }
    button:hover { background: #4338ca; }
    .note { font-size: 11px; color: #94a3b8; margin-top: 10px; }
  </style>
</head>
<body>
  <h3>📏 Boyut Gösterici</h3>
  <button id="toggleBtn">
    <span>Aç / Kapa</span>
  </button>
  <div class="note">Resimlerin üzerinde etiketler belirecektir.</div>
  <script src="popup.js"></script>
</body>
</html>

document.getElementById('toggleBtn').addEventListener('click', async () => {
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: toggleImageOverlays,
  });
});

// Bu fonksiyon sitenin icinde calisir
function toggleImageOverlays() {
  // Eger zaten varsa temizle (Kapatma mantigi)
  const existingBadges = document.querySelectorAll('.my-img-size-badge');
  if (existingBadges.length > 0) {
    existingBadges.forEach(el => el.remove());
    return;
  }

  // Yoksa ekle
  const imgs = document.querySelectorAll('img');
  let count = 0;

  imgs.forEach(img => {
    // Cok kucuk ikonlari atla
    if(img.width < 30 || img.height < 30) return;

    const rect = img.getBoundingClientRect();
    
    // Eger resim gorunur degilse atla
    if(rect.width === 0 || rect.height === 0) return;

    const badge = document.createElement('div');
    badge.className = 'my-img-size-badge';
    
    // Icerik
    const naturalW = img.naturalWidth;
    const naturalH = img.naturalHeight;
    const displayW = Math.round(rect.width);
    const displayH = Math.round(rect.height);
    
    // Renk: Eger resize edilmisse turuncu, degilse yesil
    const isScaled = (naturalW !== displayW) || (naturalH !== displayH);
    const color = isScaled ? '#fb923c' : '#4ade80';

    badge.innerHTML = `
      Doğal: ${naturalW}x${naturalH}
      Ekran: ${displayW}x${displayH}
    `;

    // Stil (Position Absolute ile sayfa uzerine yerlestiriyoruz)
    Object.assign(badge.style, {
      position: 'absolute',
      // Sayfa scroll durumunu hesaba katarak pozisyonla
      top: (window.scrollY + rect.top) + 'px',
      left: (window.scrollX + rect.left) + 'px',
      background: 'rgba(0,0,0,0.85)',
      color: 'white',
      padding: '4px 8px',
      borderRadius: '4px',
      zIndex: '2147483647', // En ustte olmasi icin max z-index
      pointerEvents: 'none', // Tiklamalari engellemesin
      fontFamily: 'monospace',
      boxShadow: '0 2px 5px rgba(0,0,0,0.3)',
      lineHeight: '1.2'
    });

    document.body.appendChild(badge);
    count++;
  });
  
  console.log(count + " resim etiketlendi.");
}

Dikkat: Bu kodlar "popup.js" içinde çalışır ancak executeScript komutu ile asıl kodu siteye (Content Script olarak) enjekte eder. Böylece etiketler sitenin bir parçası gibi görünür.