[JavaScript] Как писать продвинутые скрипты для GreaseMonkey

Автор: BlackSilver
17.04.2010 21:38

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

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

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

GM_setValue(string name, object value)

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

Параметры:

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

GM_getValue(string name, object default)

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

Параметры:

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

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

Подменю команд скриптов greasemonkey.

Если правой кнопкой ткнуть на лого 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 от угла экрана. В итоге у меня получилось вот так:

Окно изменения параметров в скрипте для greasemonkey.

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

Заметьте, что форма совсем статична. Дело в том, что если повесить, например, на кнопку сохранения обработчик события 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 можно писать очень серьёзные скрипты. Кстати, это делает их потенциально опасными. При установке чужих скриптов стоит обязательно просмотреть их код в поисках подозрительных участков кода. Ведь они могут выполнять не только полезные функции. А, например, и утягивать ваши пароли.

Обновлено 18.04.2010 09:08

 

Комментарии  

 
#1 Гость 18.04.2010 17:41
Цитирую BlackSilver:
выполнять не только полезные функции. А, например, и утягивать ваши пароли.


интересно было бы реализовать утилиту, что-то типа логгера всех действий браузера - куда ходил пользователь, зачем, во сколько. Такая штука бы пригодилась например.. для ведения статистики ;)
Цитировать
 
 
#2 Гость 18.04.2010 20:18
Цитирую sacredphoenix:
интересно было бы реализовать утилиту, что-то типа логгера всех действий браузера - куда ходил пользователь, зачем, во сколько. Такая штука бы пригодилась например.. для ведения статистики ;)

Вполне реально. Только это затруднительно запоминать самим скриптом - лучше разместить в сети скрипт, который всё анализирует и запоминает, а данные посылать ему средствами ajax. Тогда можно запоминать даже действия на страницах.
Недостаток в том, что этот код легко обнаружить - придется скрывать его в коде другого, полезного скрипта.
Цитировать
 
 
#3 Гость 04.04.2011 10:18
А как можно в своём greasemonkey скрипте сделать кнопку "settings", где юзер мог бы задать какие-то личные настройки, которые дальше уже использовать буду в скриптах?
Например его ФИО, email, которые буду выделять если нашёл на странице.
Цитировать
 
 
#4 https://vk.com/selev 20.06.2016 13:25
как добавить подменю редактировать скрипт
привязаный к страничке ?
Цитировать
 

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


Защитный код
Обновить