Chrome扩展如何基于pageX/pageY坐标触发页面元素模拟点击

background.js运行在扩展独立的后台上下文，没有权限直接访问网页DOM，也无法直接触发页面内元素的点击事件，不需要把坐标传到background完成点击操作，正确逻辑是：获取到pageX/pageY坐标后，在页面执行上下文中通过坐标定位元素，再派发模拟点击事件即可；如果你的坐标是在content script中拿到的，也可以直接在content script中完成点击，不需要中转到后台。

• 你写的document.activeElement.click()只会触发当前页面已聚焦元素的点击，完全没有用到你获取的pageX/pageY坐标，无法命中指定坐标位置的目标元素
• chrome.tabs.executeScript是Manifest V2版本的API，当前新版Chrome要求使用Manifest V3，对应API需要替换为chrome.scripting.executeScript，同时要在manifest.json中配置对应权限
• 直接调用元素的.click()方法兼容性差：content script运行在独立的隔离世界，部分页面的事件监听绑定在页面主世界，或是做了事件来源校验，这种方式触发的点击不会被页面识别

第一步：配置manifest.json权限（Manifest V3） #

{
  "manifest_version": 3,
  "permissions": ["scripting", "activeTab"],
  "host_permissions": ["<all_urls>"],
  "background": {
    "service_worker": "background.js"
  },
  "action": {}
}

第二步：background.js逻辑 #

如果你的坐标需要从content script传到background，通过消息传递接收坐标后，注入脚本到目标标签页执行点击即可：

chrome.action.onClicked.addListener(async (tab) => {
  // 此处替换为你实际获取到的pageX、pageY坐标值
  const pageX = 400;
  const pageY = 220;

  await chrome.scripting.executeScript({
    target: { tabId: tab.id },
    args: [pageX, pageY],
    func: (x, y) => {
      // pageX/pageY是包含页面滚动偏移的绝对坐标，需要换算为视口相对坐标传入elementFromPoint
      const clientX = x - window.scrollX;
      const clientY = y - window.scrollY;
      // 获取坐标位置最顶层的目标元素
      const targetEl = document.elementFromPoint(clientX, clientY);
      if (!targetEl) return;

      // 派发真实鼠标点击事件，兼容页面各类事件监听逻辑
      const clickEvent = new MouseEvent('click', {
        view: window,
        bubbles: true,
        cancelable: true,
        clientX: clientX,
        clientY: clientY,
        button: 0
      });
      targetEl.dispatchEvent(clickEvent);

      // 如果目标是输入框、搜索栏类元素，额外触发聚焦
      if (['INPUT', 'TEXTAREA'].includes(targetEl.tagName)) {
        targetEl.focus();
      }
    }
  });
});

• 坐标换算错误：document.elementFromPoint接收的是相对于当前视口的坐标，直接传入带滚动偏移的pageX/pageY会导致定位到错误元素
• 元素被遮挡：如果坐标位置有遮罩层、固定定位的其他元素，elementFromPoint会返回最上层的遮挡元素而非你预期的目标，需要结合元素选择器、z-index判断做二次过滤
• 跨iframe场景：如果目标元素在页面iframe内，需要先获取对应iframe的坐标偏移，再向iframe注入脚本定位元素

内容的提问来源于stack exchange，提问作者conor tighe.