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

Answer 1

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>

Answer 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}`);
    }
  });
});

Answer 3

Once you have the mouse coordinates, you can make use of "target" attribute with "_blank" value to open an url in a new tab.
<a href="your url goes here" target="_blank">URL Display Name</a>

If you are using any javascript framework, you can provide a click event and in its controller, you can make use of default navigate method to navigate.

Answer 4

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 + ")")
};