Со времен написания первой статьи про greasemonkey прошло немало времени. В это время я часто желал от greasemonkey возможностей больших, чем может предложить JavaScript. И был рад, узнав что эти возможности уже давно есть. Именно они описаны далее в статье. И, как всегда, вы можете скачать и установить пример. А теперь обо всем по порядку.

Сохранение/Загрузка параметров скрипта

Наверное, это самая нужная функция для написания более-менее серьёзных скриптов. Возможность запомнить значение переменной, а при следущем запуске вспонить его. Так вот, greasemonkey предоставляет для этого две API-фукции, которые просты и прекрасны.

GM_setValue(string name, object value)

Устанавливает значение сохраненной переменной.

Параметры:

• name - имя переменной,
• value - значение переменной.

GM_getValue(string name, object default)

Возвращает значение сохраненной переменной.

Параметры:

• name - имя переменной;
• default - значение по умолчанию.

Добавление пунктов в меню команд скрипта

Если правой кнопкой ткнуть на лого greasemonkey, можно увидеть подменю "Команды скрипта...". Да, это подменю заполняется скриптами. При помощи следующей API-функции:

GM_registerMenuCommand(caption, function)

Добавляет пункт в меню "Команды скрипта...".

Параметры:

• caption - заголовок пункта;
• function - имя запускаемой функции. Указывается без кавычек.

Вывод своей панели

Представим, что у вашего скрипта есть параметры, которые пользователь будет менять. Для этого нужно показать ему форму, в которой он может менять эти параметры. Форма будет скрыта и отображаться только тогда, когда пользователь этого захочет, то есть по выбору соответствующего пункта меню.

Чтобы показать окно настроек мы создадим div, заполним его и добавим в документ. У меня это получилось вот так:

 
text =
    "<div style='position: fixed; " +
    "top: 10px; left: 10px; background: #fff;" +
    "border: 2px solid #000; padding: 10px;'" +
    "name='opts' id='opts'>"+
    "Введите строку сообщения"+
    "<br><input type='text' id='gm_val' name='gm_val' value='"+GM_getValue('val', '')+"'>"+
    "<br><input type='button' id='gm_save' name='gm_save' value='Сохранить'>"+
    "</div>";
 
var opts = document.createElement("div");
opts.innerHTML = text;
document.body.insertBefore(opts, document.body.firstChild);
 

Свойство стиля 'position: fixed' позволило закрепить div на расстоянии top и left от угла экрана. В итоге у меня получилось вот так:

Обработка событий страницы

Заметьте, что форма совсем статична. Дело в том, что если повесить, например, на кнопку сохранения обработчик события onclick - этот кусок скрипта уже будет частью страницы. Во-первых, это плохо для параноиков, пользующихся NoScript. Чтобы запустить обработчик событий приходится разрешать все скрипты сайта. Во-вторых, для обработчика будут недоступны api-функции greasemonkey. А это условие уже очень серьёзно.

Выход есть. Мы будем перехватывать все события и реагировать на те из них, которые нам важны. Не всем это может показаться удобным, но это, вроде как, единственный вариант. Вот как этот кусок кода выглядит в скрипте примера:

document.addEventListener('click', function(event) {
  if(event.target.getAttribute('name') == 'gm_save') {
    GM_setValue('val', document.getElementById('gm_val').value);
    document.getElementById('opts').style.display = 'none';
    }
}, true);
 

Как видно, event.target - объект, с которым произошло событие. Далее скрипт сохраняет измененный параметр и скрывает панель.

Выводы

Итак, greasemonkey предоставляет гораздо большие возможности, чем я думал на момент написания первой статьи. Если к этому ещё добавить ещё и ajax, то выходит, что под greasemonkey можно писать очень серьёзные скрипты. Кстати, это делает их потенциально опасными. При установке чужих скриптов стоит обязательно просмотреть их код в поисках подозрительных участков кода. Ведь они могут выполнять не только полезные функции. А, например, и утягивать ваши пароли.