如何在Chromium浏览器中替换Gmail默认鼠标光标？

问题描述 #

在Chromium浏览器中替换Gmail默认鼠标光标时，当前实现存在默认光标先显示再替换的延迟问题（Firefox无此问题）。现有方案是通过mouseover事件检测Gmail自定义光标，再动态添加样式替换为系统原生光标，求更优实现。

当前实现代码：

let custom_cursor_a = 'url("https://ssl.gstatic.com/ui/v1/icons/mail/images/2/openhand.cur") 7 5, default';
let custom_cursor_b = 'url("https://ssl.gstatic.com/ui/v1/icons/mail/images/2/closedhand.cur") 7 5, move';
document.addEventListener('mouseover',function(e){
  var cursor = getComputedStyle(e.target).cursor;
  //console.log(cursor);
  const cursorStyle = document.createElement('style');
  cursorStyle.id = 'cursor-style';
  if (cursor == custom_cursor_a) {
    console.log("custom_cursor_a");
    cursorStyle.innerHTML = '* {cursor: -webkit-grab !important; cursor: -moz-grab !important; cursor: -o-grab !important; cursor: -ms-grab !important; cursor: grab !important}';
    document.head.appendChild(cursorStyle);
  } else {
    if (cursor == custom_cursor_b) {
      console.log("custom_cursor_b");
      cursorStyle.innerHTML = '* {cursor: -webkit-grabbing !important; cursor: -moz-grabbing !important; cursor: -o-grabbing !important; cursor: -ms-grabbing !important; cursor: grabbing !important;}';
      document.head.appendChild(cursorStyle);
    } else {
      console.log(cursor);
      if (document.getElementById('cursor-style')) { document.getElementById('cursor-style').remove(); }
    }
  }
});

优化方案 #

方案1：提前用CSS覆盖光标样式（无延迟） #

直接通过高优先级CSS规则覆盖Gmail的自定义光标，避免事件检测带来的延迟：

// 页面加载阶段立即注入样式，从根源避免闪烁
const cursorStyle = document.createElement('style');
cursorStyle.textContent = `
/* 匹配Gmail的自定义光标元素 */
[style*="openhand.cur"],
div[role="listitem"],
.T-KT, .T-KT-JO {
  cursor: -webkit-grab !important;
  cursor: grab !important;
}

/* 拖拽状态下的光标覆盖 */
[style*="closedhand.cur"],
div[role="listitem"][aria-selected="true"]:active,
.T-KT:active {
  cursor: -webkit-grabbing !important;
  cursor: grabbing !important;
}
`;
document.head.appendChild(cursorStyle);

说明：需根据Gmail实际的元素选择器补充规则，确保覆盖所有出现自定义光标的场景，利用!important强制替换Gmail的内联样式。

方案2：用MutationObserver监听样式变化（实时拦截） #

如果Gmail的光标样式是动态生成的，通过监听元素style属性变化，在光标生效前直接替换：

const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
      const target = mutation.target;
      const cursor = target.style.cursor;
      if (cursor.includes('openhand.cur')) {
        target.style.cursor = '-webkit-grab, grab';
      } else if (cursor.includes('closedhand.cur')) {
        target.style.cursor = '-webkit-grabbing, grabbing';
      }
    }
  });
});

// 监听页面所有元素的style属性变化
observer.observe(document.body, {
  attributes: true,
  subtree: true,
  attributeFilter: ['style']
});

说明：这种方式比mouseover事件响应更快，能在Gmail设置光标样式的瞬间完成替换，几乎无视觉延迟。

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