Why is Input.dispatchMouseEvent not dispatching an event?

Question

I'm trying to dispatch an IsTrusted event that simulates the user clicking a certain place on the screen. I'm trying this out through a Chrome Extension, although I'm not having much luck. There are no errors in the console, and my giant screen-wide button isn't being clicked. Here is my background.js:

chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
        var activeTab = tabs[0];
        chrome.runtime.onMessage.addListener(
            function(request, sender, sendResponse) {
              if( request.message === "clickElement" ) {
                chrome.debugger.attach({tabId:tab.id}, "1.2", function(debugg) {
                    chrome.debugger.sendCommand(
                        {tabId:tab.id}, "Debugger.enable", {},
                        function() {
                            chrome.debugger.sendCommand({tabId:tab.id}, "Input.dispatchMouseEvent", 
                            {
                                type:"mousePressed",
                                x:parseFloat(request.x),
                                y:parseFloat(request.y)
                            })
                        })
                })
              }
            }
        );
        chrome.tabs.sendMessage(activeTab.id, {"message": "runbot"});
    });
});

And my content.js just sends the clickElement message with the coordinates of the button.

Any ideas?

Are you sure you can dispatch trusted events? Isn't that the whole point: to be sure whether an event comes from a user interaction or not? — sjahan, Dec 19 '19 at 13:34
@sjahan I saw this answer: https://stackoverflow.com/a/53488689/9969164 and it seems like you can do it using the debugger interface. — MoonBarc, Dec 19 '19 at 13:37
For a click, you need the sequence `MousePressed` followed by `MouseReleased`. You could also try [this approach](https://stackoverflow.com/a/43331339/3930351) — Iván Nokonoko, Dec 19 '19 at 13:48
No, but many times `IsTrusted` is not needed to perform a click on an element. — Iván Nokonoko, Dec 19 '19 at 14:09

avalanche1 · Accepted Answer · 2021-12-31T17:42:39.520

What you need to do is remove this nonsense:

chrome.debugger.sendCommand(
                        {tabId:tab.id}, "Debugger.enable", {},

And add button: "left" prop to the parameters object:

chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
        var activeTab = tabs[0];
        chrome.runtime.onMessage.addListener(
            function(request, sender, sendResponse) {
              if( request.message === "clickElement" ) {
                chrome.debugger.attach({tabId:tab.id}, "1.2", function(debugg) {

                            chrome.debugger.sendCommand({tabId:tab.id}, "Input.dispatchMouseEvent", 
                            {
                                type:"mousePressed",
                                button: "left",
                                x:parseFloat(request.x),
                                y:parseFloat(request.y)
                            })

                })
              }
            }
        );
        chrome.tabs.sendMessage(activeTab.id, {"message": "runbot"});
    });
});

Also make sure you have the "debugger" permission in you manifest.json.

ps. When debugger attaches you should see this bar appear just below the address bar saying smth like '${extn. name} is executing browser debug':

score 0 · Answer 2 · answered Jun 05 '23 at 06:33

There are two things that you may want to make sure of.

As @iván-nokonoko mentions, it needs MouseReleased after MousePressed
As the document says Number of times the mouse button was clicked (default: 0), it sometimes does nothing on an element when clickCount is not specified. Make sure to specify clickCount 1 for a click, 2 for double click.

An example would be:

var __target = target.tabId;

chrome.debugger.attach({ tabId: __target }, "1.2", function () {
  var x = 500;
  var y = 100;
  var button = "left";
  var clickCount = 1; // <here>
  // var button = "right" 
    // you can check if the click itself is working by right click
    // that shows a context menu, by the way.
  chrome.debugger.sendCommand(
    { tabId: __target },
    "Input.dispatchMouseEvent",
    {
      type: "mousePressed",
      x: x,
      y: y,
      button: button,
      clickCount: clickCount,
    },
    () => {
      chrome.debugger.sendCommand(
        { tabId: __target },
        "Input.dispatchMouseEvent",
        {
          type: "mouseReleased",
          x: x,
          y: y,
          button: button,
          clickCount: clickCount,
        },
        () => {
          chrome.debugger.detach({ tabId: __target });
          console.log("y.");
        }
      );
    }
  );
});

Why is Input.dispatchMouseEvent not dispatching an event?

2 Answers2