Pull to refresh

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

Reading time 3 min
Views 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 для других браузеров, чтобы те задумались о поддержке столь полезных функций. Но если вы пишете скрипт для личного пользования — воспользоваться данными возможностями вполне можно уже сегодня.
Tags:
Hubs:
If this publication inspired you and you want to support the author, do not hesitate to click on the button
+34
Comments 24
Comments Comments 24

Articles