// sandbox.jsx — the interactive section that replicates the REAL extension // User holds Alt on their real keyboard, hovers elements inside a fake // webpage, and sees exactly the overlay/tooltip VibeFrog would show. // Clicking copies a real payload to their clipboard. function Sandbox() { const stageRef = useRef(null); const overlayRef = useRef(null); const tooltipRef = useRef(null); const [altDown, setAltDown] = useState(false); const [hovered, setHovered] = useState(null); const [copied, setCopied] = useState(null); // {payload, selector, at} const [format, setFormat] = useState('text'); // text | selector const [lastMouse, setLastMouse] = useState({ x: 0, y: 0 }); // Keyboard listeners useEffect(() => { const kd = (e) => { if (e.key === 'Alt') { e.preventDefault(); setAltDown(true); } }; const ku = (e) => { if (e.key === 'Alt') { e.preventDefault(); setAltDown(false); } }; const blur = () => setAltDown(false); window.addEventListener('keydown', kd); window.addEventListener('keyup', ku); window.addEventListener('blur', blur); return () => { window.removeEventListener('keydown', kd); window.removeEventListener('keyup', ku); window.removeEventListener('blur', blur); }; }, []); // Pointer tracking inside stage useEffect(() => { const stage = stageRef.current; if (!stage) return; const onMove = (e) => { setLastMouse({ x: e.clientX, y: e.clientY }); if (!altDown) return; // find deepest inspectable element under cursor const el = document.elementFromPoint(e.clientX, e.clientY); if (!el || !stage.contains(el)) { setHovered(null); return; } const inspectable = el.closest('[data-sbx]'); if (!inspectable || !stage.contains(inspectable)) { setHovered(null); return; } setHovered(inspectable); }; const onClick = (e) => { if (!altDown) return; const el = document.elementFromPoint(e.clientX, e.clientY); if (!el || !stage.contains(el)) return; const inspectable = el.closest('[data-sbx]'); if (!inspectable) return; e.preventDefault(); e.stopPropagation(); const payload = buildPayload(inspectable, format); navigator.clipboard.writeText(payload).catch(() => {}); setCopied({ payload, selector: bestSelector(inspectable), at: Date.now() }); setHovered(null); }; const onContextMenu = async (e) => { if (!altDown) return; const el = document.elementFromPoint(e.clientX, e.clientY); if (!el || !stage.contains(el)) return; const inspectable = el.closest('[data-sbx]'); if (!inspectable) return; e.preventDefault(); e.stopPropagation(); try { const canvas = await window.html2canvas(inspectable, { backgroundColor: '#ffffff', scale: 2, logging: false, }); const dataUrl = canvas.toDataURL('image/png'); canvas.toBlob(blob => { navigator.clipboard.write([new ClipboardItem({ 'image/png': blob })]).catch(() => {}); }); setCopied({ payload: '(screenshot)', selector: bestSelector(inspectable), at: Date.now(), screenshot: dataUrl }); } catch { setCopied({ payload: '(screenshot failed)', selector: bestSelector(inspectable), at: Date.now() }); } setHovered(null); }; window.addEventListener('mousemove', onMove); window.addEventListener('click', onClick, true); window.addEventListener('contextmenu', onContextMenu, true); return () => { window.removeEventListener('mousemove', onMove); window.removeEventListener('click', onClick, true); window.removeEventListener('contextmenu', onContextMenu, true); }; }, [altDown, format]); // Compute overlay rect (in page coords, relative to stage) const overlayRect = (() => { if (!altDown || !hovered || !stageRef.current) return null; const r = hovered.getBoundingClientRect(); const sr = stageRef.current.getBoundingClientRect(); return { left: r.left - sr.left, top: r.top - sr.top, width: r.width, height: r.height, }; })(); const tooltipText = hovered ? bestSelector(hovered) : ''; const tooltipPos = (() => { if (!altDown || !hovered || !stageRef.current) return null; const sr = stageRef.current.getBoundingClientRect(); return { left: lastMouse.x - sr.left + 18, top: lastMouse.y - sr.top + 20 }; })(); const showCopyToast = copied && Date.now() - copied.at < 1800; return (
02 · live sandbox

Don't install yet. Hold Alt and try it out below.

