Пользовательский курсор для расширения Chrome - PullRequest
Новая
       19

Пользовательский курсор для расширения Chrome

5 голосов
/ 06 января 2011

Я создаю расширение Google Chrome, которое размещает некоторые теги IMG на сайтах.Этот тег img для: hover должен показывать пользовательский курсор.Расширение использует jQuery в качестве внедренного основного скрипта.Я пробовал следующие методы:

1. 

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

Это самая лучшая работа.На небольших сайтах его показывает курсор.На более медленных сайтах загрузки это не так.Но на небольших сайтах это иногда дает сбой.

2. 

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

Это ничего не дало вообще.

3.

В manifest.json я ввел css. 

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

В файле css только что был курсор: url (icons / cursor.cur), как и японятия не имею, как получить реальный URL в файле CSS.Это не работает вообще.Я думаю, что это должно работать так, но я не нашел ссылку на это на code.google.

Ответы [ 3 ]

2 голосов
/ 06 января 2011

Как выяснилось, чтобы это работало, правило css должно быть записано так:

Для вашего третьего метода попробуйте это в css 

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

(не работает из-за ошибки)

0 голосов
/ 23 июня 2015

Добавить: 

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

Удалить: 

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

Не забудьте добавить файл .cur в манифест: 

"web_accessible_resources": [
  "Cursors/myCrossCursor.cur",
  ...
0 голосов
/ 06 января 2011

Для этого вам не нужно расширение Chrome;это стандартная функция CSS, позволяющая изменять курсор при перемещении по элементам, включая возможность изменить его на собственное изображение.

Вы можете просто добавить что-то подобное в свой CSS: 

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

без необходимости выполнения каких-либо сценариев.

Однако существуют ошибки, особенности и различия в реализации этой функции в различных браузерах.

Самый большой изюминказнать о том, что Internet Explorer ожидает, что файл курсора является файлом .cur, тогда как все другие браузеры ожидают обычный файл изображения (например, .gif).Если вы хотите, чтобы он работал в кросс-браузерном режиме, вам нужно предоставить две версии вашего значка и использовать тест для конкретного браузера или взломать ваш CSS, чтобы он выбрал правильный.

Очень хорошее резюмефункции CSS cursor с ее особенностями и поддержкой в ​​различных браузерах можно найти здесь: http://www.quirksmode.org/css/cursor.html

На этой странице также говорится, что «изображение искажено в Chrome».Это может быть плохой новостью для вас, но тест некоторое время не обновлялся, поэтому информация применима к Chrome 5, поэтому, если там была ошибка, она, возможно, уже исправлена.

...