Add mouseover and mouseout event listeners to highlight elements during recording

Author: os1rix

extension/src/entrypoints/content.ts

@@ -206,6 +206,8 @@ function startRecorder() {
   document.addEventListener('input', handleInput, true);
   document.addEventListener('change', handleSelectChange, true);
   document.addEventListener('keydown', handleKeydown, true);
+  document.addEventListener('mouseover', handleMouseOver, true);
+  document.addEventListener('mouseout', handleMouseOut, true);
   console.log('Permanently attached custom event listeners.');
 }
 
@@ -221,6 +223,8 @@ function stopRecorder() {
     document.removeEventListener('input', handleInput, true);
     document.removeEventListener('change', handleSelectChange, true); // Remove change listener
     document.removeEventListener('keydown', handleKeydown, true); // Remove keydown listener
+    document.removeEventListener('mouseover', handleMouseOver, true);
+    document.removeEventListener('mouseout', handleMouseOut, true);
   } else {
     console.log('Recorder not running, cannot stop.');
   }
@@ -391,6 +395,66 @@ function handleKeydown(event: KeyboardEvent) {
 }
 // --- End Custom Keydown Handler ---
 
+// Store the current overlay to manage its lifecycle
+let currentOverlay: HTMLDivElement | null = null;
+
+// Handle mouseover to create overlay
+function handleMouseOver(event: MouseEvent) {
+  if (!isRecordingActive) return;
+  const targetElement = event.target as HTMLElement;
+  if (!targetElement) return;
+
+  // Remove any existing overlay to avoid duplicates
+  if (currentOverlay) {
+    // console.log('Removing existing overlay');
+    currentOverlay.remove();
+    currentOverlay = null;
+  }
+
+  try {
+    const xpath = getXPath(targetElement);
+    // console.log('XPath of target element:', xpath);
+    const elementToHighlight = document.evaluate(
+      xpath,
+      document,
+      null,
+      XPathResult.FIRST_ORDERED_NODE_TYPE,
+      null
+    ).singleNodeValue as HTMLElement;
+    if (elementToHighlight) {
+      const rect = elementToHighlight.getBoundingClientRect();
+      const highlightOverlay = document.createElement('div');
+      highlightOverlay.className = 'highlight-overlay';
+      Object.assign(highlightOverlay.style, {
+        position: 'absolute',
+        top: `${rect.top + window.scrollY}px`,
+        left: `${rect.left + window.scrollX}px`,
+        width: `${rect.width}px`,
+        height: `${rect.height}px`,
+        border: '2px solid lightgreen',
+        backgroundColor: 'rgba(144, 238, 144, 0.2)', // lightgreen tint
+        pointerEvents: 'none',
+        zIndex: '2147483000',
+      });
+      document.body.appendChild(highlightOverlay);
+      currentOverlay = highlightOverlay;
+    } else {
+      console.warn('No element found to highlight for xpath:', xpath);
+    }
+  } catch (error) {
+    console.error('Error creating highlight overlay:', error);
+  }
+}
+
+// Handle mouseout to remove overlay
+function handleMouseOut(event: MouseEvent) {
+  if (!isRecordingActive) return;
+  if (currentOverlay) {
+    currentOverlay.remove();
+    currentOverlay = null;
+  }
+}
+
 export default defineContentScript({
   matches: ['<all_urls>'],
   main(ctx) {
@@ -443,6 +507,8 @@ export default defineContentScript({
       document.removeEventListener('input', handleInput, true);
       document.removeEventListener('change', handleSelectChange, true);
       document.removeEventListener('keydown', handleKeydown, true);
+      document.removeEventListener('mouseover', handleMouseOver, true);
+      document.removeEventListener('mouseout', handleMouseOut, true);
       stopRecorder(); // Ensure rrweb is stopped
     });