Javascript 通过chrome扩展获取鼠标坐标

我很想知道是否有一种方法可以通过chrome扩展获取鼠标坐标，然后使用这些坐标检查用户是否点击了该位置？

获取鼠标坐标非常简单，请将其放在：

本质上，我们是为整个页面的

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

---

一旦您有了鼠标坐标，您就可以使用带有“\u blank”值的“target”属性在新选项卡中打开url。

---

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

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

（函数（）{
"严格使用",；
变量$toolTip=$（''）；
$toolTip.addClass（'customTooltip-rsd'）
.css({
位置：'绝对'，
显示：“内联块”，
“字体大小”：“22px”，
背景颜色：“#000”，
颜色：“#ffffff”，
“z索引”：99999999，
填充：“10px”，
“字间距”：“10px”，
“边界半径”：“50%”，
宽度：100，
身高：100，
“线高度”：“100px”，
“文本对齐”：“居中”，
“字体大小”：“粗体”
})
;
$（document.body）.append（$toolTip）；
$（窗口）.on（'mousemove'，函数（e）{
var posX=e.pageX；
var posY=e.pageY；
$toolTip.text（posX+，'+posY）.css({
顶部：posY+‘px’，
左：posX+‘px’
});
});
}());
在我的项目中，我将这个简单的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}`);
    }
  });
});

我尝试将最后一个代码（document.onclick one）放在background.html文件中，然后对其进行测试……但每当我转到其他选项卡时，都不会显示任何警报框。“然后使用这些坐标来检查这个人是否点击了那个位置？”这句话的意思是，例如：如果用户点击了某个特定的XY坐标，我想得到提醒。你的代码将捕获背景页面上的点击，而背景页面永远不会打开。为了让它工作，代码必须在a中，就像我在文章中所说的。那么我的background.html文件中应该是什么？很抱歉……现在另一个问题是：“然后使用这些坐标来检查这个人是否点击了那个位置？”这句话的意思是，例如：在100（coordinateX）和100（coordinateY）处是否有链接；我想提醒一下，据我所知，用户已经点击了这个链接……内容脚本不允许使用chrome API。但是，如果我想打开一个新的选项卡，其中包含使用鼠标坐标获得的URL，我该怎么做呢？当然，但首先如何获得鼠标坐标？@user782400您可以使用pageX（它为您提供X坐标）和pageY（它给出了整个页面的y坐标）。然后，您可以使用JQuery的偏移属性来获取渲染图像的相对位置。例如：$（“img”）。单击（函数（e）{var myOffset=$（this.offset（）；var x=e.pageX-offset.left；var y=e.pageY-offset.top；}值“x”和“y”是您的坐标。
// 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}`);
    }
  });
});