В этой статье рассмотрим аспекты работы с таким довольно популярным расширением для Firefox, как Greasemonkey. А именно: зачем нужен Greasemonkey, как его установить, как написать скрипт, где найти готовые скрипты и т.п.

1. Зачем нужен Greasemonkey?

Greasemonkey - это расширение, изначально написанное для браузера Mozilla Firefox, которое позволяет выполнять пользовательский JavaScript-код на любых веб-страницах. То есть пользователь может добавить свой собственный JavaScript, который запуститься вместе с теми скриптами, которые уже есть на сайте. Greasemonkey может понадобиться для многих целей, одна из них - добавление нового функционала, который не предусмотрен самим сайтом. В этой статье будет продемонстрирован пример расширение функционала сайта комиксов http://fffuuu.ru.

2. Как установить Greasemonkey и создать скрипт?

Для этого необходимо зайти на страницу расширения и установить его через кнопку «Добавить в Firefox». После перезапуска браузера появиться иконка расширения в виде улыбающейся мартышки в правом верхнем углу.

Greasemonkey иконка

Для создания скрипта можно использовать выпадающее меню этой кнопки, затем пункт «Создать скрипт». Вводим имя скрипта, описание (если требуется). Также необходимо ввести пространство имён. Насколько я понял, это поле имеет значение, если Вы захотите поделиться Вашими скриптами с сообществом. Обычно туда пишут адрес сайта автора (для того, чтобы программа различала 2 скрипта, если имена их совпадут). Если Вы пишите скрипт для себя, введите туда любую строку.

Также необходимо задать поле «Включение». Оно содержит список страниц, на которых будет выполняться Ваш скрипт. Если оставить это поле пустым, то скрипт будет действовать везде. Давайте перейдём к реальному примеру и предположим, что я хочу добавить какой либо скрипт на сайт комиксов fffuuu.ru. Адрес каждого комикса на этом сайте имеет вид «http://fffuuu.ru/show/324679», где последние цифры - это номер комикса. И я хочу, чтобы мой скрипт запускался только на странице с комиксом (и не запускался, например, на главной). Поэтому я напишу в поле «Включение» следующую строку: «http://fffuuu.ru/show/*». Звёздочка будет задавать шаблон, вместо которого может быть любые символы в любом количестве.

При первом создании скрипта программа предложит выбрать внешний редактор, который будет использоваться для написания скриптов. Если Вы не используете такой, можно выбрать обычный Блокнот. Я использую NetBeans. В любом случае, перед нами отобразиться наш редактор из заготовкой нашего скрипта. У меня она будет иметь вид:

// ==UserScript==
// @name           fffuuu
// @namespace      http://softlakecity.ru
// @include        http://fffuuu.ru/show/*
// ==/UserScript==

3. Написание скриптов Greasemonkey и управление ими

Ну, собственно, можно и начать писать скрипт. Хотя Greasemonkey - это просто средство запуска скриптов, а не язык программирования, «hello world» на Greasemonkey будет иметь вид:

// ==UserScript==
// @name           fffuuu
// @namespace      http://softlakecity.ru
// @include        http://fffuuu.ru/show/*
// ==/UserScript==
alert('hello, world!');

Наш скрипт будет выводить сообщение 'hello, world!' на страницах, указанных в директиве @include.

Управление написанными скриптами происходит в окне «Дополнения» Mozilla Firefox, там появляется новая вкладка «Пользовательские скрипты», через которую можно включать, отключать, удалять и редактировать их.

4. Как можно получить доступ к функции или переменной, которая уже есть на странице?

Предположим, мы хотим получить получить доступ к функции someFunction(), которая есть в скрипте сайта. Напрямую получить такой доступ не получиться. Для этой цели нужно использовать объект unsafeWindow. Чтобы выполнить нашу функцию, напишем:

unsafeWindow.someFunction();

5. Пример пользовательского скрипта Greasemonkey

Давайте продемонстрируем пример какого-нибудь более-менее полезного скрипта Greasemonkey. Есть такой сайт http://fffuuu.ru, там пользователи публикуют дурацкие, но иногда забавные комиксы. Для того, чтобы переключаться между комиксами, надо нажимать кнопки «Предыдущий» и «Следующий» в виде картинок-стрелок по бокам. Иногда пользователи выкладывают слишком большие изображения, и для того, чтобы увидеть кнопку «Следующий», надо пользоваться скролом. Да и вообще, было бы удобно иметь возможность переключаться между комиксами с помощью клавиатуры, как это происходит, например, в Вконтакте. Ещё каждому комиксу можно поставить плюсик, либо оценку «Школоло».
Путём анализа кода страницы можно увидеть, что ссылка «Следующий» имеет класс «right_arr», а «Предыдущий» - «left_arr». При нажатии на кнопку «Плюс» запускается функция vote(comicsID, 'rating','news'), где comicsID - номер комикса. Если нажать на кнопку «Школоло», то запускается эта же функция, но второй параметр равен «ratingX».
Предположим, мы хотим, чтобы нажатие кнопок влево и вправо на клавиатуре было равнозначно клику по ссылкам «Предыдущий» и «Следующий» соответственно, а нажатие кнопок Delele и Insert соответствовало кнопкам «Школоло» и «Плюс».

