Помогите подключить js к новому расширению

Kanzaki · №1

Имеется скрипт который при наведении на ссылку с jpg-изображением создает рядом с курсором DIV с текстом. Скрипт работает, если его прописать в head конкретной страницы, а как сделать его расширением, чтобы работал на всех страницах?

Вот скрипт:

Выделить код

Код:

window.onload = function () {
  var arayLink = document.getElementsByTagName('a'),
      totalLink = arayLink.length;

  while (totalLink--) {
    arayLink[totalLink].addEventListener('mouseover', havejpg, false);
  }

  function havejpg (e) {
    var div = document.createElement('div'); 
    if (e.target.href.match(/jpg$/)) {
    x = e.clientX;
    y = e.clientY;
    div.style.position = 'absolute';
    div.style.left = x + 20;
    div.style.top = y + 20;
    div.style.width='auto';
    div.style.background = 'green';
    div.appendChild(document.createTextNode('Я обычный текст'));
    document.body.appendChild(div);
    }
  }
}

Прошу помощи. Не присылайте ссылки на документации! Лучшим уроком и помощью для меня будет конкретный пример созданного расширения, посмотрев исходный код которого я смогу разобраться.
Допустим создайте расширение через tools builder и добавьте мой скрипт.
Я сколько ни пытался, не получается.

Kanzaki · №2

Мне нужно расширение которое реализует именно использование javascript и ничего больше. Как сделать чтобы он работал, я всё прописываю, но скрипт не пашет. Я прошу сделать отдельное расширение потому, что так будет проще дальше разбираться.

Не нужно советов, пускай клюевой фразой для вас будет:

Kanzaki пишет

создайте расширение через tools builder и добавьте мой скрипт

Отредактировано Kanzaki (03-09-2011 16:07:47)

hydrolizer · №3

Kanzaki пишет

Не нужно советов, пускай клюевой фразой для вас будет:

Вот с такими указаниями советов и не будет. Никаких.

Отредактировано hydrolizer (03-09-2011 18:27:56)

Kanzaki · №4

Я извиняюсь конечно, что так резко. Возможно у Вас создается впечатление, что я не хочу читать докуметацию, пробовать, испытывать всё самому, но на самом деле всё дело в том, что я не имею возможности подойти к делу вплотную, по причинам технического характера, но задача стоит, а выполнить прошу Вас. Здесь вроде ничего сложного. Надеюсь найдутся добрые люди, которы мне помогут.

Отредактировано Kanzaki (03-09-2011 18:43:19)

hydrolizer · №5

Kanzaki пишет

Возможно у Вас создается впечатление

Именно. Создается впечатление, что вы просите помощи в вопросах элементарного характера, но при этом требуете, чтобы вас не тыкали носом в учебники. Написали бы сразу, что вам нужно, чтобы кто-то сделал требуемое - ничего страшного в этом нет.
Теперь о самом вопросе. В том виде, в каком скрипт представлен выше, просто взять его as is, и поместить в расширение не получится - скрипт работает с контентом загруженной веб-страницы, следовательно, нужно отслеживать загрузку новой страницы - а это может быть и переход по ссылке, и пользовательский ввод, это может происходить в одной вкладке, в разных вкладках, в разных окнах, в разных вкладках одновременно, и проч. - вариантов немало. Поэтому, я думаю, проще всего будет использовать этот скрипт как скрипт для Greasemonkey/Scriptish - там потребуется минимум действий, скрипт уже практически готов для использования с упомянутыми расширениями.

Kanzaki · №6

hydrolizer, благодарю, но нужно именно в виде расширения.xpi, можно его как-то отредактировать?
А что в нем сложного? При загрузке страницы он сканирует все ссылки на наличие в ее имени букв jpg и если при наведении на ссылку там такие буквы есть, появляется див с текстом.

Есть расширения которые, например рядом с ссылками показывают картинку в зависимости от типа ссылки (linkalert) или например показывают превью изображения при наведении на картинку (Image Preview или thumbnail expander), можно сделать на их основе, но не могу.

hydrolizer · №7

Kanzaki
Если перечисленные расширения внедряют доп. разметку в код страницы, то они именно и делают вышеперечисленное - отслеживают загрузку новых страниц. С полнотой охвата нюансов, соответствующей степени корректности работы расширения.

Kanzaki · №8

А как мне это сделать в моем расширении?

hydrolizer · №9

Kanzaki
Ну, поскольку уже речи о том, чтобы вставить скрипт как есть, не идет, то вот вам ссылки. Вам нужно сделать сделать вот это, но перед этим нужно сделать реализацию nsIWebProgressListener, а далее в обработчике nsIWebProgressListene.onStateChange() у экземпляра nsIWebProgress, пришедшего в обработчик, брать contentDocument - это и будет веб-документ, с элементами которого будет работать ваш скрипт. Экземпляр nsIWebProgress - это, фактически, browser таба, в котором загрузился документ. Момент, когда документ загрузился, следует определять в упомянутом обработчике по aStateFlags сигнатуры метода обработчика:

Выделить код

Код:

if ((aStateFlags & Components.interfaces.nsIWebProgressListener.STATE_START) &&
    (aStateFlags & Components.interfaces.nsIWebProgressListener.STATE_IS_DOCUMENT))
{
  ...
}

(подробнее - см. здесь).
Вроде бы всё.

Kanzaki · №10

Буду следовать совету okkamas_knife, но хотелось создать своё с нуля, а не править чужое от ненужного хлама.

hydrolizer, мне кажется вы слишком уж намудрили. Смотрел расширение image preview предварительно установив совместимость, там нет ничего даже похожего.
Тем не менее я благодарю Вас за помощь, друзья мои. Спасибо, что пытались помочь.

Tarassheff · №11

скажите что и куда прописать чтобы запустился javascript в моем расширении

Полезная информация

№103-09-2011 11:17:17