如何用JavaScript制作可点击屏幕随机位置的Chrome浏览器自动点击器？

一、模拟鼠标点击的核心实现方式 #

在JavaScript中，有两种可靠的方式模拟鼠标点击：

1. 使用dispatchEvent触发完整鼠标事件 #

这种方式会模拟真实点击的完整流程（包含mousedown、mouseup、click等事件），兼容性更强，适合大多数场景：

// 模拟点击指定元素
function simulateElementClick(element) {
  const clickEvent = new MouseEvent('click', {
    bubbles: true,
    cancelable: true,
    view: window
  });
  element.dispatchEvent(clickEvent);
}

// 调用示例：点击页面第一个按钮
simulateElementClick(document.querySelector('button'));

2. 直接调用元素click()方法 #

如果仅需触发元素的默认点击行为，这种方式更简洁，但不会触发完整的事件流：

document.querySelector('a').click();

二、实现随机位置点击 #

要点击页面内的随机位置，需先计算视口范围内的随机坐标，再通过事件模拟点击该位置：

function simulateRandomClick() {
  // 获取当前视口宽高
  const viewportWidth = window.innerWidth;
  const viewportHeight = window.innerHeight;

  // 生成0到视口边界内的随机坐标
  const randomX = Math.floor(Math.random() * viewportWidth);
  const randomY = Math.floor(Math.random() * viewportHeight);

  // 创建带坐标的鼠标点击事件
  const clickEvent = new MouseEvent('click', {
    bubbles: true,
    cancelable: true,
    view: window,
    clientX: randomX,
    clientY: randomY
  });

  // 在document上触发事件，自动命中坐标对应的元素
  document.dispatchEvent(clickEvent);
}

// 调用示例：每2秒执行一次随机点击
setInterval(simulateRandomClick, 2000);

三、Chrome扩展开发的关键注意事项 #

1. 权限配置：在manifest.json中添加必要权限，确保脚本能访问目标页面：

{
  "manifest_version": 3,
  "name": "自动点击器",
  "version": "1.0",
  "permissions": ["activeTab"],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ]
}

（若仅针对特定页面，修改matches规则即可；<all_urls>表示允许在所有页面运行）

2. 脚本上下文：随机点击逻辑建议放在内容脚本中执行，因为内容脚本直接运行在目标页面上下文，可直接操作DOM和触发事件。若需从后台脚本触发，可通过chrome.scripting.executeScript注入代码：

// 后台脚本中触发随机点击
chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
  chrome.scripting.executeScript({
    target: {tabId: tabs[0].id},
    function: simulateRandomClick
  });
});

3. 页面拦截规避：部分页面会通过事件的isTrusted属性判断是否为真实用户操作，此时模拟事件会被拦截。若需绕过，可尝试使用Chrome的debuggerAPI（需添加debugger权限），但这种方式复杂度较高，仅在必要时使用。

内容的提问来源于stack exchange，提问作者denoryprogrammer