Chrome扩展注入脚本element.click()无响应问题分析与解决

问题背景 #

开发Chrome扩展时，通过注入脚本实现元素出现时自动点击，脚本能成功定位目标元素，但调用element.click()无实际点击效果，日志等其他代码运行正常。仅在https://humanbenchmark.com/tests/reactiontime/站点出现该问题，其他站点click()可正常工作，推测是站点做了事件拦截限制。

现有代码 #

popup.js（执行正常） #

chrome.scripting.executeScript({ target: {tabId: targetTab}, files: [reaction-time.js] })

reaction-time.js（日志正常，但button.click()无效果） #

if(document.querySelector('#root')){ 
  const observer = new MutationObserver((mutations, observer)=>{ 
    for(let mutation of mutations){ 
      if(mutation.type ==='childList'){ 
        console.log("Mutation detected...") 
        if(document.querySelector('.view-go')){ 
          button = document.querySelector('.view-go') 
          console.log("About to click...",button) 
          button.click() 
          console.log("clicked.") 
        } 
      } 
    } 
  }) 
  observer.observe(document.querySelector('#root'), { childList: true, subtree: true }); 
}

问题分析 #

部分网站会通过监听原生click事件并阻止默认行为，或者只识别由真实用户交互触发的事件（比如检查事件的isTrusted属性）。直接调用element.click()生成的合成事件isTrusted属性为false，会被这类站点的拦截机制过滤。

解决方案 #

使用原生事件触发方式模拟真实用户点击，通过创建并分发MouseEvent来绕过拦截：

修改reaction-time.js中的点击逻辑，替换button.click()为以下代码：

// 创建模拟真实点击的MouseEvent
const clickEvent = new MouseEvent('click', {
  bubbles: true,
  cancelable: true,
  view: window,
  isTrusted: true // 标记为可信事件
});
// 分发事件到目标按钮
button.dispatchEvent(clickEvent);

完整修改后的reaction-time.js：

if(document.querySelector('#root')){ 
  const observer = new MutationObserver((mutations, observer)=>{ 
    for(let mutation of mutations){ 
      if(mutation.type ==='childList'){ 
        console.log("Mutation detected...") 
        const button = document.querySelector('.view-go')
        if(button){ 
          console.log("About to click...", button) 
          // 替换原click()为原生事件触发
          const clickEvent = new MouseEvent('click', {
            bubbles: true,
            cancelable: true,
            view: window,
            isTrusted: true
          });
          button.dispatchEvent(clickEvent);
          console.log("clicked.") 
        } 
      } 
    } 
  }) 
  observer.observe(document.querySelector('#root'), { childList: true, subtree: true }); 
}

说明 #

这种方式生成的事件isTrusted属性为true，更接近真实用户的交互行为，能够绕过大部分站点的事件拦截机制，解决自动点击无效的问题。

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