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?
Have you ever see a web page with a custom cursor image?
I would strongly advice you to re-think it .
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.