A Chrome extension I'm developing injects a content script into the active tab, including all frames on the page using allFrames: true. In the content script, an event listener detects click events in the DOM and retrieves the coordinates (x and y) of the click. Whenever I click inside a nested iframe within the page, the coordinates I obtain are relative to the iframe window rather than the main browser window. The click coordinates must, however, be relative to the browser window, regardless of whether the click occurs within an iframe or the root document.
To retrieve the click coordinates directly, I initially used event.clientX and event.clientY. Unfortunately, this only provides me with coordinates for the iframe, not the main browser window.
I attempted to traverse the iframe hierarchy using window.parent within the content script to access the parent window and calculate the relative coordinates. Unfortunately, this approach didn't work as expected, as I couldn't find a reliable way to establish the correct positioning. Similarly accessing the parent element's DOM gives CORS, so this method is not reliable either.
I understand that iframe boundaries can complicate coordinate calculations. I'm looking for guidance on how to achieve consistent click coordinates relative to the browser window, regardless of the nested iframe's presence.
Any help or suggestions on how to calculate the click coordinates inside a nested iframe relative to the browser window within a Chrome extension would be greatly appreciated. Thank you!