编程触发click事件不遵循target=_blank规则的问题及解决方法问询

核心原因：浏览器的可信事件权限限制 #

浏览器为了防止恶意脚本滥用弹出窗口、新标签页等影响用户体验的操作，会对事件的可信度做严格区分：

1. 手动点击、键盘输入、触屏操作等用户主动发起的行为，生成的事件isTrusted属性为true，属于可信事件，默认拥有打开新标签页、弹出窗口的权限，不会被拦截。
2. 脚本通过DOM.click()主动触发的事件，isTrusted属性为false，属于非可信事件，会被浏览器限制高风险操作：要么直接拦截新标签页打开请求，要么触发页面的降级逻辑（比如当前页跳转、弹出提示）。

另外部分网站的点击事件监听逻辑会主动判断event.isTrusted的值，只有可信事件才会执行window.open打开新标签页的分支，非可信事件则走当前页跳转的逻辑，也会导致两种点击行为的效果不一致。

你的实现场景是浏览器扩展，拥有比普通页面脚本更高的权限，可以用以下两种方案解决问题：

方案1：直接调用扩展标签页API打开链接 #

优先推荐这个方案，实现最简单也最稳定：

• 第一步先提取目标元素的跳转地址：可以是<a>标签的href属性，或者元素自定义属性里存储的跳转地址，也可以通过监听元素绑定的点击事件拿到目标URL。
• 第二步通过扩展的tabsAPI直接创建新标签页，完全绕过页面的点击逻辑，不会被任何浏览器策略限制。

示例代码：

// 内容脚本（content.js）逻辑
function autoClick(element) {
  // 提取目标跳转地址
  const targetUrl = element.href || element.dataset.url;
  // 向后台脚本发送打开新标签的请求
  chrome.runtime.sendMessage({
    type: 'openNewTab',
    url: targetUrl,
    // 设为false表示新标签在后台打开，不切换当前标签页
    active: false
  });
}

// 后台脚本（background.js）逻辑
chrome.runtime.onMessage.addListener((request) => {
  if (request.type === 'openNewTab') {
    chrome.tabs.create({
      url: request.url,
      active: request.active
    });
  }
});

方案2：模拟用户真实点击 #

如果无法提取到跳转地址，需要完全复现手动点击的效果，可以用扩展的输入模拟API生成系统级点击事件，这种方式生成的事件isTrusted为true，和用户手动点击的效果完全一致：

function simulateRealClick(element) {
  const rect = element.getBoundingClientRect();
  // 调用扩展输入API派发鼠标点击事件
  chrome.input.dispatchMouseEvent({
    type: 'click',
    x: Math.round(rect.left + rect.width / 2),
    y: Math.round(rect.top + rect.height / 2),
    button: 'left',
    clickCount: 1
  });
}

注意使用这个API需要在扩展的manifest.json中声明input权限。

普通页面脚本兼容方案（非扩展场景） #

如果是在普通页面脚本中实现，没有扩展高权限，可以将自动点击逻辑绑定到用户第一次主动交互的回调中：

// 监听用户第一次点击页面的事件
document.addEventListener('click', () => {
  // 这时候的上下文属于可信事件上下文，调用click()可以正常打开新标签页
  const target = document.querySelector('.目标元素');
  target?.click();
}, { once: true });

这种方式是利用了浏览器的可信上下文继承规则：在可信事件的回调栈中调用的window.open、DOM.click()生成的操作，也会被认定为可信，不会被拦截。

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