obtain mouse coordinates through chrome extension

Question

I am curious to know if there is a way to get the mouse coordinates through a chrome extension and then use these coordinates to check if the person has clicked in that position ?

Solution 1

Getting the mouse coordinates is very simple, put this in a content script:

document.onmousemove = function(e)
{
    var x = e.pageX;
    var y = e.pageY;
    // do what you want with x and y
};

Essentially, we are assigning a function to the onmousemove event of the entire page, and getting the mouse coordinates out of the event object (e).

However, I'm not entirely sure what you mean by this:

then use these coordinates to check if the person has clicked in that position ?

Do you want to check if a user clicks something like a button? In that case you can simply subscribe an event to that button (or any other element) like this:

document.getElementById("some_element").onclick = function(e)
{
    alert("User clicked button!");
};

To record all mouse clicks and where they are:

document.onclick = function(e)
{
    // e.target, e.srcElement and e.toElement contains the element clicked.
    alert("User clicked a " + e.target.nodeName + " element.");
};

Note that the mouse coordinates are still available in the event object (e).

If you need the coordinates when a user clicks an arbitrary location, this does the trick:

document.onclick = function(e)
{
    var x = e.pageX;
    var y = e.pageY;
    alert("User clicked at position (" + x + "," + y + ")")
};

Solution 2

In my projects, I put this simple jQuery script in a separate file to check for x and y coordinates. I can simply toggle it off and on with the trackingMouse variable.

// this lets you click anywhere on the page and see the x and y coordinates
let trackingMouse = true;

$(document).ready(() => {
  $(document).on('click', (e) => {
    if (trackingMouse) {
      let x = e.pageX;
      let y = e.pageY;
      console.log(`The x coordinate is: ${x}`);
      console.log(`The y coordinate is: ${y}`);
    }
  });
});

Solution 3

I was so tired of searching for an answer to this every few weeks so I created a quick script. It requires jquery for dom selection, dom appending, and style editing.. this could be easily changed, but i've already worked too much this week.

(function() {
    'use strict';
    var $toolTip = $('<div/>');
    $toolTip.addClass('customTooltip-rsd')
        .css({
            position: 'absolute',
            display: 'inline-block',
            'font-size': '22px',
            backgroundColor: '#000',
            color: '#ffffff',
            'z-index': 9999999999,
            padding: '10px',
            'word-spacing': '10px',
            'border-radius': '50%',
            width: 100,
            height: 100,
            'line-height': '100px',
            'text-align': 'center',
            'font-weight': 'bold'
        })
    ;
    $(document.body).append($toolTip);
    $(window).on('mousemove', function(e) {
        var posX = e.pageX;
        var posY = e.pageY;
        $toolTip.text(posX + ',' + posY).css({
            top: posY + 'px',
            left: posX + 'px'
        });
    });
}());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Comments

[user782400]

I tried putting the last code(document.onclick one) in the background.html file and then testing it...but whenever i go to a different tab no alert box is being displayed. and by the sentence "then use these coordinates to check if the person has clicked in that position ?", I meant for example : I wanted to be alerted if the user clicks on a particular XY coordinate.

[Håvard]

Your code will capture clicks on the background page, which is never opened. For this to work, the code has to be in a content script, like I stated in the post.

[user782400]

then what should be in my background.html file ?

[user782400]

sorry about that..now the other question : and by the sentence "then use these coordinates to check if the person has clicked in that position ?", I meant for example : If there is a link at 100(coordinateX) and 100(coordinateY); I want to be alerted that the user has clicked on this link

[user782400]

as far as I know...content scripts do not allow chrome API..but if I want to open a new tab with the URL obtained using the mouse coordinates, how can I do that ?

[Håvard]

Look here and here.

[Rubik]

Sure, but how to get the mouse coordinates at first ?

[Vasuki Dileep]

@user782400 You can make use of pageX(which gives you X coordinate) and pageY(which gives you y coordinate) of the whole page. Then you can make use of offset propert of JQuery to get the relative position of your rendered image. Eg: $("img").click(function(e) { var myOffset = $(this).offset(); var x = e.pageX- offset.left; var y = e.pageY- offset.top; } values "x" and "y" are your coordinates.

[Eugene]

The issue with any solution that relies on using the DOM mouse events is that the events won't fire if the mouse is over an iframe element on the page. Still trying to find a solution that works for all cases.