GreaseMonkey

индекс
148,13

Пишем кроссбраузерный UserJS. Пример №1: меняем логотип Яндексу

Firefox, Opera, Safari и Chrome поддерживают UserJS. Все по разному. Я планирую написать серию статей про то как писать скрипты для этих браузеров. В день по одной.

Сегодня мы поменяем логотип Яндекса на Гугловый. Такой вот бесполезный скрипт.

Yandex with Google logo

yandex-with-google-logo.user.js:

// ==Userscript==
// @name      Google logo on yandex.ru
// @include   http://www.yandex.ru/*
// ==/Userscript==

var logo = document.querySelector("img[src$='logo.png']");
if (logo) {
  logo.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';
  logo.removeAttribute('height');
}



Этот UserJS работает в последних версиях Firefox, Opera, Safari и Chrome. Но в Опере есть нюанс: переменная logo стала доступна с веб-страницы.

logo //[object HTMLImageElement] logo //undefined


Если бы на странице уже была определена переменная logo, то наш скрипт переопределил бы её. Этого можно избежать, обернув код в анонимную функцию. yandex-with-google-logo2.user.js:

// ==Userscript==
// @name      Google logo on yandex.ru
// @include   http://www.yandex.ru/*
// ==/Userscript==

(function(){
  var logo = document.querySelector("img[src$='logo.png']");
  if (logo) {
    logo.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';
    logo.removeAttribute('height');
  }
})();


Почему только в Опере переменная стала глобальной? В Опере, window в UserJS == window страницы.

В Greasemonkey же, window это XPCNativeWrapper. Этот объект как-бы снаружи window веб-страницы и скрипты веб-страницы не имеют доступа к нему. Обращение к window веб-страницы делается через window.wrappedJSObject (он же unsafeWindow).

window

В Safari Greasekit, window UserJS == window страницы, также как и в Опере. Тем не менее, переменные остаются локальными, как будто скрипт уже обёрнут в анонимную функцию.

Продолжение: Пример №2: переопределяем alert()
+74
31 октября 2009, 00:54
63

комментарии (26)

0
CrazyMacho #
Интересно. Пиши ещё :)
0
Ockonal #
Всегда хотел посмотреть в эту строну, да лень было :). Пишите, будет приятно почитать.
+8
Kalan #
Вспомнил первое апреля, когда на месте логотипа стояло слово «Гоголь».
Вспомнил, как я тогда поперхнулся молоком, увидев это.
–3
kellas #
Как это может пригодится?
0
SowingSadness #
Конкретно смена логотипа?
Ну, если вы системный администратор и яро ненавидите Яндекс :)
Добавляете этот скриптик и вуаля на всех компьютерах к браузерам. XD

P.S.
в IE тоже можно добавлять UserJS:
ie7pro.com/
0
ELV1S #
А вы пользуйтесь IE7Pro? Я в знаю о его существовании, но я пока не встречал людей, которые им пользуются.
0
AndrewTishkin #
Я пользовался, полгода назад или чуть раньше, но потом появился IE 8 :)
0
ELV1S #
Он должен работать и в IE 8. Несмотря на нелепое название.
0
SowingSadness #
Он работает в IE8, не смотря на нелепое название :)
+3
ELV1S #
«Hello world» тоже не слишком полезен.
0
kellas #
Я имею ввиду UserJS.
Как может пригодиться UserJS?
0
kellas #
Я имею ввиду UserJS.
Как может пригодиться UserJS?
0
bdsoft #
А из UserJS есть доступ к переменным страницы?
0
ELV1S #
Да. window страницы содержит все переменные страницы. Последние 3 абзаца как раз про это.
–11
G__Z #
ДОКОЛЕ?
НЛО прилетело и опубликовало эту надпись здесь
–1
aumeena #
Ахаха, теперь я могу сделать Яндекс своим поиском™!
Прикрутить свой лого ничего не мешает (:
Автору спасибо, это мой первый осознанный js-скрипт)
Ждем продолжения.
+1
Surgeon #
Не показывайте статью яндексу… обидятся…
+2
ELV1S #
Я сначало хотел Гуглу поставить логотип Яндекса. Но это оказалось слишком сложно для примера. У гугла разная разметка для залогиненного/незалогиненного юзера и google.ru/google.com.
0
oisee #
а можно подробнее, куда этот UserJS запихивать в разных браузерах?

Всегда ли надо устанавливать дополнения? (для той же Safari нашёл 8-p.info/greasekit/ — это оно?)
НЛО прилетело и опубликовало эту надпись здесь
+2
ELV1S #
0
nikitaeremin #
А вот эта строчка:

logo.removeAttribute('height');

зачем она нужна?

Без сбрасывания высоты изображения картинка не обновится? Или есть вероятность, что src изменится, но height останется прежним? в таком случае зачем сбрасывать только height и не трогать width? У логотипа яндекса и логотипа гугла и ширина и высота разные:

Яндекс
<img src=imgl.yandex.net/i/www/logo.png width=178 height=120 alt=Яндекс />

Гугл
img height=106 width=164 src=/images/nav_logo7.png />
+1
homm #
Если задана только ширина картинки, высота будет подобрана пропорционально изображению. Таким образом оставляя ширину мы вписываем лого гугла по размерам в страницу яндекса, а сбрасывая высоту, не допускаем изменение пропорций логотипа гугла.
0
nikitaeremin #
Спасибо, теперь понял!
0
Tatar #
Можно разыграть «непросвещенных» :)

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.