Как стать автором
Обновить

Используем jQuery в скриптах GreaseMonkey

Время на прочтение3 мин
Количество просмотров15K
Я хочу рассказать об удобных и неоправданно редко использующихся новшествах GreaseMonkey версии 0.8, которая доступна уже более года. Они помогут сделать пользовательские скрипты более модульными, а главное — дадут возможность без ухищрений использовать jQuery, что позволит нам «писать меньше, а делать больше». Речь идет о новых мета-параметрах пользовательских скриптов: @resource и @require.

Рассмотрим небольшой пример: habratest.user.js. Скрипт добавляет в меню Хабрахабра логотип GreaseMonkey, при клике по которому отобразится текст «Hello, world!», взятый из внешнего файла.
// ==Userscript==<br>// @name   habratest<br>// @namespace habratest<br>// @include  http://habrahabr.ru/*<br>// @include  http://*.habrahabr.ru/*<br>// @resource gm_logo http://veg.slutsk.net/habr/greasemonkey.png<br>// @resource hello http://veg.slutsk.net/habr/hello.txt<br>// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js<br>// ==/Userscript==<br><br>$(document).ready(function()<br>{<br>    $("ul.panel-nav-top").append('<li style="float: right;" id="habratest"></li>');<br>    $("#habratest").append('<img src="'+GM_getResourceURL("gm_logo")+'">');<br>    $("#habratest img").click(function()<br>    {<br>        alert(GM_getResourceText("hello"));<br>    });<br>});

@resource позволяет привязать к пользовательскому скрипту внешние файлы: картинки, текстовые файлы и т.д. — все что может понадобиться во время выполнения. В примере «gm_logo» — это имя ресурса. Функция GM_getResourceURL предназначена для получения локальной ссылки на файл (например, на картинку), GM_getResourceText — для получения текста из файла (файл может содержать, например, большой кусок HTML). Обе функции принимают в качестве параметра имя ресурса. Преимущество использования ресурсов вместо прямых ссылок на сервер заключается в том, что указанные файлы загружаются один раз во время установки скрипта и в дальнейшем всегда берутся с локальной машины.

Куда более интересен @require, который позволяет подключать внешние библиотеки к скрипту. Можно конечно же городить какой-нибудь код с динамическим созданием тега script, достаточно нетривиальными способами ожидать его загрузки. Но в таком случае файл библиотеки будет запрашиваться с сервера каждый раз при открытии новой страницы в браузере. Этих недостатков лишен @require — файл будет запрошен всего один раз при установке, а главное — он будет будет гарантированно выполнен до того, как начнется выполнение вашего пользовательского скрипта.

В качестве полезного примера предлагаю посмотреть код скрипта yandexru.user.js, который на страницах результатов поиска добавляет в форму запроса опцию «Поиск без исключения», поле «Поиск по сайту», а также отображает повлиял ли установленный регион на результаты поиска.

К сожалению, сегодня подобные вещи можно делать только в Firefox. Есть смысл намекнуть разработчикам аналогов GreaseMonkey для других браузеров, чтобы те задумались о поддержке столь полезных функций. Но если вы пишете скрипт для личного пользования — воспользоваться данными возможностями вполне можно уже сегодня.
Теги:
Хабы:
Если эта публикация вас вдохновила и вы хотите поддержать автора — не стесняйтесь нажать на кнопку
+34
Комментарии24

Публикации

Изменить настройки темы

Истории

Ближайшие события

Weekend Offer в AliExpress
Дата20 – 21 апреля
Время10:00 – 20:00
Место
Онлайн
Конференция «Я.Железо»
Дата18 мая
Время14:00 – 23:59
Место
МоскваОнлайн