替换 Gmail 和 Chromium 中的默认鼠标光标

Question

我正在尝试替换 Gmail 在 Chromium 中使用的默认（丑陋）鼠标光标。这个问题在 Firefox 中不会发生。

到目前为止，我有以下代码...

1. 我检测到自定义图标
2. 我通过将属性附加到

   head

来用本地图标替换该图标

这似乎确实有效，但默认图标仍然出现，因为它首先需要被检测到。

有更好的方法来实现我的目标吗？

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(); }
    }
  }
});

Answer 1

我认为这应该可以解决问题：

var style = document.createElement('style');
style.innerHTML = "[style*='openhand.cur']{ cursor: grab !important; } 
[style*='closedhand.cur']{ cursor: grabbing !important; }";
document.head.appendChild(style);

如果我在控制台中尝试这样做，我会得到“此文档需要“TrustedHTML”分配。”我对此一无所知 但既然你说你的代码可以工作，我假设浏览器扩展可以规避这一点。 无论如何，如果我在开发者工具中添加这些 css 选择器而不使用 javascript，它就可以完美工作。至少对于抢占来说，我不知道抢占在 gmail 上发挥作用。

我希望这有帮助。