OpenQuality.ru

GreaseMonkey: простота и эффективность решений

Добрый день.

Неутомимые любители web-cерфинга уже давно научились не обращать внимания на рекламу. Аддон AdBlock Plus с легкостью убирает баннеры и flash-заставки. Более того, вырабатывается привычка просто не замечать блоки контекстной белиберды и проплаченные материалы топ-блоггеров. Все хорошо, не не спится творцам рекламных компаний и гуру маркетинговых технологий. Как освоить рекламный бюджет, как привлечь ненаглядных потребителей? Хорошим товаром, который будет продавать себя сам? Нет, это не работает. Люди глупые, не поймут, поэтому надо больше рекламы! Внедримся туда, где нас точно не пропустят. Вот замечательный пример: Gazeta.ru продала букву “й” компании Yota. Отдельные буквы “й” становятся изгоями и превращаются в живую рекламу “Йоты”. Выглядит это так:

Идея хорошая, (почти) оригинальная, но интересна лишь в первый раз. Далее такое творчество вызывает недоумение, плавно переходящее… плавно переходящее в желание от него избавиться. И читать действительно хорошие материалы Газеты (это не реклама, sic!) без напоминаний о сервисах Yota (и это тоже не реклама). Как поступить? Один из вариантов – написать скрипт, который будет возвращать буквам исходное значение. Платформой может служить аддон GreaseMonkey, который позволяет кастомизировать отображаемую web-страницу с помощью JavaScript. После установки плагина в правом нижнем углу браузера появляется забавная рожица обезьянки, за которой спрятано меню, позволяющее редактировать пользовательские скрипты. Вы задаете функциональность ваших скриптов и определяете, при заходе на какие страницы они должны выполняться.

Рассмотрим исходный код страницы на Gazeta.ru (c помощью FireBug). Буква “й” меняет свое обличье двумя способами: либо в гиперссылке, либо в теге span (причем,тег span может находиться внутри текста гиперссылки):

<a class="yota" href="http://www.gazeta.ru/yota/" style="position: relative;">й</a>
<a class="dg" href="/politics/2009/12/12_a_3297785.shtml">Правительства США и России должны освободить дорогу для инициативы частных граждан и общественных институтов, если Москва и Вашингтон действительно хотят «перезагрузки» отношени
<span class="yota">й</span>, считает замгоссекретаря...</a>

Буквы-смертники выбираются по несложному алгоритму с обязательным обходом острых углов. Йух!

var rex = /(?:(?!ху)..)й(?=[^a-zа-я])/g;

Таким образом, наша цель состоит в том, чтобы найти эти буквы и вернуть им естественный вид. С задачей справляется такой скрипт-однострочник:

// ==UserScript==
// @name yoyo
// @namespace noAds
// @include http://gazeta.ru/*
// ==/UserScript==
main();
 
function main(){
 document.body.innerHTML = document.body.innerHTML.replace(/<(?:a|span)\sclass="yota".*?>й<\/(?:a|span)>/g, "й");
};

Важный нюанс: скрипт лучше сохранять в кодировке UTF-8 (GreaseMonkey предлагает выбор редактора для скрипта; в этом редакторе стоит проверить дефолтную кодировку).

Все. Теперь букве “й” ничто не угрожает. До следующей атаки :)

Так что же? Нет рекламе? Почему же, пусть будет. Рекламные бюджеты позволяют жить хорошим проектам, и сотрудничество Gazeta.ru с Yota здесь не исключение. Хочется лишь обратиться к чувству меры и здравому смыслу маркетинговых гуру. Пусть ваши услуги и товары будут способны говорить сами за себя. Пусть изменяют мир к лучшему. И тогда мы их найдем и полюбим.

Пользуясь случаем, остановимся на GreaseMonkey чуть подробнее. Во-первых, есть большая база пользовательских скриптов, в которой можно найти решения на любой вкус. Во-вторых, хорошим подспорьем для написания своих скриптов будет знание DOM. Вот пример скрипта, который заменяет даты на буллиты в ленте новостей OpenQuality.ru:

// ==UserScript==
// @name oq
// @namespace OpenQuality
// @include http://openquality.ru/news/
// ==/UserScript==
 
main();
 
function getElementsByClassName (cName){
    var eList = new Array();
    var elements = document.getElementsByTagName("*");
    for (var i = 0;i < elements.length;i++){
        if(elements[i].className == cName)
              eList.push(elements[i]);
    }
    return eList;
}
 
 
function main(){
   var newsdate = getElementsByClassName("newsdate");
   for (var i=0; i<newsdate.length; i++) {
       newsdate[i].style.color = '#990000';
       newsdate[i].innerHTML = newsdate[i].innerHTML.replace(/\d\d\.\d\d/, "&#149;&nbsp;");
   }
};

Все просто: содержимое и поведение web-страниц в ваших руках. До встречи.

Отправить в Twitter, Facebook, ВКонтакте | Опубликовано 14.12.2009 в рубрике "Инструменты"

Комментарии (2)

1. Автор комментария : Сергей | April 7, 2012

   Спасибо за интересный пример. Не думал, что можно управлять содержимым web-страницы таким образом.

   [Ответить]

   Капитан отвечает:
   April 7th, 2012 в 1:42 pm

   Да, возможности у GreaseMonkey действительно богатые!

   [Ответить]

   
   

Добавить комментарий