Пишем свой первый скрипт для Greasemonkey

Greasemonkey — это расширение для Mozilla Firefox, и некоторых других браузеров на основе движка Gecko, которое позволяет пользователю добавлять JavaScript на любую страницу. Сам файл с JS должен быть оформлен соответствующим образом.

Для чего же пользователю, к примеру мне, или вам, нужно добавлять JS на страницы любых сайтов? Это чудесная возможность управлять внешним видом страницы и её функционалом. Естественно есть ограничения, которые накладывает сам язык JS. Однако и возможностей у него очень и очень много.

Как правило, большинство скриптов для Greasemonkey тесно «дружат» с CSS. Так что получается, этот пост несколько пересекается с темой User-CSS — однако я в название топика не стал выносить этот аспект.

Давайте же напишем пару очень простых скриптов для Greasemonkey, ну а жертвой для наших опытов возьмём, само собой, habrahabr.

Для начала хотелось бы уточнить одну деталь — ниже я рассматриваю написание самых простых скриптов для Greasemonkey, а не основы работы с этим расширением. Подразумевается, что вы уже пользуетесь/пользовались Greasemonkey и не имеете проблем с взаимопониманием.

Сначала разбёрём то, как должен быть оформлен скрипт, что бы Greasemonkey его понял и принял как родного.

К примеру, имеем скрипт, который на каждой странице, кроме habrahabr.ru и моего блога absolvo.ru будет выводить алертом «Hello World!»

Его код крайне простой (установить скрипт можно с этой страницы):

// ----------Куча комментариев----------------------------------------------
//
// ==UserScript==
// @name Hello World
// @namespace absolvo.ru
// @version 0.01
// @source absolvo.ru
// @description Этот скрипт покажет вам алерт с "hello word" на каждой странице, кроме исключений!
// @include *
// @exclude http://*.habrahabr.ru/*
// @exclude habrahabr.ru*
// @exclude absolvo.ru*
// ==/UserScript==

alert('Hello world!');

Рассмотрим детально:

Если перед строкой поставить две слеша "//" — то строка будет считаться закомментированной и будет игнорироваться обработчиком.

==UserScript== и ==/UserScript== — теги, которые сообщают обработчику о том, что между ними заключена служебная информация, обязательная для обработки.

name — имя ваше скрипта для Greasemonkey;

@namespase — грубо говоря — это дополнительный способ идентификации скрипта. Согласитесь, скриптов с названием «Hello World» просто огромное количество, и возможно один из них уже установлен у вас, и Greasemonkey, благодаря namespace, не ругнётся на дублирование, и молча установит его. К слову, тут можно написать что угодно, свой ник, адрес сайта, или просто абракадабру.

description — описание скрипта. Рекомендуется писать латиницей, но если вы пишете его для себя, то можете поэкспериментировать и с кирилицей. Лично у меня всё прекрасно и с кирилицей работает (этот вариант как раз выложен выше), только не забудьте о том, что сохранять файлик со скриптом надо в UTF-8.

include — адреса страниц, на которых будет выполнятся скрипт. Поддерживает маски, но без регулярок — только звёздочки. Строк «включений» может быть сколько угодно много.

@exclude — адреса страниц, на которых НЕ будет выполнятся скрипт. Поддерживает маски, но без регулярок — только звёздочки. Строк «исключений» может быть сколько угодно много. У меня в примере их три.

Строки include или @exclude могут и отсутствовать. К примеру, если вы пишете
// @include *
и уверены, что исключения вам не нужны, то строку @exclude можно благополучно не писать.

version — версия вашего скрипта.

source — домашняя страница скрипта.

Ну а дальше сам JS — самый обыкновенный. Вот в общем то и всё.

Давайте ради примеру сделаем совершенно несложный, непрактичный, но всё-таки пример, который наверняка ещё раз докажет вам, что в скриптах для Greasemonkey можно использовать все преимущества JS (установить скрипт можно с этой страницы):

// ==UserScript==
// @name Hello habrahabr!
// @namespace absolvo.ru
// @version 0.01
// @source absolvo.ru
// @description example script to insert div with h1 on every page habrahabr.ru
// @include habrahabr.ru*
// @include http://*.habrahabr.ru/*
// @exclude absolvo.ru*
// ==/UserScript==

var logo = document.createElement(«div»);
logo.innerHTML = '
<div style=«margin: 0pt auto; width: 800px; text-align: center;»>
<h1 style=«margin: 15px;»>' +
'Hello World habrahabr! ' +
'</h1>
</div>
';

document.body.insertBefore(logo, document.body.firstChild);

Объяснять что делает скрипт — я не буду, я думаю вы сможете его поставить, осмотреть и разобрать самостоятельно.

Средства для дебага скриптов:
Web Developer Extension;
Aardvark;
Venkman Javascript Debugger;
Web Development Bookmarklets;
JSUnit;
js-lint;

Не стоит изобретать велосипед, есть огромное количество скриптов, хотя бы на http://userscripts.org/ — вполне вероятно, что он уже написан за вас.

Ссылки по теме:
greasespot.net — страница проекта;
userscripts.org — самый большой сборник скриптов;
Страничка с примерами — страница для установки скриптов, которые выступили в роли примеров;
absolvo.ru & RSS — мой блог и мой RSS.