// ==UserScript==
// @name           fffuuu
// @namespace      http://softlakecity.ru
// @include        http://fffuuu.ru/show/*
// ==/UserScript==
document.onkeyup = KeyCheck; // Назначим обработчик событий нажатий клавиш
function KeyCheck(event)
{    
    console.log(event.keyCode);
    switch(event.keyCode) // Проверяем, какую клавишу нажал пользователь
    { 
        case 37: // Если это стрелка влево    
            alink = document.getElementsByClassName('left_arr'); // Получаем элемент с классом left_arr (ссылка)
            if(alink.length == 1) {
                window.location.href = alink[0].href; // Переходим по ссылке
            }            
            break;
        case 39: // Если это стрелка вправо            
            alink = document.getElementsByClassName('right_arr');
            if(alink.length == 1) {
                window.location.href = alink[0].href;
            }
            break;
        case 46: // Если это клавиша Del
            comicsID = document.URL.substr(22); // Получаем номер комикса из адресной строки
            unsafeWindow.vote(comicsID, 'ratingX','news'); // Запускаем функцию голосования, которая уже есть на сайте
            break;
        case 45: // Если это клавиша Insert
            comicsID = document.URL.substr(22);
            unsafeWindow.vote(comicsID, 'rating','news');            
            break;
    }
}

6. Подключение jQuery в Greasemonkey

В Greasemonkey можно легко подключить jQuery или любой другой фреймворк, библиотеку или скрипт. Для этого надо использовать директиву @require, предварительно убедившись, что наш фреймворк не используется на сайте.
Вот-так можно подключить jQuery с Google API:

// ==UserScript==
// @name           youtube
// @namespace      http://softlakecity.ru
// @include        http://www.youtube.com/*
// @require        https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
// ==/UserScript==
$(document).ready(function() {
    alert('hello!');
});

Однако, если этот способ по какой-то причине не работает, Вы можете использовать альтернативный.

// ==UserScript==
// @name           youtube
// @namespace      http://softlakecity.ru
// @include        http://www.youtube.com/watch?v=*
// ==/UserScript==
var script = document.createElement('script');
script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js';
document.getElementsByTagName('head')[0].appendChild(script);
script.addEventListener('load', function(){ 
    jQuery = unsafeWindow['jQuery'];
    jQuery.noConflict();
    jQuery(document).ready(function() {
        console.log('here'); // Вставьте Ваш jQuery-код сюда. Используйте полное имя объекта jQuery, а не знак доллара.
    });
}, false);

Кстати, проверить, имеется ли библиотека jQuery на сайте, можно так:

if (unsafeWindow.jQuery === undefined) {
    console.log('jQuery на сайте нет.');
} else {
   jQuery = unsafeWindow.jQuery;
   console.log('Версия jQuery на сайте ' + jQuery.fn.jquery);
}

7. Как можно симулировать клик мышкой?

В случае, если Вам необходимо симулировать клик левой кнопкой мыши по какому-то элементу на странице (как-будто это пользователь сам кликнул), можно воспользоваться следующей функцией. Она принимает элемент, по которому надо кликнуть, в качестве аргумента, и генерирует соответствующее событие.

var simulateClick = function( el ) {
   var customEvent = document.createEvent("MouseEvents");
   customEvent.initMouseEvent(   "click",
                        true,
                        true,
                        unsafeWindow,
                        1,
                        0,
                        0,
                        0,
                        0,
                        false,
                        false,
                        false,
                        false,
                        0,
                        undefined
                     );
   el.dispatchEvent( customEvent );
};

8. Где можно найти готовые скрипты Greasemonkey?

На сайте http://userscripts.org/

9. Что насчёт поддержки Greasemonkey Хромом?

Пока что не знаю. Вроде заявлена «нативная», то есть встроенная поддержка, но удобного интерфейса для запуска пользовательских скриптов я там не обнаружил. Зато есть Tampermonkey, который я попробовал - работает отлично. Единственное, что мне не понравилось, это то, что невозможно редактировать файлы во внешнем редакторе.

404 комментария

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