This is the real thing — same selector logic, same overlay, same clipboard payload — running in-page. Hold Alt, hover anything below, click to copy.

{/* Instruction bar */}
{altDown ? 'Alt is down — move to inspect' : 'Hold Alt to inspect'} | {/* Left-click group */}
{[['text','Full text'],['selector','Selector only']].map(([f, label]) => ( ))}
| {/* Right-click group */} Screenshot {copied ? ✓ Copied to clipboard · {copied.selector} : 'Results appear on the right →'}
{/* LEFT — the mock webpage */}
{/* Overlay */} {overlayRect && (
)} {/* Flash on copy */} {copied && Date.now() - copied.at < 500 && overlayRect && (
)} {/* Tooltip */} {tooltipPos && tooltipText && (
{tooltipText}
)} {/* Copy toast */} {showCopyToast && (
✓ Copied
)}
{/* RIGHT — the clipboard output */}
{/* Hint if no Alt pressed recently */}
tip — on mac, Alt = ⌥ option. if your browser steals Alt, try a different window focus.
); } /* ── The mock webpage inside the sandbox browser ────────────── */ function MockPage() { return (
{/* Page header */}
{/* Hero product */}
product · 01 of 04
Apparel · SS26

Lichen hoodie

€129,00

Moss-dyed heavyweight cotton. Runs honest. Available in sizes XS through XXL.

{/* Size picker */}
{['XS','S','M','L','XL','XXL'].map(s => ( ))}
{/* Form */}
{/* Meta list */}
  • — ships in 2 days
  • — free returns, 30 days
  • — naturally dyed
  • — 380 g / m²
); } /* ── Clipboard inspector — shows what was (or would be) copied ─── */ function ClipboardInspector({ copied }) { if (!copied) { return (
clipboard — empty
Hold Alt on your keyboard,
hover anything in the page, then left- or right-click.

Your clipboard payload appears here.
); } return (
✓ clipboard
{copied.payload.length} chars
{copied.screenshot ? (
element screenshot
PNG copied to clipboard
) : ( 
          {copied.payload}
)}
); } /* ── Selector + payload builders — mirror of content.js logic ─── */ function bestSelector(el) { const testAttrs = ['data-testid','data-test-id','data-cy','data-qa']; for (const a of testAttrs) { const v = el.getAttribute(a); if (v) return `[${a}="${v}"]`; } if (el.id) return `#${el.id}`; const aria = el.getAttribute('aria-label'); if (aria) return `${el.tagName.toLowerCase()}[aria-label="${aria}"]`; const role = el.getAttribute('role'); if (role) return `${el.tagName.toLowerCase()}[role="${role}"]`; // class-based short const cls = Array.from(el.classList || []).filter(c => !/^[a-z0-9]{16,}$/i.test(c)).slice(0, 2); if (cls.length) return `${el.tagName.toLowerCase()}.${cls.join('.')}`; return el.tagName.toLowerCase(); } function fallbackSelectors(el) { const out = []; if (el.id) out.push(`#${el.id}`); const a = el.getAttribute('aria-label'); if (a) out.push(`${el.tagName.toLowerCase()}[aria-label="${a}"]`); const n = el.getAttribute('name'); if (n) out.push(`${el.tagName.toLowerCase()}[name="${n}"]`); const p = el.getAttribute('placeholder'); if (p) out.push(`${el.tagName.toLowerCase()}[placeholder="${p}"]`); return [...new Set(out)].slice(0, 4); } function buildPayload(el, format) { const sel = bestSelector(el); if (format === 'selector') return sel; const visibleText = (el.innerText || el.textContent || '').replace(/\s+/g, ' ').trim().slice(0, 160); const fb = fallbackSelectors(el); const outer = el.outerHTML.replace(/\s+/g, ' ').slice(0, 500); const lines = ['// Target UI element:']; lines.push(`url: lab.vibefrog.dev/sandbox`); if (visibleText) lines.push(`text: "${visibleText}"`); lines.push(`best selector: ${sel}`); if (fb.length) lines.push(`fallback selectors: ${fb.join(', ')}`); lines.push(`html:\n${outer}`); return lines.join('\n'); } window.Sandbox = Sandbox;