Added nested iframes support and recording coordinates on canvas elements (#13)

Author: suskind

package.json

@@ -1,6 +1,6 @@
 {
   "name": "snyk-api-and-web-record-sequence",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Snyk API & Web Record login/sequence",
   "license": "MIT",
   "scripts": {

src/manifest-firefox.json

@@ -1,6 +1,6 @@
 {
   "name": "Snyk API & Web Sequence Recorder",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "browser_specific_settings": {
     "gecko": {
       "id": "sequence-recorder@probely.com",

src/pages/Content/index.js

@@ -49,8 +49,21 @@ import getCustomSelector from './modules/getCustomSelector';
             evMsg.data.source &&
             evMsg.data.source === 'event-from-iframe'
           ) {
-            const obj = { ...evMsg.data.obj };
+            // Verify the message actually came from a child iframe
             const aFrames = document.querySelectorAll('iframe, frame');
+            let isFromChildFrame = false;
+            for (const frame of aFrames) {
+              if (frame.contentWindow === evMsg.source) {
+                isFromChildFrame = true;
+                break;
+              }
+            }
+            if (!isFromChildFrame) {
+              return; // Message didn't come from any of our iframes
+            }
+
+            const obj = { ...evMsg.data.obj };
+            const framePath = evMsg.data.framePath || [];
             for (const frame of aFrames) {
               if (frame.contentWindow === evMsg.source) {
                 let frameSelector = null;
@@ -81,7 +94,9 @@ import getCustomSelector from './modules/getCustomSelector';
                   }
                 }
                 if (frameSelector && obj.event) {
-                  obj.event.frame = frameSelector;
+                  // Build the complete frame path: [outermost, ..., innermost]
+                  const completeFramePath = [frameSelector, ...framePath];
+                  obj.event.frame = completeFramePath.join(' >>> ');
                   chrome.runtime.sendMessage(obj);
                 }
                 break;
@@ -91,17 +106,90 @@ import getCustomSelector from './modules/getCustomSelector';
         });
       }
 
+      // intermediate frames: listen for messages from child iframes and forward to parent
+      if (window !== window.top) {
+        window.addEventListener('message', (evMsg) => {
+          if (
+            evMsg.data &&
+            evMsg.data.source &&
+            evMsg.data.source === 'event-from-iframe'
+          ) {
+            // Verify the message actually came from a child iframe
+            const aFrames = document.querySelectorAll('iframe, frame');
+            let isFromChildFrame = false;
+            for (const frame of aFrames) {
+              if (frame.contentWindow === evMsg.source) {
+                isFromChildFrame = true;
+                break;
+              }
+            }
+            if (!isFromChildFrame) {
+              return; // Message didn't come from any of our iframes
+            }
+
+            // This is an intermediate frame - find the child iframe and add to path
+            const framePath = evMsg.data.framePath || [];
+
+            for (const frame of aFrames) {
+              if (frame.contentWindow === evMsg.source) {
+                let frameSelector = null;
+                try {
+                  frameSelector = getCustomSelector(frame);
+                } catch (ex) {
+                  // ignore
+                }
+                if (!frameSelector) {
+                  try {
+                    frameSelector = getNodeSelector(frame, {
+                      root: window.document,
+                      idName: (name) => {
+                        return !/^[0-9]+.*/i.test(name);
+                      },
+                      className: (name) => {
+                        return (
+                          !name.includes('focus') &&
+                          !name.includes('highlight') &&
+                          !/^[0-9]+.*/i.test(name)
+                        );
+                      },
+                    });
+                  } catch (ex) {
+                    // ignore
+                  }
+                }
+
+                // Forward to parent with this frame's selector added to path
+                if (frameSelector) {
+                  framePath.push(frameSelector);
+                }
+
+                window.parent.postMessage(
+                  {
+                    source: 'event-from-iframe',
+                    obj: evMsg.data.obj,
+                    framePath: framePath,
+                  },
+                  '*'
+                );
+                break;
+              }
+            }
+          }
+        });
+      }
+
       function eventInterceptopMainHandler(ev) {
         if (ev && ev.type === 'mouseover' && !mutationDetected) {
           return;
         }
         interceptEvents(ev, window.document, null, (obj) => {
           if (window !== window.top) {
-            // If the event is inside a frame, send it to the top
+            // If the event is inside a frame, send it to the parent
             window.parent.postMessage(
               {
                 source: 'event-from-iframe',
                 obj: { ...obj },
+                framePath: [], // Start with empty path, will be built as message bubbles up
               },
               '*'
             );

src/pages/Content/modules/collectEvents.js

@@ -133,15 +133,64 @@ export function interceptEvents(event, doc, ifrSelector, callback) {
         return;
       }
     }
+    let typeStr = 'click';
+    if (nodeName === 'canvas') {
+      const rect = tgt.getBoundingClientRect();
+      const x = event.clientX - rect.left;
+      const y = event.clientY - rect.top;
+      const width = rect.width;
+      const height = rect.height;
+
+      const clickData = { x, y, width, height };
+      oEventBase = { ...oEventBase, coords: clickData };
+
+      typeStr = 'bclick';
+    }
     oEventToSend = {
       ...oEventBase,
-      type: 'click',
+      type: typeStr,
       value: (tgt.value || tgt.textContent || '')
         .trim()
         .substr(0, 20)
         .replace(/\n/gi, ''),
       frame: ifrSelector,
     };
+
+    // Add shadow host CSS selector for bclick events inside shadow DOM
+    if (typeStr === 'bclick' && shadowRootIdx > -1 && composedPath) {
+      const shadowRoot = composedPath[shadowRootIdx];
+      const shadowHost = shadowRoot.host;
+      if (shadowHost) {
+        let shadowHostSelector = null;
+        try {
+          shadowHostSelector = getCustomSelector(shadowHost, doc);
+        } catch (ex) {
+          // ignore
+        }
+        if (!shadowHostSelector) {
+          try {
+            shadowHostSelector = getNodeSelector(shadowHost, {
+              root: doc,
+              idName: (name) => {
+                return !/^[0-9]+.*/i.test(name);
+              },
+              className: (name) => {
+                return (
+                  !name.includes('focus') &&
+                  !name.includes('highlight') &&
+                  !/^[0-9]+.*/i.test(name)
+                );
+              },
+            });
+          } catch (ex) {
+            // ignore
+          }
+        }
+        if (shadowHostSelector) {
+          oEventToSend.shadow_host_css = shadowHostSelector;
+        }
+      }
+    }
   } else if (type === 'dblclick') {
     lastNodes.dblclick = tgt;
     oEventToSend = {

src/pages/Review/Review.jsx

@@ -244,6 +244,10 @@ const Review = (props) => {
       case 'goto':
         newType = 'go to';
         break;
+      case 'click':
+      case 'bclick':
+        newType = 'click';
+        break;
       default:
         newType = type;
         break;