Get mouse coordinates through chrome extension

Question

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

Answer 1

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

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

Essentially, we assign a function to the onmousemove event of the entire page and get the mouse coordinates from the event object ( e ).

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

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

Do you want to check if the user clicks something like a button? In this case, you can simply subscribe to this button (or any other element) as follows:

 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 mouse coordinates are still available in the event object ( e ).

If you need coordinates when the 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 + ")") }; 

Answer 2

I was so tired of looking for an answer every few weeks, so I created a quick script. This requires jquery to select dom, add a domain, and edit the style. It can be easily changed, but I have 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 3

In my projects, I put this simple jQuery script in a separate file to check the x and y coordinates. I can simply switch it and enable it using 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 4

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

If you use the javascript framework, you can provide a click event in your controller as well, you can use the default navigation method for navigation.