Custom cursor with content script

Add-ons Development
#1

Hi,

When my content script is active I want the user to be aware of this by a custom cursor. I have a png in the root directory.

I’m getting the resource url like this const cursorUrl = browser.runtime.getURL("office-push-pin.png"); This returns something that looks valid to me. moz-extension://3f2cc9a9-e383-4e26-8494-d186f9315bd5/office-push-pin.png

I want the cursor to use this image.

Say for example I already have an HTMLElement called target. I want to do something like:

target.style.cursor = `url(${cursorUrl})`
// or something like this would be better even
document.body.cursor = ...

This is not working though. Does anyone have a good idea for this?

#2

Have you ever see a web page with a custom cursor image? :smiley:
I would strongly advice you to re-think it :slight_smile:.
Usually “badge” or changing toolbar icon color is used to tell user that the addon is active.

In any case, there is a workaround, you can use “cursor” css property to hide it completely (using CSS selector that matches all elements, like “* {cursor: none}”) and then draw an image and move it around the page where the mouse cursor is (even when it’s hidden) using the mouse-move events.

Note that there are some nasty edge cases, like if a page has “iframe” which will “swallow” all mouse events.

#3

From here:

cursor: url(hand.cur), pointer;
#4

Oh, I didn’t know you can set it to URL, nice :slight_smile:.

Anyway, you need to include your “office-push-pin.png” in a “web_accessible_resources” list:


That should help.
If not, check the console, also netwrok tab.