I'm using Chrome's debugger API to dispatch click events to a page from an extension's background script. This is the code I'm using to dispatch the event
background.js
x=50
y=50
//tabId=<id> //Add the tab's id to a tabId variable
mousePressedOptions={type:"mousePressed",x,y,button:"left",clickCount:1}
mouseReleasedOptions={type:"mouseReleased",x,y,button:"left",clickCount:1}
sendCommand(tabId,mousePressedOptions,sendCommand.bind(null,tabId,mouseReleasedOptions))
function sendCommand(tabId,options,callback=function(){}){
chrome.debugger.sendCommand({tabId},
"Input.dispatchMouseEvent",
options,
callback)
}
As you can see I'm dispatching the event on the point (x=50,y=50). Then in my page I am setting up a simple click listener on the window object which just logs the (x,y) coordinates
index.html
function handleClick(e){
console.log(e.x,e.y)
}
window.addEventListener("click",handleClick)
When I test this locally the (x,y) values logged by the console are identical to the ones I used to dispatch the event, which is exactly what you'd expect. However when I test this on actual websites some of them will display different results, notably google, facebook, and reddit.
When I go to google.com and I inject the handleClick code into the devtools console window, I get (45,45) instead of (50,50). Testing this on different coordinates they seem to always be off by 9.1% rounded down to the nearest integer. So if I dispatch on (100,200) the page will display (90,181), and for (400,1000) it will display (363,909) and so on. This issue only happens on certain websites not all of them as I mentioned. But curiously enough the sites that will display the wrong values are all off by the same percentage. So for an event dispatched on (50,50) it will display the same wrong value (45,45) on google, reddit, facebook...etc.
So what is causing this discrepancy between the values dispatched by the debugger and the ones received by the event object? What value should I be accounting for that I'm not?
Thank you.