Cursor personalizado de extensión de Chrome

Question

Construyendo una extensión de Google Chrome que coloca algunas etiquetas IMG en sitios. Esta etiqueta img en: hover debe mostrar un cursor personalizado. La extensión usa jQuery como script central inyectado. Probé los métodos siguientes:

1.

var cursor = 'url('+chrome.extension.getURL('icons/cursor.cur')+')'; 
$('#myImgId').css({ 
    'position': 'absolute', 
    'top':'5px', 
    'left':'5px', 
    'cursor':cursor 
}); 

Este es el mejor trabajo. En sitios más pequeños, muestra el cursor. En sitios de carga más lenta, no. Pero en sitios pequeños falla a veces.

---

2.

var cursor = 'url('+chrome.extension.getURL('icons/cursor.cur')+')';  
$('<style>#myImgId{cursor:'+cursor+'}</style>').appendTo('head'); 

esto no hizo nada en absoluto.

---

3.

En manifest.json I inyecta el css.

"content_scripts": [ 
{ 
    "matches": ["http://*/*"], 
    "css": ["css/style.css"], 
    "js": ["j/c.js", "j/s.js"] 
} 

el archivo CSS sólo tenía el cursor: url (iconos/cursor.cur), ya que no tengo idea de cómo obtener la URL real en un archivo CSS. Esto no está funcionando en absoluto. Creo que debe funcionar así, pero no encontré referencia para esto en code.google.

Answer 1

como se vio después de hacer que funcione regla CSS debe ser escrito como: {cursor:url(...),default;}

Para su tercera prueba este método en css

#myImgId { 
cursor:url('chrome-extension://__MSG_@@extension_id__/icons/cursor.cur'); 
} 

(no funciona debido a un error)

Answer 2

No necesita una extensión de Chrome para esto; es una función estándar de CSS para poder cambiar el cursor cuando se mueve sobre los elementos, incluida la capacidad de cambiarlo a una imagen personalizada.

Usted debe ser capaz de simplemente añadir algo como esto a tu CSS:

.myimage { cursor: url(icons/cursor.gif);} 

sin tener que hacer ningún scripting en absoluto.

Sin embargo, hay errores, peculiaridades y diferencias de implementación en esta función en una variedad de navegadores.

La mayor peculiaridad que debe saberse es que Internet Explorer espera que el archivo de cursor sea un archivo .cur, mientras que todos los demás navegadores esperan un archivo de imagen normal (por ejemplo, un archivo .gif). Si desea que funcione en todos los navegadores, tendrá que proporcionar dos versiones de su icono y usar una prueba específica del navegador o hackear su CSS para que elija el correcto.

Un muy buen resumen de la función CSS cursor con sus peculiaridades y apoyo en varios navegadores se puede encontrar aquí: http://www.quirksmode.org/css/cursor.html

Esta página también se afirma que "la imagen es ilegible en Chrome". Esto puede ser una mala noticia para usted, pero la prueba no se ha actualizado durante un tiempo, por lo que la información se aplica a Chrome 5, por lo que si hubo errores, es posible que ya se haya corregido.

Answer 3

Para añadir:

var css = 
'<Style id="myCursor">\n'+ 
' .myClass { cursor: url('+chrome.extension.getURL("Cursors/myCrossCursor.cur")+'), crosshair; }\n'+ 
'</Style>'; 
if ($("head").length == 0) { 
    $("body").before(css); 
} else { 
    $("head").append(css); 
} 

Para re Mover:

$("#myCrossCursor").remove(); 

No se olvide de agregar el archivo .cur al manifiesto:

"web_accessible_resources": [ 
    "Cursors/myCrossCursor.cur", 
    ...