[ux] sync dom elements to live view#124
Conversation
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
| go func() { | ||
| time.Sleep(10 * time.Millisecond) | ||
| m.injectObserverScript(cdpCtx, conn, m.currentSessionID) | ||
| }() |
There was a problem hiding this comment.
Goroutine captures stale session ID reference
Medium Severity
The goroutines spawned for page load and navigation events use m.currentSessionID after sleeping, but this field could have changed in the meantime. A Target.detachedFromTarget event (lines 509-512) can set m.currentSessionID = "" while the goroutine is sleeping. This causes injectObserverScript to be called with an empty or stale session ID, potentially injecting the script at the wrong level or causing CDP command failures. The already-validated local variable sessionId should be used instead.
Additional Locations (1)
|
|
||
| private connectDomSync() { | ||
| if (!this.isDomSyncEnabled) return | ||
| if (this.domWebSocket && this.domWebSocket.readyState === WebSocket.OPEN) return |
There was a problem hiding this comment.
Missing CONNECTING state check causes orphaned WebSocket connections
Medium Severity
The connectDomSync() guard only checks for WebSocket.OPEN state, not WebSocket.CONNECTING. When the main connection rapidly disconnects and reconnects, the old WebSocket's onclose handler fires asynchronously and schedules a reconnect timer. When this timer fires, if the new WebSocket is still in CONNECTING state, another WebSocket is created, orphaning the previous one. This causes resource leaks (orphaned connections that can't be closed) and state confusion as multiple handlers compete.
1 participant
[ux] sync dom elements to live view
features
usage
via client url params (ie.
http://localhost:8080/?dom_sync=true)dom_sync?dom_sync=false: disabled (default)?dom_sync=true: inputs only?dom_sync=inputs,buttons: comma-separated elementsinputs: text inputs, textarea, select, contenteditable |overlay:purplebuttons: button, submit, reset, [role="button"] |overlay:bluelinks: a[href] |overlay:greenimages: img, picture, svg |overlay:orangemedia: video, audio |overlay:cyandom_overlay?dom_overlay=true|false: shows colored overlays for synced elementsdemo
ux-domsync.mp4
[ @rgarcia ]
Note
Introduces a real-time DOM sync path from Chromium to the client with an interactive overlay to improve remote browser UX.
domsyncpackage using CDP to inject a page observer, broadcasting element data overGET /dom-sync(WebSocket); wired intomain.golifecycledom-overlay.vueand Vuexdommodule to render colored bounding boxes and track state; integrated intovideo.vueapp.vue: connects to DOM sync WebSocket with retry/backoff; toggled via?dom_sync=(supports element type filters) and?dom_overlay=; optional?dom_port=; passesshowDomOverlayanddomSyncTypesto videoWritten by Cursor Bugbot for commit 2abd2e7. This will update automatically on new commits. Configure here.