I'm trying to impersonate user clicks and mouse movements using a Chrome extension.
For example:
In my content script there is a button click.
document.querySelector("SOME_SELECTOR").click();
This line triggers a click event with the following property:
MouseEvent {isTrusted: false}
How do you trigger a MouseEvent where the isTrusted property will be true?
You can inject trusted events using the debugger interface.
chrome.debugger.attach(target, "1.2", function() {
chrome.debugger.sendCommand(target, "Input.dispatchMouseEvent", arguments)
})
https://developer.chrome.com/extensions/debugger
https://chromedevtools.github.io/devtools-protocol/1-2/Input
Input.dispatchKeyEvent.
chrome.debugger since I'm not seeing it when I open consoleI'm not sure if this is possible, since it's a read-only property that signifies exactly what you're trying to fake, namely if the event originated from the end user or from a script. There used to be browser-based differences, (IE used to have all events as trusted) but I don't know if this is still the case.
https://developer.mozilla.org/en-US/docs/Web/API/Event
There may still be ways around this, as mentioned for firefox in this topic:Are events generated by Firefox extension 'trusted'?
But you'll have to have a look at the chrome documentation to check if they have similar methods of delegating an event back to the window, since it does mention extension events are/can become trusted in some cases.
Expanding on Ivan's answer,
this requires you to have permissions: ["debugger", "tabs"] in manifest.json, then you can fire "trusted" click events like
function simulateTrustedClickOnElement(element, button = "left") {
const rect = element.getBoundingClientRect();
const x = rect.left + (rect.width / 2);
const y = rect.top + (rect.height / 2);
return simulateTrustedClickOnPosition(x, y, button);
}
function simulateTrustedClickOnPosition(x, y, button = "left") {
chrome.tabs.query({ currentWindow: true }, function (tabs) {
const target = { tabId: tabs[0].id };
chrome.debugger.attach(target, "1.2", function () {
chrome.debugger.sendCommand(target, "Input.dispatchMouseEvent", { type: "mouseMoved", x, y });
chrome.debugger.sendCommand(target, "Input.dispatchMouseEvent", { type: "mousePressed", button, x, y, clickCount: 1 });
chrome.debugger.sendCommand(target, "Input.dispatchMouseEvent", { type: "mouseReleased", button, x, y, clickCount: 1 });
});
});
}
you can use this code. The isTrusted event will be true.
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
if (changeInfo.status == "complete") {
if (tab.url.indexOf("instagram") != -1) {
chrome.debugger.attach( {tabId: tab.id}, "1.2", async function() {
setTimeout(function(){
//opts = {type: "mousePressed", button: "left", x: 557, y: 204, clickCount: 1};
//chrome.debugger.sendCommand({tabId: tab.id}, "Input.dispatchMouseEvent", opts);
//opts0 = {type: "mouseReleased", button: "left", x: 557, y: 204, clickCount: 1};
//chrome.debugger.sendCommand({tabId: tab.id}, "Input.dispatchMouseEvent", opts0);
opts1 = {type: "keyDown", code: "KeyA", key: "a", text: "a"}
chrome.debugger.sendCommand({tabId: tab.id}, "Input.dispatchKeyEvent", opts1);
chrome.debugger.sendCommand({tabId: tab.id}, "Input.dispatchKeyEvent", {type: "keyDown", code: "KeyB", key: "b", text: "b"});
//opts2 = {type: "keyUp", code: "KeyA", key: "a"}
//chrome.debugger.sendCommand({tabId: tab.id}, "Input.dispatchKeyEvent", opts2);
}, 5000);
})
}
}});
