Пользователь
0,0
рейтинг
29 сентября 2011 в 18:43

Разработка → Userscripts. Углубляемся tutorial

Как упоминалось в предыдущей статье, юзерскрипты поддерживаются всеми современными браузерами. И даже кое-как поддерживаются в IE7 и выше.

В этой статье мы поговорим о браузерах:
  • Ограничения
  • Проблемы
  • Расширения для запуска юзерскриптов
  • Установка юзерскриптов



Пару слов о движках


Качество поддержки юзерскриптов находится на разном уровне в разных браузерах. Лучше всего поддержка юзерскриптов выполнена в браузерах Firefox и Chrome.
Эти браузеры предоставляют более менее дружелюбные интерфейсы для управления юзерскриптами.

Самые жесткие ограничения на юзерскрипты накладывает Chrome. Но почти все эти ограничения обходятся упаковыванием скрипта в простое расширение. Подробности этого процесса мы обсудим в следующей статье.

Теперь поговорим подробнее о поддержке юзерскриптов в отдельных браузерах.

Поддержка в Firefox


Mozilla Firefox поддерживает юзерскрипты после установки расширения GreaseMonkey (в русском сленге — обезъяна) или Scriptish.
После установки расширений фаерфокс получает поистине мощную поддержку юзерскриптов.
Рассматриваемая далее информация применима в первую очередь к GreaseMonkey (это расширение было первым).

Установка: юзерскрипты устанавливаются простым перетаскиванием файла скрипта в браузер.
Расширения: GreaseMonkey, Scriptish.
Управление: юзерскрипты можно отключить и удалить в меню, добавляемом расширениями.
Особенности:
  • Присутстует мощная библиотека GM API.
  • Подменяется «родной» глобальный объект window.
  • Объекты «родного» окна, к примеру window.page_defined_var, доступны через «небезопасную» ссылку unsafeWindow.
  • Доступны кроссдоменные запросы через интерфейс XmlHttpRequest.
  • Доступен аналог globalStorage.
  • Доступна возможность подключения сторонних библиотек (к примеру, jQuery).
  • Из-за безопасности плагина GreaseMonkey некоторые функции требуют специфических хаков.
    К примеру, запуск GM_setValue(...) в обработчике ajax-запроса может вызвать ошибку доступа к методам GM API. Для обработки такой ситуации используется конструкция вида setTimeout(function(){GM_setValue(...)},0).
  • Отсутствует возможность дебага юзерскриптов. Даже Firebug тут не поможет.

GreaseMonkey добавляет так называемый GM API — набор javascript функций, добавляющих функционал юзерскриптам.
Из самых востребованных функций, которые предоставляет GM API, стоит упомянуть:
  1. Объект «родного окна» страницы unsafeWindow (позволяет подменять функции на странице, использовать уже имеющиеся на странице библиотеки)
  2. Кроссдоменный HttpXmlRequest: GM_xmlhttpRequest
  3. Аналог globalStorage (localStorage без привязки к домену): GM_setValue,GM_getValue и GM_deleteValue

Подробнее о GM API и функциональности GreaseMoneky можно узнать на http://wiki.greasespot.net.

Исторически, все юзерскрипты писались под браузер Firefox именно из-за наличия удобного плагина.
Это обусловливает тот факт, что все браузеры, которые поддерживают юзерскрипты, дополнительно следуют основным правилам спецификации GreaseMonkey по разбору метаданных.
Это означает, что все скрипты, которые были написаны под GreaseMonkey, будут устанавливаться и запускаться в браузерах, поддерживающих юзерскрипты (с минимумом модификаций).

К сожалению, ни один браузер, кроме Firefox, не предоставляет GM API. Этот печальный факт заставляет использовать эмуляции GM API через расширения или дополнительные юзерскрипты.

В случае разработки юзерскрипта «с нуля», я считаю предпочтительным отказаться от эмуляции GM API и использовать «велосипеды» собственного производства. Это позволяет уменьшить число зависимостей юзерскрипта, что, в свою очередь, позволяет вести разработку в рамках концепции одного файла: модифицировать придётся всего один файл; пользователю нужен всего один файл для запуска юзерскрипта.

Концепция одного файла позволяет существенно уменьшить сложность поддержки и кроссбраузерной разработки юзерскриптов!

Поддержка в Chrome


