通过chrome扩展获取鼠标坐标

获取鼠标坐标非常简单，可以将其放入内容脚本中：

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

本质上，我们为整个页面的onmousemove事件分配一个函数，并从事件对象（e）中获取鼠标坐标。

然而，我不完全确定你说的是什么意思

然后用这些坐标来检查这个人是否点击了那个位置？

是否要检查用户是否单击了类似按钮的内容？在这种情况下，您可以简单地向该按钮（或任何其他元素）订阅一个事件，如下所示：

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

要记录所有鼠标点击及其位置：

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

请注意，鼠标坐标在事件对象（e）中仍然可用。

如果用户点击任意位置时需要坐标，这就可以了：

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

我厌倦了每隔几周就搜索一次答案，所以我创建了一个快速脚本。它需要jquery来进行dom选择、dom附加和样式编辑。。这很容易改变，但这周我已经工作太多了。

(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>

在我的项目中，我将这个简单的jQuery脚本放在一个单独的文件中，以检查x和y坐标。我可以简单地使用trackingMouse变量来切换它的开关。

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

获得鼠标坐标后，您可以使用值为"_blank"的"target"属性在新选项卡中打开url。
<a href="your url goes here" target="_blank">URL Display Name</a>

如果您使用的是任何javascript框架，您可以提供一个点击事件，并且在其控制器中，您可以使用默认的导航方法进行导航。