Show avatars loaded from Supabase
// ==UserScript==
// @name Tandro Avatar stealer
// @namespace https://tandro.de/
// @icon https://i.ibb.co/BKwQLg9P/logo-small-4.png
// @version 1.12
// @author ##########
// @license MIT
// @description Show avatars loaded from Supabase
// @match https://tandro.de/*
// @grant none
// ==/UserScript==
(function () {
'use strict';
const avatarHost = 'https://cyehwjytcqcjmsvprrgh.supabase.co/storage/v1/object/public/avatars/';
const seen = new Set();
let container = null;
let avatarList = null;
let header = null;
// State for dragging
let isDragging = false;
let dragStartX = 0;
let dragStartY = 0;
let panelStartLeft = 0;
let panelStartTop = 0;
function createPanel() {
if (container) return;
container = document.createElement('div');
container.id = 'avatar-monitor';
Object.assign(container.style, {
position: 'fixed',
top: '80px',
right: '80px',
width: '320px',
height: '420px',
background: '#2a1a3d',
border: '1px solid #4b367c',
borderRadius: '8px',
boxShadow: '0 4px 12px rgba(75, 54, 124, 0.7)',
resize: 'both',
overflow: 'hidden',
padding: '0',
zIndex: '9999',
fontFamily: '"Segoe UI", Tahoma, Geneva, Verdana, sans-serif',
fontSize: '13px',
userSelect: 'none',
cursor: 'default',
display: 'flex',
flexDirection: 'column',
color: '#ddd',
});
// Header (sticky, fixed within panel)
header = document.createElement('div');
Object.assign(header.style, {
flexShrink: '0',
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
padding: '8px 12px',
backgroundColor: '#5e3b9a',
color: '#eee',
fontWeight: '600',
fontSize: '14px',
cursor: 'move',
userSelect: 'none',
borderTopLeftRadius: '8px',
borderTopRightRadius: '8px',
boxShadow: '0 2px 6px rgba(0,0,0,0.4)',
position: 'relative',
zIndex: '10',
});
header.textContent = '🖼️ click to download';
// Close button inside header
const closeBtn = document.createElement('button');
closeBtn.textContent = '✕';
closeBtn.title = 'Schließen';
Object.assign(closeBtn.style, {
fontSize: '18px',
background: 'transparent',
border: 'none',
color: '#eee',
cursor: 'pointer',
padding: '0 6px',
userSelect: 'none',
lineHeight: '1',
borderRadius: '4px',
transition: 'background-color 0.2s',
});
closeBtn.onmouseenter = () => closeBtn.style.backgroundColor = 'rgba(255,255,255,0.15)';
closeBtn.onmouseleave = () => closeBtn.style.backgroundColor = 'transparent';
closeBtn.onclick = () => {
container.remove();
container = null;
};
header.appendChild(closeBtn);
container.appendChild(header);
// Avatar list container scrolls separately
avatarList = document.createElement('div');
Object.assign(avatarList.style, {
flexGrow: '1',
overflowY: 'auto',
padding: '10px',
display: 'flex',
flexWrap: 'wrap',
gap: '8px',
backgroundColor: '#3a255f',
borderBottomLeftRadius: '8px',
borderBottomRightRadius: '8px',
});
container.appendChild(avatarList);
document.body.appendChild(container);
// Set up dragging behavior on header
header.addEventListener('mousedown', dragStart);
}
// Drag event handlers
function dragStart(e) {
if (e.target.tagName === 'BUTTON') return;
isDragging = true;
dragStartX = e.clientX;
dragStartY = e.clientY;
// Get current left/top as numbers, fallback if style not set
const rect = container.getBoundingClientRect();
panelStartLeft = rect.left;
panelStartTop = rect.top;
// Change cursor globally and disable text selection
document.body.style.userSelect = 'none';
document.body.style.cursor = 'move';
window.addEventListener('mousemove', dragMove);
window.addEventListener('mouseup', dragEnd);
}
function dragMove(e) {
if (!isDragging) return;
const dx = e.clientX - dragStartX;
const dy = e.clientY - dragStartY;
// Update container position (constrain to viewport)
let newLeft = panelStartLeft + dx;
let newTop = panelStartTop + dy;
// Prevent going too far off screen (you can adjust these limits)
const maxLeft = window.innerWidth - container.offsetWidth;
const maxTop = window.innerHeight - container.offsetHeight;
newLeft = Math.min(Math.max(0, newLeft), maxLeft);
newTop = Math.min(Math.max(0, newTop), maxTop);
Object.assign(container.style, {
left: `${newLeft}px`,
top: `${newTop}px`,
right: 'auto', // disable right positioning once dragged
});
}
function dragEnd() {
isDragging = false;
document.body.style.userSelect = '';
document.body.style.cursor = '';
window.removeEventListener('mousemove', dragMove);
window.removeEventListener('mouseup', dragEnd);
}
// Add avatar images if not yet shown
function addAvatar(url) {
if (seen.has(url)) return;
seen.add(url);
createPanel();
const img = document.createElement('img');
img.src = url;
Object.assign(img.style, {
width: '64px',
height: '64px',
objectFit: 'cover',
borderRadius: '6px',
border: '1px solid #ccc',
boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
cursor: 'default',
});
img.title = url.split('/').pop();
avatarList.appendChild(img);
}
// Scan page for avatars
function scanAndAddAvatars() {
document.querySelectorAll('img').forEach(img => {
if (img.src.startsWith(avatarHost)) {
addAvatar(img.src);
}
});
}
// Watch DOM for new avatars added dynamically
function watchForAvatars() {
scanAndAddAvatars();
const observer = new MutationObserver(mutations => {
for (const m of mutations) {
for (const node of m.addedNodes) {
if (node.tagName === 'IMG' && node.src.startsWith(avatarHost)) {
addAvatar(node.src);
} else if (node.querySelectorAll) {
node.querySelectorAll('img').forEach(img => {
if (img.src.startsWith(avatarHost)) {
addAvatar(img.src);
}
});
}
}
}
});
observer.observe(document.body, { childList: true, subtree: true });
}
// Helper to generate random filename
function randomFilename(extension = 'png') {
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
let randomStr = '';
for (let i = 0; i < 6; i++) {
randomStr += chars.charAt(Math.floor(Math.random() * chars.length));
}
return `avatar_${randomStr}.${extension}`;
}
// Add click-to-download with EXIF strip for avatars
function addAvatar(url) {
if (seen.has(url)) return;
seen.add(url);
createPanel();
const img = document.createElement('img');
img.src = url;
Object.assign(img.style, {
width: '64px',
height: '64px',
objectFit: 'cover',
borderRadius: '6px',
border: '1px solid #ccc',
boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
cursor: 'pointer', // clickable now
});
img.title = url.split('/').pop();
// On click, download stripped & randomized filename
img.addEventListener('click', async () => {
try {
const response = await fetch(url, {cache: 'no-store'});
if (!response.ok) throw new Error('Network response was not ok');
const blob = await response.blob();
// Create ImageBitmap for canvas drawing (strip EXIF)
const imageBitmap = await createImageBitmap(blob);
const canvas = document.createElement('canvas');
canvas.width = imageBitmap.width;
canvas.height = imageBitmap.height;
const ctx = canvas.getContext('2d');
ctx.drawImage(imageBitmap, 0, 0);
// Convert canvas to blob (PNG) — this strips EXIF
canvas.toBlob((strippedBlob) => {
if (!strippedBlob) {
alert('Failed to process image.');
return;
}
const downloadUrl = URL.createObjectURL(strippedBlob);
const a = document.createElement('a');
a.href = downloadUrl;
// Try to preserve extension or use png if unknown
let ext = 'png';
const parts = url.split('.');
if (parts.length > 1) {
const possibleExt = parts.pop().toLowerCase();
if (['png','jpg','jpeg','gif','webp','bmp'].includes(possibleExt)) {
ext = possibleExt === 'jpeg' ? 'jpg' : possibleExt;
}
}
a.download = randomFilename(ext);
document.body.appendChild(a);
a.click();
a.remove();
URL.revokeObjectURL(downloadUrl);
}, 'image/png');
} catch (err) {
alert('Download failed: ' + err.message);
}
});
avatarList.appendChild(img);
}
// Insert toggle button in sidebar
function createToggleButton() {
if (document.getElementById('avatar-toggle-btn')) return;
const btn = document.createElement('button');
btn.id = 'avatar-toggle-btn';
Object.assign(btn.style, {
position: 'fixed',
top: '1px',
left: '1px',
zIndex: '10000',
width: '60px',
height: '60px',
padding: '0',
border: 'none',
borderRadius: '6px',
cursor: 'pointer',
backgroundColor: 'transparent',
boxShadow: '0 2px 6px rgba(0,0,0,0.2)',
});
// Create img inside button
const img = document.createElement('img');
img.src = 'https://i.ibb.co/BKwQLg9P/logo-small-4.png'; //
img.alt = 'start stealer';
Object.assign(img.style, {
width: '100%',
height: '100%',
display: 'block',
borderRadius: '6px',
});
btn.appendChild(img);
btn.addEventListener('mouseenter', () => {
btn.style.filter = 'brightness(0.8)';
});
btn.addEventListener('mouseleave', () => {
btn.style.filter = 'none';
});
btn.addEventListener('click', () => {
if (container && document.body.contains(container)) {
container.remove();
container = null;
} else {
createPanel();
scanAndAddAvatars();
}
});
document.body.appendChild(btn);
}
createToggleButton();
insertSidebarButton();
watchForAvatars();
})();