diff --git a/packages/extension/src/entrypoints/sidepanel/components/misc.tsx b/packages/extension/src/entrypoints/sidepanel/components/misc.tsx index fce2085..d5dec53 100644 --- a/packages/extension/src/entrypoints/sidepanel/components/misc.tsx +++ b/packages/extension/src/entrypoints/sidepanel/components/misc.tsx @@ -43,20 +43,24 @@ export function MotionOverlay({ active }: { active: boolean }) { const motionRef = useRef(null) useEffect(() => { - const mode = document.documentElement.classList.contains('dark') ? 'dark' : 'light' - const motion = new Motion({ - mode, - borderWidth: 4, - borderRadius: 14, - glowWidth: mode === 'dark' ? 120 : 60, - styles: { position: 'absolute', inset: '0' }, - }) - motionRef.current = motion - containerRef.current!.appendChild(motion.element) - motion.autoResize(containerRef.current!) + try { + const mode = document.documentElement.classList.contains('dark') ? 'dark' : 'light' + const motion = new Motion({ + mode, + borderWidth: 4, + borderRadius: 14, + glowWidth: mode === 'dark' ? 120 : 60, + styles: { position: 'absolute', inset: '0' }, + }) + motionRef.current = motion + containerRef.current!.appendChild(motion.element) + motion.autoResize(containerRef.current!) + } catch (e) { + console.warn('[MotionOverlay] Motion unavailable:', e) + } return () => { - motion.dispose() + motionRef.current?.dispose() motionRef.current = null } }, []) diff --git a/packages/page-controller/src/mask/SimulatorMask.ts b/packages/page-controller/src/mask/SimulatorMask.ts index 9d7a0a3..2971db2 100644 --- a/packages/page-controller/src/mask/SimulatorMask.ts +++ b/packages/page-controller/src/mask/SimulatorMask.ts @@ -8,13 +8,7 @@ import cursorStyles from './cursor.module.css' export class SimulatorMask { shown: boolean = false wrapper = document.createElement('div') - motion = new Motion({ - mode: isPageDark() ? 'dark' : 'light', - styles: { - position: 'absolute', - inset: '0', - }, - }) + motion: Motion | null = null #cursor = document.createElement('div') @@ -30,8 +24,17 @@ export class SimulatorMask { this.wrapper.setAttribute('data-browser-use-ignore', 'true') this.wrapper.setAttribute('data-page-agent-ignore', 'true') - this.wrapper.appendChild(this.motion.element) - this.motion.autoResize(this.wrapper) + try { + const motion = new Motion({ + mode: isPageDark() ? 'dark' : 'light', + styles: { position: 'absolute', inset: '0' }, + }) + this.motion = motion + this.wrapper.appendChild(motion.element) + motion.autoResize(this.wrapper) + } catch (e) { + console.warn('[SimulatorMask] Motion overlay unavailable:', e) + } // Capture all mouse, keyboard, and wheel events this.wrapper.addEventListener('click', (e) => { @@ -145,8 +148,8 @@ export class SimulatorMask { if (this.shown) return this.shown = true - this.motion.start() - this.motion.fadeIn() + this.motion?.start() + this.motion?.fadeIn() this.wrapper.style.display = 'block' @@ -163,8 +166,8 @@ export class SimulatorMask { if (!this.shown) return this.shown = false - this.motion.fadeOut() - this.motion.pause() + this.motion?.fadeOut() + this.motion?.pause() this.#cursor.classList.remove(cursorStyles.clicking) @@ -174,7 +177,7 @@ export class SimulatorMask { } dispose() { - this.motion.dispose() + this.motion?.dispose() this.wrapper.remove() } }