如何非侵入式触发Chrome标签页蓝点并支持非固定标签？

当然有办法啦！我刚好知道两种可靠的非侵入式方案，既不用修改标签标题，也不会弹出alert，而且对固定、非固定标签都能生效：

方法1：静默触发Web Notification #

Chrome的标签蓝点本来就和通知系统挂钩，我们可以利用这一点——请求通知权限后，创建一个空内容的通知并立刻关闭，这样只会触发标签蓝点，用户完全看不到弹窗残留。

代码示例：

// 先处理通知权限
if (Notification.permission === 'granted') {
  const silentNotify = new Notification('');
  silentNotify.close();
} else if (Notification.permission !== 'denied') {
  Notification.requestPermission().then(perm => {
    if (perm === 'granted') {
      const silentNotify = new Notification('');
      silentNotify.close();
    }
  });
}

这个方法的优势是触发逻辑明确，Chrome官方的通知机制会稳定触发蓝点，不会有版本兼容性问题。

方法2：后台动态修改DOM内容 #

当页面处于后台（用户没聚焦这个标签）时，悄悄修改一下页面DOM（比如添加个隐藏元素再立刻删掉），Chrome的内容更新检测机制会识别到页面有变化，从而显示蓝点。

代码示例：

// 监听页面是否处于后台
document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    // 创建并移除一个隐藏的临时元素
    const tempEl = document.createElement('div');
    tempEl.style.display = 'none';
    document.body.appendChild(tempEl);
    document.body.removeChild(tempEl);
  }
});

这个方法不需要用户授权通知权限，但要注意：Chrome的内容检测可能有阈值，部分版本可能需要多次修改才会触发，可靠性比第一种略低。

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