Google Chrome поддерживает юзерскрипты нативно, т.е. не требует установки плагинов/расширений. Можно (иногда нужно) упаковать юзерскрипт в расширение.

Установка: юзерскрипты устанавливаются простым перетаскиванием файла скрипта в браузер.
Расширения: не нужны. Имеется расширение Tampermonkey, которое упрощает работу со скриптами.
Управление: юзерскрипты, как и расширения, можно отключить и удалить (Настройки -> Инструменты -> Расширения).
Особенности:
  • Не доступен document.frames[i].parent (разрешено в расширении).
  • Не доступны объекты родного окна, к примеру window.page_defined_var (подменить функции страницы будет нельзя, JSONP в юзерскрипте тоже отпадает)
  • Не доступны кроссдоменные запросы (разрешены в расширении)
  • unsafeWindow доступен, но не несёт функциональности GM API.
  • Удобный нативный debug юзерскриптов и расширений.

Расширение представляет собой архив, упаковываемый самим браузером (Настройки -> Инструменты -> Расширения -> Упаковать расширение).
Помимо файла юзерскрипта расширение должно содержать:
  • manifest.json — файл описания расширения. Аналог метаданных юзерскрипа.
  • background.html — файл «фоновой страницы» расширения. Даёт доступ к API расширений через вызов методов chrome.extension.*

Упаковывание юзерскрипта в расширение позволяет обойти многие ограничения, наложенные Google Chrome на юзерскрипты.

Важно: фактически, расширение и юзерскрипт — разные понятия. И если подходить к вопросу строго, стоит говорить о разработке простых расширений под Chrome.
В случае, когда юзерскрипт требует нестандартного, «тяжелого» функционала, он требует упаковки в расширение.
Для упаковывания юзерскрипта в расширение нужно проделать дополнительные действия один раз. Вся последующая разработка будет вестись в рамках концепции одного файла.

Поддержка в Opera


Opera поддерживает юзерскрипты нативно, но не предоставляет сколь-нибудь дружелюбного пользовательского интерфейса для управления скриптами. Такой интерфейс доступен в расширении UJS Manager.

Расширения: UJS Manager, программа UserJS Manager.
Установка: юзерскрипты устанавливаются в настроенную пользователем папку пользовательских скриптов. Её расположение можно задать в настройках браузера: Настройки -> Общие настройки -> Расширенные -> Содержимое -> Настроить JavaScript. Папка с юзерскриптами не должна содержать пробелов.
Управление: юзерскрипты можно отключить, удалив или переместив файл скрипта из папки пользовательских скриптов.
Особенности:
  • Юзерскрипты запускаются «как есть», не оборачиваясь в замыкание, тем самым засоряя глобальную область видимости window.
  • Доступны объекты родного окна, к примеру window.page_defined_var.
  • Доступные специфические события браузера Opera, к примеру BeforeScript.
  • Не доступны кроссдоменные запросы (Обходится использованием специальных событий)
  • unsafeWindow недоступен.
  • Скрипты запускаются в алфавитном порядке.

Поддержка в IE


IE7, IE8, IE9 поддерживают юзерскрипты при использовании плагина Trixie.
К тому же, имеется более продвинутый плагин IE7Pro. В IE7Pro помимо поддержки юзерскриптов имеется множество других бесполезных возможностей.

Важно: Если не отключать дополнительные «приблуды» в IE7Pro, то плагин может изрядно тормозить браузер, особенно на тяжёлых страницах.

Расширения:Trixie, IE7Pro.
Установка: юзерскрипты устанавливаются в папку пользовательских скриптов Trixie (C:/Program Files/Bhelpuri/Trixie/Scripts) или IE7Pro (C:/Program Files/IEPro/userscripts).
Управление: у каждого плагина есть пользовательский интерфейс для управления юзерскриптами.
Особенности:
  • Юзерскрипты запускаются «как есть», не оборачиваясь в замыкание, тем самым засоряя глобальную область видимости window.
  • Доступны объекты родного окна, к примеру window.page_defined_var.
  • Не доступны кроссдоменные запросы (Обойти можно способами, аналогичными тем, что используются при разработке на javascript: JSONP, easyXDM xdr и т.д.)
  • unsafeWindow недоступен.
  • И Trixie, и IEPro имеют модель загрузки скриптов, отличную от модели GreaseMonkey. Скрипты не перезапускаются при обновлении страницы через Ctrl+R или Ctrl+F5. К тому же, скрипты подгружаются по window.onLoad.
  • Для того, чтобы Trixie увидел скрипт, скрипт должен иметь метаданные и обязательно иметь директиву @namespace (см. предыдущую статью).
  • Для того, чтобы IE7Pro увидел скрипт, скрипт должен иметь расширение .ieuser.js.
  • Оба плагина имеют проблемы с запуском в IE9 под Windows 7x64.
    Сообщения о незапускаемом IE7Pro я встречал чаще.


