`);
document.documentElement.appendChild(regionHost);
regionRectEl = regionShadow.getElementById('sel');
const sizeEl = regionShadow.getElementById('size');
const surface = regionShadow.getElementById('surface');
const place = (a, b) => {
const x = Math.min(a.x, b.x);
const y = Math.min(a.y, b.y);
const w = Math.abs(a.x - b.x);
const h = Math.abs(a.y - b.y);
regionRectEl.style.display = 'block';
regionRectEl.style.left = `${x}px`;
regionRectEl.style.top = `${y}px`;
regionRectEl.style.width = `${w}px`;
regionRectEl.style.height = `${h}px`;
sizeEl.textContent = `${Math.round(w)} × ${Math.round(h)}`;
return { x, y, w, h };
};
surface.addEventListener('mousedown', (e) => {
if (e.button !== 0) return;
e.preventDefault();
regionStart = { x: e.clientX, y: e.clientY };
place(regionStart, regionStart);
});
surface.addEventListener('mousemove', (e) => {
if (regionStart) place(regionStart, { x: e.clientX, y: e.clientY });
});
surface.addEventListener('mouseup', (e) => {
if (!regionStart) return;
const r = place(regionStart, { x: e.clientX, y: e.clientY });
regionStart = null;
if (r.w < 6 || r.h < 6) {
toast(t('regionTooSmall'));
return;
}
void commitRegionCapture(r);
});
document.addEventListener('keydown', onRegionKey, true);
}
function onRegionKey(e) {
if (e.key === 'Escape') {
e.preventDefault();
endRegionPick();
toast(t('regionCancelled'));
}
}
function endRegionPick() {
regionActive = false;
regionStart = null;
document.removeEventListener('keydown', onRegionKey, true);
if (regionHost) {
regionHost.remove();
regionHost = null;
regionShadow = null;
regionRectEl = null;
}
}
async function commitRegionCapture(r) {
const payloadRect = { x: r.x, y: r.y, width: r.w, height: r.h };
endRegionPick();
startBusy('region');
const hideBar = barOverlapsRect(payloadRect);
// Two frames so our torn-down picker surface is off the compositor before
// the worker screenshots.
await new Promise((done) => requestAnimationFrame(() => requestAnimationFrame(done)));
let res;
try {
res = await chrome.runtime.sendMessage({
type: 'captureRegion',
rect: payloadRect,
viewportWidth: window.innerWidth,
viewportHeight: window.innerHeight,
dpr: window.devicePixelRatio || 1,
sourceUrl: location.href,
sourceTitle: document.title,
hideBar,
});
} catch {
stopBusy();
toast(t('extensionErrorReload'));
return;
}
stopBusy();
if (!res || !res.ok) {
toast(res && res.error === 'not running'
? t('openDesignStartApp')
: t('failed', { error: (res && res.error) || t('unknown') }));
return;
}
toast(res.deduped ? t('regionAlreadyInLibrary') : t('regionSaved'));
}
// --- per-image hover capture badge ---------------------------------------
// A single delegated badge that follows the cursor over images, so any image
// can be clipped in one click. One document-level listener (not per-image)
// keeps it cheap on image-heavy pages. On by default; toggled from the popup.
const IMG_HOVER_MIN = 48; // px — ignore icons/sprites smaller than this
let imgBadgeHost = null;
let imgBadgeBtn = null;
let hoveredImg = null;
let badgeHideTimer = null;
function buildImageBadge() {
if (imgBadgeHost) return;
imgBadgeHost = document.createElement('div');
imgBadgeHost.id = 'od-clipper-imghover';
imgBadgeHost.style.cssText = 'position:fixed;left:0;top:0;z-index:2147483645;display:none;background:transparent;margin:0;padding:0;border:0;pointer-events:none;';
const sh = imgBadgeHost.attachShadow({ mode: 'open' });
setHTML(sh, `
${esc(t('saveImageToOpenDesign'))}
`);
document.documentElement.appendChild(imgBadgeHost);
imgBadgeBtn = sh.getElementById('b');
// The pointer crosses a 1-frame gap between leaving the image and reaching
// the badge; keep it alive while the cursor is on the button.
imgBadgeBtn.addEventListener('mouseenter', () => {
if (badgeHideTimer) clearTimeout(badgeHideTimer);
});
imgBadgeBtn.addEventListener('click', async (e) => {
e.preventDefault();
e.stopPropagation();
const img = hoveredImg;
const src = img && (img.currentSrc || img.src);
if (!src) return;
hideImageBadge();
// The badge vanishes on click, so the toast is the only feedback — keep it
// a spinner that holds until the result replaces it.
toast(t('savingImage'), { loading: true });
let res;
try {
res = await chrome.runtime.sendMessage({
type: 'ingestImages',
images: [{ src, alt: img.alt || '' }],
sourceUrl: location.href,
sourceTitle: document.title,
});
} catch {
toast(t('extensionErrorReload'));
return;
}
if (!res || !res.ok) {
toast(res && res.error === 'not running'
? t('openDesignStartApp')
: t('failed', { error: (res && res.error) || t('unknown') }));
return;
}
toast(res.count ? t('imageSaved') : t('imageSaveFailed'));
});
}
function positionImageBadge(img) {
const r = img.getBoundingClientRect();
if (r.width < IMG_HOVER_MIN || r.height < IMG_HOVER_MIN) {
hideImageBadge();
return;
}
buildImageBadge();
hoveredImg = img;
if (badgeHideTimer) clearTimeout(badgeHideTimer);
imgBadgeHost.style.display = '';
// Inset into the image's top-right corner; clamp into the viewport.
const top = Math.max(4, Math.round(r.top + 6));
const left = Math.min(window.innerWidth - 30, Math.round(r.right - 32));
imgBadgeHost.style.transform = `translate(${left}px, ${top}px)`;
}
function hideImageBadge() {
hoveredImg = null;
if (imgBadgeHost) imgBadgeHost.style.display = 'none';
}
function scheduleHideBadge() {
if (badgeHideTimer) clearTimeout(badgeHideTimer);
badgeHideTimer = setTimeout(hideImageBadge, 140);
}
function setImageHover(enabled, persist) {
imageHoverEnabled = Boolean(enabled);
if (!imageHoverEnabled) hideImageBadge();
if (persist) {
try {
chrome.storage.local.set({ imageHoverCapture: imageHoverEnabled });
} catch {
// storage unavailable — runtime state still applies
}
}
}
function onDocOver(e) {
if (!imageHoverEnabled || hiddenForCapture) return;
const t = e.target;
// Retargeting collapses shadow children to their host, so hovering our own
// badge surfaces here as the `od-clipper-imghover` host → keep it alive.
if (!t || (typeof t.id === 'string' && t.id.startsWith('od-clipper-'))) return;
if (t.tagName === 'IMG') {
positionImageBadge(t);
} else {
scheduleHideBadge();
}
}
function onDocScroll() {
// Badge positions are viewport-fixed; a scroll invalidates them. Hide and
// let the next hover re-place the badge.
if (hoveredImg) hideImageBadge();
}
// --- messages from the popup / service worker ----------------------------
chrome.runtime.onMessage.addListener((msg, _sender, sendResponse) => {
switch (msg && msg.type) {
case 'odClipper:setToolbar':
setVisible(msg.mode === 'toggle' ? !toolbarVisible : msg.visible, true);
sendResponse({ ok: true, visible: toolbarVisible });
return false;
case 'odClipper:getToolbar':
sendResponse({ ok: true, visible: toolbarVisible });
return false;
case 'odClipper:pickElement':
startElementPick();
sendResponse({ ok: true });
return false;
case 'odClipper:pickImages':
pickImages();
sendResponse({ ok: true });
return false;
case 'odClipper:pickRegion':
startRegionPick();
sendResponse({ ok: true });
return false;
case 'odClipper:setImageHover':
setImageHover(Boolean(msg.enabled), true);
sendResponse({ ok: true, enabled: imageHoverEnabled });
return false;
case 'odClipper:getImageHover':
sendResponse({ ok: true, enabled: imageHoverEnabled });
return false;
case 'odClipper:ping':
// Liveness probe — lets the popup distinguish "no content script" from a
// genuinely broken page and decide whether a reload is warranted.
sendResponse({ ok: true, alive: true });
return false;
case 'odClipper:hideForCapture': {
// Pull every piece of our on-page UI out of frame for the screenshot:
// the bar, the cursor-following image badge, and any visible toast.
hiddenForCapture = true;
applyVisibility();
hideImageBadge();
toastHost.style.display = 'none';
requestAnimationFrame(() => requestAnimationFrame(() => sendResponse({ ok: true })));
return true; // async response
}
case 'odClipper:restoreAfterCapture':
hiddenForCapture = false;
applyVisibility();
sendResponse({ ok: true });
return false;
default:
return false;
}
});
// Flag the page as attached only now that the listener above is live. If any
// earlier step had thrown (e.g. a Trusted Types violation on a hostile host
// page), the guard stays unset so a reload or the popup's "Refresh page"
// re-injection can retry — instead of short-circuiting on a half-initialized
// page forever. The whole body above is synchronous, so a concurrent
// re-injection still sees the guard set before it can run past the top check.
window.__odClipperInjected = true;
})();