Журнал LinuxFormat - перейти на главную

LXF118:Greasemonkey

Материал из Linuxformat
Версия от 11:14, 26 февраля 2010; Crazy Rebel (обсуждение | вклад)

(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск
Подписка на печатную версию
Весь 2015 год (12 номеров)
Первое полугодие (6 номеров)
Второе полугодие (6 номеров)
Подписка на электронную версию
Весь 2015 год (12 номеров)
Первое полугодие (6 номеров)
Второе полугодие (6 номеров)
Подшивки старых номеров журнала (печатные версии)
Весь 2014 год (12 номеров)
Первое полугодие (6 номеров)
Второе полугодие (6 номеров)
Firefox Не давайте web допечь вас – Greasemonkey поможет

Содержание

Greasemonkey: Правим Сеть

Интернет – замечательная штука, но не всегда выглядит должным образом. Джульетта Кемп и Greasemonkey берутся это исправить.

Идея, лежащая в основе Greasemonkey, очень проста. Это расширение Firefox, и оно устанавливается так же, как и все остальные (найдите его с помощью меню Tools > Addons [Инструменты > Дополнения] и нажмите Install [Установить]). Однако само по себе оно ничего не делает, лишь позволяет выполнять скрипты (ваши или написанные другими пользователями), чтобы изменить внешний вид и поведение web-страниц.

Скрипты Greasemonkey – это небольшие программы, которые и делают всю работу; сам Greasemonkey только загружает их и управляет ими. Составляются они на JavaScript, но по соображениям безопасности нельзя просто написать обычный скрипт и использовать его. Нужно знать о кое-каких подводных камнях, хотя сценарии данного урока не затрагивают ни один из них.

Сразу скажу тем, кто не знаком с JavaScript, что в этой статье вы не найдете подробного описания его синтаксиса; но пусть это вас не останавливает. Приведенные примеры довольно логичны, и все объяснены.

Чтобы установить сценарий, написанный другим пользователем, откройте его страницу в Firefox и щелкните по ссылке на скрипт. Появится окно инсталлятора (как и для обычного расширения), и вы сможете просмотреть исходный код скрипта или установить его, если уверены в содержимом.

Часть 1 Мой первый скрипт Greasemonkey

Чтобы максимально упростить написание скрипта, Greasemonkey предоставляет полезный диалог. Сразу после установки Greasemonkey в правом нижнем углу окна Firefox на панели инструментов появится обезьянья мордочка. Кликните на ней правой кнопкой мыши, и откроется меню, где будет пункт Новый скрипт [New User Script]. Выберите его, и появится диалог, похожий на приведенный справа.

Поле ‘name’ – это имя скрипта. Лучше выбрать имя, ясно говорящее о том, что делает сценарий – потом будет проще управлять ими. Строка ‘namespace’ (пространство имен) позволяет избежать конфликтов вашего скрипта с другими. Если вы попробуете добавить сценарий, имя которого совпадает с уже установленным, как раз пространство имен и определит, будет ли последний перезаписан (если пространства имен одинаковы) или будет существовать совместно со старым (если они разные). Здесь есть несколько вариантов: например, использовать в качестве пространства доменное имя своего web-сайта. Как альтернативу, можно взять http://localhost или, если вы собираетесь загрузить свой готовый скрипт на сайт http://userscripts.org, этот адрес. В текущей версии Greasemonkey это поле обязательно для заполнения.

Поле ‘description’ содержит описание действий скрипта. Всегда заполняйте его, даже для собственных скриптов – их может накопиться много, и если оставить информацию о том, что делает каждый сценарий, ими будет проще управлять.

Правила включения (‘include’) и исключения (‘exclude’) определяют, на каких сайтах будет выполняться скрипт, и могут содержать шаблоны. Так, www.example.com/* соответствует адресу www.example.com/ и всем страницам, начинающимся с этого адреса (тогда как www.example.com/ без звездочки соответствует только главной странице). Шаблоны могут использоваться и в доменных именах: http://*.example.com/f* соответствует всем страницам, пути к которым начинаются с f, на всех серверах домена example.com. По умолчанию поле «include» содержит адрес страницы, с которой было открыто окно создания скрипта, но его можно спокойно очистить. Если адрес страницы соответствует хотя бы одному из правил включения и не подпадает ни под одно правило исключения, то скрипт будет запущен. Если правила включения не заданы, то Greasemonkey использует @include *, что соответствует всем адресам, и скрипт будет выполняться на каждой загружаемой странице.


Наш первый скрипт сделает фон страницы белым: это спасет вас, если вы угодите на сайт, чей автор – любитель гламурно-розового или покрыл фон мозаикой из картинки, через пару секунд вызывающей ломоту в висках. Итак, выберите сайт, у которого нужно изменить цвет фона, добавьте его адрес в поле @include (здесь я использую www.example.com) и заполните другие поля подходящими значениями.

Сразу после этого будет запрошен предпочитаемый редактор (если он еще не задан), и Greasemonkey загрузит файл скрипта. Сейчас в нем содержатся только метаданные.


Файл выглядит примерно так: 

// ==UserScript==
// @name Background Change
// @namespace http://www.example.com/~juliet/
// @description Change the background colour of a page
// @include http://www.example.com/*
// ==/UserScript==

Пора написать сам сценарий. Он лишь изменяет цвет фона всех страниц в домене include на белый. (Бывает, что цвета фона и в самом деле не смотрятся.) Для страниц без фреймов или прочих осложнений это делается всего одной строкой: 

document.body.style.background = “#ffffff”;

document – это встроенный способ ссылки на текущую страницу. Это объект DOM (Document Object Model – объектная модель документа), который представляет весь HTML-документ. Представьте его себе как дерево HTML-элементов (объектов). Каждый новый элемент является «дочерним» по отношению к предыдущему (посмотрите на схему, изображающую возможную структуру тела HTML-документа).

В этой модели для ссылки на объект используется нотация главный объект.потомок.потомкпотомка. Таким образом, сначала идет элемент body, затем стиль элемента body и, наконец, атрибут background стиля элемента body. Данный атрибут устанавливается в белый цвет (#ffffff – обозначение белого цвета в шестнадцатеричной записи; это один из стандартов HTML. Можно было бы использовать и просто white)


Попробуйте сценарий в деле – откройте страницу с произвольным фоном (не белым), с помощью меню Управление скриптами [Manage Scripts] добавьте ее адрес в список ‘include’ для только что созданного скрипта и обновите страницу. Помните, что меняется не сама страница, а только ее отображение: если результат вышел скверным, никто не пострадает! Скрипт можно просто отключить или отредактировать его и обновить страницу. Так что не бойтесь экспериментировать.

Greasemonkey включается и отключается щелчком левой кнопкой мыши на его значке. Можно отключить его, посмотреть, как выглядит страница, потом включить, перезагрузить страницу и увидеть, что делает скрипт.

Часть 2 Зададим стили CSS

Однако этот скрипт не работает с фреймами – он изменит цвет фона лишь у главного документа. Если на вашей странице с фоном «вырви глаз» есть фреймы, лучше всего одолеть их все сразу, добавив стиль CSS, который переопределит существующий. Чтобы отредактировать уже созданный файл, щелкните на обезьяньей мордочке правой кнопкой и выберите Управление скриптами. Укажите свой скрипт и нажмите на кнопку Правка [Edit], чтобы он снова появился в текстовом редакторе. Во время тестирования не нужно закрывать редактор или диалог управления скриптами – достаточно сохранить файл и попробовать обновить страницу. 

 function addCss(cssString) {
   var head = document.getElementsByTagName(‘head’)[0];
   return unless head;
   var newCss = document.createElement(‘style’);
   newCss.type = “text/css”;
   newCss.innerHTML = cssString;
   head.appendChild(newCss);
 }
 addCss (
   ‘* { background-color: #ffffff ! important; }’
 );

Первая функция (addCss) задает способ добавления глобальной таблицы стилей CSS. document опять-таки ссылается на текущую страницу, но в этом примере мы используем функцию getElementsByTagName («получить элементы по имени тэга» – именно это она и делает) для выбора первого элемента head. Для тех, кто совсем не знаком с CSS: стили задаются [в том числе] в секции head HTML-файла, и нам нужно добыть этот элемент, чтобы он стал родительским для нового элемента CSS. Здесь есть строка, которая отлавливает ошибочную ситуацию, когда секции head нет (производится возврат из функции без каких-либо действий), затем скрипт создает элемент style и устанавливает его атрибут type в text/css. В строке 

newCss.innerHTML = cssString

функция принимает то, что ей передано, и вставляет это в элемент style. Затем полностью созданный элемент style добавляется к элементу head – вот и все.

В последних строках происходит вызов функции с аргументом, устанавливающим цвет фона – там, где строка cssString. Обратите внимание на то, что мы используем скобки (), потому что вызываем функцию, а не определяем ее. Флаг ! important гарантирует, что ваши CSS-стили переопределят указанные на странице.

Фактически этот код добавляет в заголовок HTML-страницы следующие строки: 

<style type=”text/css”>
  * {background-color: #ffffff ! important;}
</style>

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

  addCss (
   ‘* { background-color: #ffffff ! important;
      text-align: justify ! important;
      color: black ! important; }’
  );

установит цвет фона в белый, весь текст сделает черным и выровняет его по ширине.

Часть 3 Изменим заданные элементы

Итак, мы научились менять стиль одного элемента, переделав объект DOM, или множество стилей, добавляя собственные CSS-записи, и можем применить это к заданным сайтам с помощью правил включения/исключения Greasemonkey. А если нам нужно найти элементы определенного типа, встречающиеся на странице несколько раз, и изменить их?

Например, у вас есть форум, пользователи которого иногда используют малоприятные аватары, и вы хотите просто заменить их все на безопасную картинку из вашего собственного web-пространства. Прежде всего, найдем все картинки на странице: 

 var allImgs,thisImg;
 allImgs = document.evaluate(‘//img[@src]’,
  document,
  null,
  XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);

Полезен здесь метод document.evaluate. Его освоение дает огромные возможности. Первый параметр (’//img[@src]’) представляет собой XPath-запрос (подробнее об этом – чуть ниже); второй – область поиска. В данном случае это весь документ, но в дальнейшем ее можно ограничить только дочерними элементами. Третий параметр – функция разрешения пространства имен, которая имеет смысл только для документов типа application/xhtml+xml.

Четвертый параметр задает способ возвращения результатов. Вариант, указанный здесь, соответствует произвольному порядку, что чаще всего и нужно. Если результаты требуется вернуть в порядке их появления на странице, используйте вместо него XPathResult.ORDERED_NODE_SNAPSHOT_TYPE. Последний параметр позволяет объединить результаты запроса – передайте туда результат предыдущего вызова document.evaluate, и получите их назад вместе. Поэкспериментируйте с этим!

Запрос XPath (первый параметр) – «мотор» этой функции. XPath – мощный язык запросов для XML-документов, встроенный в Firefox [и не только, – прим. ред.], и его можно использовать в Greasemonkey. Если вы ищете определенный набор элементов, можно просто пройтись по дереву DOM, выудить наборы узлов и найти в них искомое. Но это довольно медленно и не очень красиво с точки зрения кода. XPath позволяет найти на странице все, что нужно, гораздо быстрее и элегантнее. Я воспользуюсь им в нескольких скриптах, и, надеюсь, это поможет вам понять, как он работает – если хотите узнать о нем подробнее, поищите спецификацию или онлайн-учебники в Интернете. Язык в самом деле очень гибок: если вы можете определить набор результатов, который хотите получить из HTML-документа, то сможете и написать XPath-запрос, который позволит их получить.

Вернемся к нашему скрипту: картинки мы добыли, и хотим с ними что-то сделать. Вот следующий фрагмент кода: допишите его сразу после приведенного выше: 

 for (var i=0;i<allImgs.snapshotLength;i++) {
     var thisImg = allImgs.snapshotItem(i);
     var src = thisImg.src;
     var srcMatch = src.match(‘^http://www.example.com/forums/userpic/’);
     if (srcMatch != null) {
         thisImg.src = ‘http://www.example.com/~juliet/safepic.gif’;
     }
 }

'snapshotLength и snapshotItem — методы, работающие с результатом вызова document.evaluate и возвращающие соответственно общее число результатов и заданный результат по его номеру. Вставьте оба в цикл for, как в приведенном примере, и обработайте каждый элемент (здесь – каждое изображение со страницы) результата запроса XPath.

Небольшое замечание: в обычном JavaScript пройтись по коллекции объектов можно так: 

 for (var thisImg in allImgs) {
     // do stuff
 }


Из-за особенностей реализации безопасности в скриптах Greasemonkey такой способ работать не будет. Приходится идти окружным путем.

thisImg.src дает нам значение атрибута src изображения. Так, для тэга <img src=«foo.jpg»>, thisImg.src вернет foo.jpg. (Точно так же можно получить значение атрибутов width или height или любых других атрибутов тэга img. Полный список элементов и атрибутов объекта DOM можно найти в Интернете.)

В конце мы пытаемся сравнить src с ожидаемым значением для пользовательских аватар на этом форуме (чтобы узнать его, взгляните на исходный код страницы форума), и если результат не равен нулю (соответствие есть), значение атрибута src заменяется путем к безопасной картинке. (Можно было бы обойтись без лишней строки, вызвав src.match, но приведенный вариант более понятен.) Готово!

Источник — «http://wiki.linuxformat.ru/wiki/index.php?title=LXF118:Greasemonkey&oldid=9767»
Персональные инструменты
купить
подписаться
Яндекс.Метрика