Подключение пользовательских скриптов

Кому и зачем это надо?

Типичные ситуации, когда я задумываюсь, а не добавить ли мне для сайта новый user-script:

  • На сайте много навязчивой рекламы, а блокировщики рекламы не справляются.
  • Перекрывающие всё содержимое оверлеи. Есть невидимые, но по первому же клику по странице открывают новую вкладку с рекламой. Есть оверлеи, которые просто блокируют содержимое, пока ты, например, не добавишь сайт с избранные на Facebook. И далеко не всегда такие оверлеи имеют кнопку закрытия.
  • По каким-то причинам на сайте нет необходимого мне функционала, не хватает фильтров выводимой информации.
  • Не устраивает расположение/размер блоков. Например, хотелось бы изменить размер плеера на более удобный.

Сами понимаете, далеко не всегда можно даже связаться с авторами, не говоря уже о том, что желаемые вами "упрощения" могут оказаться ненужными другим пользователям или могут быть не в интересах сайта :)

Не может сам сайт - сделаем своими руками! Главное здесь - знать Javascript (ну и CSS/HTML тоже пригодится).

Если вам ну уж очень хочется что-то сделать, но Javascript вы не знаете - свяжитесь со мной, возможно, я смогу помочь написать необходимый user-script.

User-script или Extension?

На самом деле и "пользовательские скрипт" и расширение для браузера помогут решить вышеописанные проблемы. Но у этих подходов есть свои плюсы и минусы.
Рассмотрим, чем отличаются Extensions (Ext) и User-Scripts (US):

  • Написать новый Ext не так и просто. Там свои правила описания, свои методы. Т.е. надо для начала перекапать документацию. US же является обычным javascript кодом, как если бы вы его добавили вручную в конец html страницы.
  • Чтобы подключить свой Ext в Chrome, например, необходимо на странице расширений (chrome://extensions/) включить "Developer mode" и указать папку с распакованным расширением. Если файлы обновились, то на этой же странице надо будет каждый раз нажимать "Reload". Нетривиально и запутанно, правда?
  • Чтобы пользоваться US достаточно установить расширение, которое будет подключать ваш JS файл на нужные страницы. Все US добавляются в список скриптов в расширении. С редактированием тоже просто - меняем код в окне настройки самого расширения, сохраняем - и всё, при следующей загрузке страницы будет подключаться новый код.
  • US автоматически добавляется на страницы, подходящие под указанный шаблон. Сложность возникает, если функциональность хочется добавить на любую страницу. Тогда лучше создать Ext, чтобы javascript добавлялся не автоматически, а по требованию пользователя.
  • Также важным преимуществом US является то, что добавляемый javascript будет действовать как часть страницы, у него есть доступ ко всему окружению и javascript переменным страницы. Ext более абстрагирован. Например, если на странице есть jQuery, у вас не будет к нему доступа.

Решайте сами. Иногда выгоднее потратить больше времени и написать Расширение. Но для быстрых и простых изменений подойдут и "пользовательские скрипты".

Что нам может помочь

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


Tampermonkey для Google Chrome.
Tampermonkey logo

Greasemonkey для FireFox.
Greasemonkey logo

Синтаксис скриптов обоих расширений схож. Написав js для одного, можно смело использовать и для второго.

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

На одной странице могут использоваться сразу несколько подключаемых скриптов.

Параметры скрипта:

// ==UserScript==
// @name         script_name
// @include      http://example.com/*
// @updateURL    http://example.com/svn/script.js
// @require      http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @description  Script for page
// @version      0.17
// @noframes
// ==/UserScript==

@name - Название скрипта. Отображается в списке подключенных скриптов
@include - Сайты, на которых необходимо подключить скрипт. Возможно использовать сразу несколько @include.
@updateURL - Адрес, с которого будет скачано обновление. Необходимо использовать @version, чтобы указывать, есть ли возможность обновления.
@require - Сначала подключается указанный URL скрипта, а за тем выполняется нижепрописанный скрипт.
@description - Описание скрипта.
@version - Текущая версия скрипта. Используется для указания необходимости обновления скрипта.
@noframes - Не активирует скрипт на страницах, загруженных в iframe.

Блок с параметрами указывается в начале файла. После этого блока начинается сам код на Javascript.
Другие параметры можно посмотреть в документации. Я привел лишь самые нужные.

Добавление скриптов

Есть 2 способа подключения:
  • непосредственное написание кода в редакторе расширения;
  • просто открыть ссылку на скрипт, размещенный в сети. Имя файла скрипта должно оканчиваться на ".user.js". В этом случае, при попытке перехода по прямому URL на скрипт, расширение автоматически перехватит скрипт и предложит его установить, либо обновить, если одноименный скрипт у вас уже установлен.

Полезная информация: