javascriptcss

Replace default mouse cursor in Gmail and Chromium


I am trying to replace the default (ugly) mouse cursors that Gmail uses within Chromium. This problem does not happen in Firefox.

So far, I have the following code...

  1. I detect the custom icon
  2. I replace that icon by local one by appending a property to head

This does seem to work, but the default icon still appears, as it first needs to be detected.

Is there a better approach to accomplish my goal?

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

Solution

  • This should do the trick i think:

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

    If i try it like that in the console i get "This document requires 'TrustedHTML' assignment." which i don't know anything about, but since you said your code works i assume a browser extension circumvents that. Anyway if i add those css selectors without use of javascript in the developer tools it works perfectly fine. at least for the grabbing one, i don't know where the grab one comes into play on gmail.

    I hope this helps.