Как видите, с запуском скриптов у IE дела обстоят паршиво. Остаётся радоваться, что такая возможность вообще имеется.

Важно: Оба плагина могут существовать в системе одновременно, не мешая друг другу.

Важно: Учитывая вышесказанное, я всегда предлагаю своим пользователям использовать Trixie.

Поддержка в Safari


К сожалению, мне не довелось поработать с данным браузером. Буду рад любым разъяснениям в комментариях!
Поговаривают, что для Safari нужны SIMBL и плагин GreaseKit.

Поддержка в Mobile Safari и прочих браузерах


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

На последок



Если придерживаться концепции одного файла, то процесс созидания идёт по такому пути:
  1. Берём шаблон.
  2. Добавляем воду код и метаданные.
  3. Создаём папку и файлы для расширения Chrome.
  4. Пакуем расширение для Chrome, переименовываем файл для IE7Pro.
  5. Раздаём юзерскрипт/расширение пользователям.
  6. ...
  7. Исправляем руки баги.
  8. GoTo 4



Список статей:
  1. Учимся писать userscript'ы
  2. » Userscripts. Углубляемся.
  3. Userscripts. Упаковываем юзерскрипт для Chrome
  4. Usersctripts. Кроссдоменные запросы
Алексей Мигутский @MrMig
карма
69,0
рейтинг 0,0
Пользователь
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (22)

  • 0
    вы забыли упомянуть что в отличии от FF. в Chrome не разрешен @require. Поэтому для использования сторонних библиотек и в FF и Chrome/Chrominium нужно/можно использовать function addJQuery(callback)
    • +4
      Спасибо за внимательность.

      Если вы читали первую статью, то могли заметить, что директивы @require нету в таблице распространенных директив. Я специально не указывал там директивы, которые не поддерживаются кроссбраузерно.

      @require поддерживается только в Firefox.
      Я считаю, что любые «плюшки», которые отсутствуют в других браузерах, упоминать не стоит.Подробная информация о разработке под GreaseMonkey может занять не одну статью.

      Если какой-то функционал GM API можно «эмулировать» кроссбраузерно (и я знаю такой способ), я напишу об этом в соответствующей статье.

      Кстати, любую библиотеку можно инжектировать в скрипт. Я предпочитаю как раз такой способ. О его преимуществах и недостатках я напишу отдельно (на примере jQuery).

      Оставайтесь с нами :)
  • 0
    Скажите, как Вы перезапускаете юзерскрипт в Хроме после изменений?
    Мой, например, порядок действий — довольно сложный и неудобный, поэтому Хром не был приоритетным инструментом для разработки (а должен бы, если отладка такая удобная).
    1) отыскиваю где-то в юзерских папках каталог, имеющий имя в виде ID скрипта;
    2) меняю скрипт;
    3) полностью закрываю браузер, все его окна и вкладки (а как иначе?), поэтому приходится держать в Хроме открытыми 1-2 вкладки, чтобы не перезагружать их много;
    4) запускаю браузер (с установкой «Открывать последнюю сессию»).
    Отладив скрипт, сохраняю в другой, постоянный файл на случай потери инсталляции браузера или для переноса.

    В FF действия по перезапуску намного проще — просто сохраняешь файл, а Scriptish сам оповещает, что файл изменился после перезагрузки страницы со скриптом.

    Что я делаю с Хромом не так? Может быть, Tampermonkey как то облегчает эту задачу?
    • +2
      Хм, действительно странная последовательность действий.

      У меня процесс происходит так:
      1. Если разрабатывается «голый» юзерскрипт:
      а) Модифицируем скрипт.
      б) Закидываем в браузер.
      в) Соглашаемся на установку.
      г) Рефрешаем страницу.

      После рефреша работает новый скрипт. Если у вас не работает, попробуйте НЕ МЕНЯТЬ @version и @namespace.
      Если всё равно скрипт не обновляется, то читайте дальше.

      2. Если разрабатывается расширение, 1ый способ:
      а) Модифицируем скрипт.
      б) Пакуем скрипт в расширение (используя имеющийся файл-ключ).
      в) Закидываем расширение в браузер.
      г) Соглашаемся установить.
      д) Заходим в Расширения и выключаем-включаем расширение.
      е) Рефрешаем страницу

      3. Если разрабатывается расширение, 2ой способ:
      а) Модифицируем скрипт.
      б) Ищем папку, в которую распаковано расширение.
      в) Заменяем скрипт.
      г) Заходим в Расширения и выключаем-включаем расширение.
      д) Рефрешаем страницу

      Как видите, ключевым моментом является выключение-включение расширения. При включении хром загружает расширение в память заново.

      Обратите внимание, если файл-ключ будет разный, то две одинаковых версии расширения (одинаковые метаданные) будут считаться разными.
      • +3
        Кнопка Reload для распакованного расширения почему не упоминается?
        • 0
          Видимо потому, что я ей никогда не пользовался. Как и распакованным расширением.
          Что-то мне подсказывает, что зря не пользовался.
  • 0
    > Поддержка в Safari
    Устанавливал через расширение Ninjakit для Safari 5.xx какие-то скрипты, работали нормально, только время срабатывания после начала загрузки было побольше, чем у других браузеров, хотя оно есть у всех.

    > Ввиду отсутствия поддержки юзерскриптов в менее популярных браузерах и мобильных браузерах…
    Мобильные браузеры Opera Mobile и Firefox Mobile поддерживают юзерскрипты. Например, среди аддонов addons.mozilla.org/en-us/mobile/ найдётся Scriptish. В Оперу надо вставлять скрипты в настройки, если расширение для этого ещё не придумали.
    • 0
      Спасибо, вы мне напомнили об одном упущенном моменте.

      В IE, в обоих плагинах юзерскрипты запускаются по window.onLoad.
      Вероятно, в Ninjakit аналогично.

      Добавил информацию в статью.
  • 0
    Нативная поддержка юзерскриптов в Хроме не помогла сделать полную их поддержку, даже не смотря на все танцы с бубнами и извороты скрипт изначально писавшийся под ГМ никак не хотел работать в хроме.
    • 0
      Для начала избавьтесь от GM API в любом виде. GM_get/setValue заменяется на localStorage. С кроссдоменными запросами будет сложнее, придётся оборачивать в экстеншн (юзерскрипт выступает в роли контент-скрипта и к нему применим стандартный chrome.extension.onRequest мост).

      С Xpath тоже не всё в порядке, могут возникнуть проблемы.

      В крайнем случае, выложите скрипт на pastebin.com.
      И не стесняйтесь стучаться в скайп по вечерам :)
      • 0
        Спасибо, обязательно постучим))
  • 0
    Поддержка в Opera
    Расширения: На сколько мне известно, их нет.

    Средство для удобного урпавления скриптами в Опере всё-таки есть. Это приложение написанное для Opera Unite — UJS Manager
  • +1
    В Опере тоже можно упаковывать скрипты в расширения.

    dev.opera.com/articles/view/converting-userjs-to-extensions/
    • 0
      Супер, не знал.
      Мои знания юзерскриптов для Оперы ограничены началом 2010 года.
  • 0
    Я под Chrome использую дополнение Ninja Script. Лично для меня и моих целей вполне подходит :).
  • 0
    Спасибо за эти две статьи. Написал один скриптик для навязчивого наг-окна на одном сайтике, удалялось только при помощи Deloper Tools хрома… А сейчас автоматически :)
  • 0
    Интересна тема кроссдоменных запросов.
    • 0
      С кроссдоменными запросами беда только в IE. Без доступа к серверу их реализовать не получится (только JSONP или easyXDM. Можно использовать сторонние сервисы-прокси).
  • +1
    > setTimeout(0, function()

    Поправьте :)

    > Поддержка в Chrome. Не доступен document.frames[i].parent (разрешено в расширении).

    Там есть проблемы и с встроенными фреймами: crbug.com/20773 Решается, например, проксированием через background.html
    • 0
      Да, вы правы во всём.

      Фреймы действительно недоступны и, действительно, всё решается через проксирование.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.