最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Why is Input.dispatchMouseEvent not dispatching an event? - Stack Overflow

programmeradmin1浏览0评论

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?

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?

Share Improve this question asked Dec 19, 2019 at 13:30 MoonBarcMoonBarc 372 silver badges7 bronze badges 5
  • Are you sure you can dispatch trusted events? Isn't that the whole point: to be sure whether an event es from a user interaction or not? – sjahan Commented Dec 19, 2019 at 13:34
  • @sjahan I saw this answer: stackoverflow./a/53488689/9969164 and it seems like you can do it using the debugger interface. – MoonBarc Commented Dec 19, 2019 at 13:37
  • For a click, you need the sequence MousePressed followed by MouseReleased. You could also try this approach – Iván Nokonoko Commented Dec 19, 2019 at 13:48
  • @IvánNokonoko but can i use that with IsTrusted? – MoonBarc Commented Dec 19, 2019 at 13:50
  • No, but many times IsTrusted is not needed to perform a click on an element. – Iván Nokonoko Commented Dec 19, 2019 at 14:09
Add a ment  | 

2 Answers 2

Reset to default 8

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':

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.");
        }
      );
    }
  );
});
发布评论

评论列表(0)

  1. 暂无评论