Кому и зачем это надо?
Типичные ситуации, когда я задумываюсь, а не добавить ли мне для сайта новый user-script:
- На сайте много навязчивой рекламы, а блокировщики рекламы не справляются.
- Перекрывающие всё содержимое оверлеи. Есть невидимые, но по первому же клику по странице открывают новую вкладку с рекламой. Есть оверлеи, которые просто блокируют содержимое, пока ты, например, не добавишь сайт с избранные на Facebook. И далеко не всегда такие оверлеи имеют кнопку закрытия.
- По каким-то причинам на сайте нет необходимого мне функционала, не хватает фильтров выводимой информации.
- Не устраивает расположение/размер блоков. Например, хотелось бы изменить размер плеера на более удобный.
Сами понимаете, далеко не всегда можно даже связаться с авторами, не говоря уже о том, что желаемые вами "упрощения" могут оказаться ненужными другим пользователям или могут быть не в интересах сайта :)
Не может сам сайт - сделаем своими руками! Главное здесь - знать Javascript (ну и CSS/HTML тоже пригодится).
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.

Greasemonkey для FireFox.

Синтаксис скриптов обоих расширений схож. Написав 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 на скрипт, расширение автоматически перехватит скрипт и предложит его установить, либо обновить, если одноименный скрипт у вас уже установлен.
Полезная информация:
- Документация по Tampermonkey
- Коллекция userscript - остальные ищите сами, либо пишите свои
- Как избежать подключения скрипта в iframe