Customizing mouse pointer in Gmail on Chrome browser

Other Questions Gmail
1

I want to change the default mouse cursors in Gmail when using Chrome. Firefox doesn’t have this issue. I’ve tried some code to spot and swap the custom icon. It kind of works but the old cursor shows up first before changing. Is there a better way to do this? Here’s a basic example of what I’ve tried:

function updateCursor(event) {
  const cursor = window.getComputedStyle(event.target).cursor;
  const newStyle = document.createElement('style');
  newStyle.id = 'custom-cursor';

  if (cursor.includes('openhand.cur')) {
    newStyle.textContent = '* { cursor: grab !important; }';
    document.head.appendChild(newStyle);
  } else if (cursor.includes('closedhand.cur')) {
    newStyle.textContent = '* { cursor: grabbing !important; }';
    document.head.appendChild(newStyle);
  } else {
    document.getElementById('custom-cursor')?.remove();
  }
}

document.addEventListener('mouseover', updateCursor);

This code checks for Gmail’s cursor and tries to replace it. But it’s not perfect. Any tips to make this smoother or more efficient?

2

I’ve encountered this issue as well, and while the MutationObserver approach is solid, there’s another method worth considering. You could try using the @-moz-document CSS rule to target Gmail specifically. This way, you’re not relying on JavaScript at all, which can be more performant.

Here’s an example of how you might structure it:

@-moz-document domain(mail.google.com) {
  * {
    cursor: default !important;
  }
  [style*='openhand.cur'] {
    cursor: grab !important;
  }
  [style*='closedhand.cur'] {
    cursor: grabbing !important;
  }
}

This CSS-only solution should work across browsers, not just Firefox. It’s worth noting that while this method is efficient, it may not catch every single instance if Gmail dynamically changes cursor styles. But in my experience, it covers most cases without the overhead of JavaScript.

3

I’ve actually tackled this issue before in my work. While Chrome extensions can be a quick fix, they often lack fine-grained control for specific sites like Gmail. Here’s what worked for me:

Instead of using mouseover events, try MutationObserver to watch for changes in the DOM. This approach is more efficient and less likely to cause flickering. You can target specific elements more precisely too.

Also, consider using CSS classes instead of inline styles. This way, you can toggle classes based on the cursor state, which is generally smoother.

Here’s a rough idea:

const observer = new MutationObserver(() => {
  document.querySelectorAll('[style*="openhand.cur"]').forEach(el => {
    el.classList.add('custom-grab');
  });
  // Similar for closedhand.cur
});

observer.observe(document.body, { subtree: true, attributes: true });

Then in your CSS:

.custom-grab { cursor: grab !important; }
.custom-grabbing { cursor: grabbing !important; }

This approach has been more reliable in my experience. Hope it helps!

4

hey jess, have u tried using a chrome extension for this? there’s some out there that let u customize cursors site-wide. might be easier than coding it urself. just search the chrome store for ‘custom cursor’ and you’ll find a bunch. could save u some headache