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.