как установить скрипт на mozilla firefox

Как установить Greasemonkey для Firefox

Greasemonkey для Firefox — это аддон для вставки пользовательских скриптов JavaScript на различных сайтах. При помощи него можно на любимых веб-сервисах расширять функционал, изменять дизайн, добавлять новые опции, блокировать отдельные элементы и др. То есть делать их ещё более удобными и комфортными. К примеру, на Youtube можно добавить кнопку для загрузки видео (по умолчанию её там нет), а в онлайн-игре Agar.io представится возможность задавать быстро ранее созданные надстройки.

Задействовать Greasemonkey может любой пользователь Mozilla Firefox. Специальных познаний в области программирования, в частности по JavaScript, аддон не требует. Работает он принципу «закачал понравившийся скрипт и пользуйся».

Это руководство поможет вам установить и настроить Greasemonkey.

Загрузка и запуск

Чтобы скачать Greasemonkey, сделайте следующее:
1. Перейдите на официальную страничку для скачивания на ресурсе приложений от Mozilla — https://addons.mozilla.org/ru/firefox/addon/greasemonkey/

2. Нажмите кнопку «Добавить… ».

3. Подтвердите инсталляцию: в дополнительном окне снова клацните кнопку «Добавить».

По завершении инсталляции откроется официальный сайт (блог) разработчиков аддона.

Для получения доступа к меню дополнения кликните по его иконке в верхней панели браузера справа.

В списке опций:

Установка скриптов

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

Клацните в меню дополнения «Get User Scripts», чтобы перейти на страничку со ссылками на онлайн-базы скриптов. Затем клацните URL веб-ресурса, который желаете использовать.

OpenUserJS

1. В списке «UserScripts» кликните по названию интересующего скрипта. Если вас интересует какой-то конкретный сайт, воспользуйтесь облаком тэгов в блоке «Popular Groups».

Внимание! Все описания userjs на английском. Тем пользователям, которые не знают этот язык или плохо его знают, рекомендуется установить в браузер онлайн-переводчик. Например, ImTranslator.

2. На странице скрипта щёлкните по кнопке «Install».

3. В открывшей вкладке отобразится информация о программном дополнении и кнопка запуска установки «Install». Нажмите её, как только она станет активной.

4. По окончании установки наименования скрипта отобразится в настроечном меню дополнения.

Для дополнительной настройки кликните по нему и выберите необходимую команду:

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

Greasy Fork

1. На главной страничке сайта (https://greasyfork.org/ru) щёлкните в меню раздел «Скрипты».

2. Затем можете выбрать подходящую надстройку в ленте, но вам также может понадобится переводчик. Описание кодов опубликовано преимущественно на китайском и английском.

Также есть возможность воспользоваться поиском по имени сайта. Кликните в блоке «Показаны … для» по необходимому домену. Если в начале списка нет необходимого веб-сайта, нажмите ссылку «Ещё». Отроется облако тэгов с названиями доменов.

3. Чтобы установить интересующий скрипт, перейдите на его страничку и нажмите «Установить… ».

Затем перейдите на соответствующий ему сайт и проверьте его работу.

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

Дополните Firefox аддоном Greasemonkey, чтобы с большим комфортом пользоваться видеохостингами, соцсетями, наслаждаться геймплеем-онлайн с эксклюзивными надстройками в профиле.

Источник

Встраиваемый скрипт

Фоновые скрипты имеют доступ ко всем методам WebExtension JavaScript APIs, но они не имеют доступа к контенту отдельных веб-страниц. Так что если вашему расширению необходимо взаимодействие с контентом веб-страницы, вам нужен встраиваемый скрипт.

Точно так же, как скрипты загружаемые веб-страницами, встраиваемый скрипт может читать и изменять контент веб-страницы, используя DOM API.

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

Обратите внимание, что встраивание скриптов блокируется на следующих доменах:

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

По причине того, что список запрещённых доменов включает в себя addons.mozilla.org, пользователи, которые попытаются испытать ваше расширение прямо на странице загрузки, могут посчитать, что расширение не работает! В связи с этим вы могли бы предоставить им соответствующее предупреждение или onboarding page чтобы немедленно переадресовать их с addons.mozilla.org.

Значения, определённые в глобальной области видимости встраиваемого скрипта с помощью var foo или window.foo = «bar» могут исчезать по причине бага 1408996.

Загрузка встраиваемого скрипта

Загрузка встраиваемых скриптов на веб-страницу происходит следующими тремя способами:

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

Используя методы (1) и (2), вы можете загружать скрипты на страницы, чьи URL могут быть представлены, используя шаблон совпадения.

Используя метод (3), вы к тому же можете загружать скрипты на страницы вашего расширения, но вы не можете загружать скрипты на привилегированные страницы браузеры (например «about:debugging» или «about:addons»).

Условия работы встраиваемого скрипта

Доступ к DOM

Встраиваемые скрипты имеют доступ и могут изменять DOM на веб-странице, так же как и обычные скрипты. Так же они могут видеть любые изменения сделанные с DOM страничными скриптами.

При этом, встраиваемые скрипты имеют «чистое DOM представление». Это значит:

В Firefox это поведение называется Xray vision (en-US).

Например, рассмотрите эту веб-страницу:

Скрипт «page-script.js» делает следующее:

Теперь расширение загружает встраиваемый скрипт на страницу:

Те же самые правила применяются и наоборот: страничный скрипт не может видеть JavaScript свойств, добавленных встраиваемым скриптом.

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

Одно из последствий такого поведения состоит в том, что встраиваемый скрипт не будет иметь доступ к JavaScript библиотекам, загруженным страничным скриптом. Например, если веб-страница загружает jQuery, встраиваемый скрипт не сможет увидеть эту библиотеку.

Если встраиваемому скрипту необходимо использовать какую-либо JavaScript библиотеку, тогда эта библиотека должна быть загружена, тем же способом, как и встраиваемый скрипт вместе с ним:

Примечание: Firefox предоставляет некоторое API, позволяющее встраиваемому скрипту иметь доступ к JavaScript объектам, созданным страничным скриптом, и предоставлять свои собственные JavaScript объекты страничному скрипту.

Доступные WebExtension API

В дополнение стандартному DOM API, встраиваемый скрипт может использовать следующие методы WebExtension APIs:

Работа с XHR и Fetch

Встраиваемые скрипты могут делать запросы используя window.XMLHttpRequest и window.fetch() API.

Встраиваемый скрипт имеет точно такие же кросс-доменные привилегии, как и всё остальное расширение: так что если расширение запросило кросс-доменный доступ на какой-либо домен используя permissions ключ в manifest.json, тогда его встраиваемый скрипт тоже будет иметь доступ к этому домену.

Взаимодействие с фоновыми скриптами

Хотя встраиваемые скрипты не могут напрямую использовать большинство методов из WebExtension APIs, они могут взаимодействовать с фоновыми скриптами расширения, используя систему сообщений, и таким образом могут опосредованно иметь доступ к тем же самым API, что и фоновые скрипты.

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

Одиночные сообщения

Для отправки одиночного сообщения и ожидания необязательного ответа, вы можете использовать следующее API:

Например, представьте встраиваемый скрипт, который обрабатывает нажатие левой кнопки мыши на веб-странице.

Если нажатие было произведено по ссылке, встраиваемый скрипт отправляет сообщение фоновому скрипту со значение URL в ссылке:

Фоновый скрипт ожидает эти сообщения и, при их получении, отображает уведомления, используя notifications (en-US) API:

(Этот пример кода частично взят из notify-link-clicks-i18n примера на GitHub.)

Обмен сообщениями через постоянное соединение

Отправка одиночных сообщений может стать довольно обременительной, если вы пересылаете много сообщений между встраиваемым и фоновым скриптами. Альтернативное решение в этой ситуации будет установить постоянное соединение между двумя скриптами, и использовать его для обмена сообщениями.

Каждая из сторон имеет runtime.Port (en-US) объект, который они могут использовать для обмена сообщениями.

Для создания постоянного соединения:

Результатом вызова этих методов будет возвращение runtime.Port (en-US) объекта.

Как только обе стороны имеют порт, они могут:

Например, сразу после загрузки, нижерасположенный встраиваемый скрипт:

Соответствующий фоновый скрипт:

Несколько встраиваемых скриптов

Если вы имеете несколько встраиваемых скриптов, с которыми вы обращаетесь в одно и то же время, вы бы могли сохранять каждое соединение в массиве.

Взаимодействие с веб-страницей

Хотя по умолчанию встраиваемые скрипты не имеют доступ к объектам, которые созданы страничными скриптами, они могут взаимодействовать со страничными скриптами, используя window.postMessage и window.addEventListener API.

Для просмотра законченного и полностью рабочего примера, посетите эту страницу на GitHub и следуйте инструкциям.

Как простейший пример, представим встраиваемый скрипт, который получает сообщение от веб-страницы и делает что-то вроде этого:

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

Использование eval() во встраиваемых скриптах

В Chrome, eval() всегда выполняет код в контексте встраиваемого скрипта, а не в контексте веб-страницы.

Например, рассмотрите этот встраиваемый скрипт:

Получая сообщение, страничный скрипт записывает те же самые переменные:

В Chrome, в консоли будут записаны следующие строки:

В Firefox, будут записаны следующие строки:

Будьте очень осторожны, запуская код в контексте страничного скрипта. Окружение страничного скрипта может контролироваться потенциально зловредным веб-страницей, которая может переопределить объекты, с которыми вы взаимодействуете, так что их поведение станет совершенно непредсказуемым:

Источник

Userscripts. Углубляемся

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

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

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

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

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

Поддержка в Firefox

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

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

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

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

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

Поддержка в Chrome

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

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

Поддержка в Opera

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

Поддержка в IE

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

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

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

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

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

Поддержка в Safari

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

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

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

На последок

Источник

Расширения Firefox для веб-разработки на все случаи жизни

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

Безусловно в этом списке вы обязательно найдёте уже знакомые расширения, однако огромный пласт полезных расширений всегда остаётся в стороне. Так что приготовьтесь установить ещё парочку расширений! 🙂

Встроенные инструменты разработки в Firefox

Перед началом списка было бы неправильно не упомянуть об инструментах, уже встроенных в Firefox. Здесь речь идёт о тех самых инструментах разработки в Firefox Aurora 10 и том функционале, который сегодня можно найти в любом современном браузере.

При разработке интерфейса этих инструментов было перепробовано множество подходов и решений. В результате получился довольно приятный интерфейс, который любой желающий может испробовать, установив Firefox Aurora (хм, вы ещё его не поставили?)

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

Firebug

Это расширение идёт нулевым в списке расширений. Firebug установил стандарт в инструментах разработки во всех браузерах. Обычно используется для живого редактирования CSS и HTML, отладки JavaScript и оптимизации загрузки страниц. Некоторые из нижеупомянутых расширений основаны на Firebug, поэтому к этому расширению мы ещё вернёмся.

На всякий случай напоминаю, что Firebug достаточно требователен к памяти, поэтому не забывайте его отключать (или просто не включать) на тех сайтах, с которыми вы не работаете.

Стандартные расширения Firefox для веб-разработчиков

За многие годы было разработано множество расширений для использования возможностей Firefox по максимуму. Некоторые из них популярны, другие вы, вероятно, увидите впервые. Если вы используете не упомянутое здесь расширение, напишите в комментариях!

Accessibility Evaluation Toolbar

Набор инструментов для тестирования веб-страниц по различным критериям.

All in One Sidebar

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

Cache Status

Очистка и настройка кэша в разных местах Firefox.

CacheToggle

Отключение (и/или очистка) кэша браузере одной кнопкой.

Colorzilla

Многофункциональная пипетка, генератор градиентов и кое-что ещё. Работает с цветами в RGB 0-255, RGB 0%-100%, HSL или hex-цветами.

Console²

Console² заменяет встроенную консоль JavaScript консолью нового поколения. Если вас по каким-то причинам не устраивает Firebug, то это расширение окажется крайне полезным.

CSS Reloader

Одной клавишей F9 позволяет перезагрузить CSS-файлы без обновления самой страницы.

DOM Inspector

Классический двухпанельный редактор DOM-дерева. Также работает с XUL.

Firefogg

Предоставляет API для перекодирования видео- и аудиофайлов в формат OGG при загрузке на сайт прямо в Firefox.

FireFTP

Полноценный кроссплатформенный FTP/SFTP-клиент прямо в браузере окажется полезным любителям загружать и редактировать файлы на FTP-сервере.

FireUnit

Расширение для юнит-тестирования JavaScript. В дополнительных комментариях не нуждается.

FoxGuide

Горизонтальные и вертикальные плавающие линейки для выравнивания элементов интерфейса относительно друг-друга.

FoxyProxy Standard

Расширение FoxyProxy полностью заменяет встроенный механизм работы с прокси-серверами. Более функциональное расширение, чем его собратья: SwitchProxy, ProxyButton, QuickProxy, xyzproxy, ProxyTex, TorButton, и т. д.

GreaseMonkey

Кастомизация страниц с помощью JavaScript. Имеет огромный репозитарий скриптов на www.userscripts.org.

HTML Validator

Валидация HTML внутри браузера с отображением количества ошибок в иконке.

HttpFox

Расширение HTTP-анализатора для Firefox.

iMacros для Firefox

Автоматизирует Firefox. Позволяет записать и потом воспроизвести повторяющиеся действия. Если вы пользуетесь Firefox и каждый день выполняете рутинную работу по заполнению форм или обходу страниц, то это расширение просто то, о чём вы мечтали!

Jenkins Build Monitor

Мониторинг сборок Jenkins (http://jenkins-ci.org) и отображение хода сборки в статусной строке Firefox.

Расширение jQuery

Теперь jQuery и jQuery UI встроены прямо в браузер.

JSONович!

Красиво форматирует JSON-код для облегчения чтения в браузере.

JSONView

Ещё один просмотрщик JSON-документов в браузере.

JSView

Открывает в новом окне используемые js/css-файлы с внешних сайтов, если таковые присутствуют.

Link Widgets

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

Live HTTP Headers

Просмотр HTTP-заголовков страницы при загрузке страницы.

LiveReload

Расширение LiveReload автоматически обновляет страницу при изменении файла на жёстком диске.

MeasureIt

Инструмент замера расстояний в пикселях на страницах.

Modify Headers

Добавление, изменение и фильтрация строк в заголовках HTTP-запросов в момент отправки. Используется, в частности, при разработке для мобильных устройств, тестировании HTTP и проверке безопасности.

NoScript

Лучший инструмент защиты для браузера! Даже если вы не собираетесь отключать везде JavaScript, расширение защитит вас от большинства вида XSS и кликджекинг-атак.

PageSpeed

Проект от Google, дающий рекомендации по увеличению производительности веб-сайта.

PixelZoomer

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

Pixlr Grabber

Расширение для онлайн-редактора изображений pixlr.com/editor. Пригодится в случае, если нужно взять готовое изображение или снять скриншот страницы, а затем изменить его (затереть персоналные данные, добавить подписи и др.).

Poster

Инструмент для выполнения HTTP-запросов и просмотра их результатов. Удобен для тестирования взаимодействия с веб-сервисами.

QuickJava

Быстрое включение или отключение Java, Javascript, Flash, Silverlight, изображений, CSS и прокси из панели состояния и/или верхней панели.

Regular Expressions Tester

Инструмент тестирования для регулярных выражений с подсветкой соответствий.

Remove Cookie(s) for Site

Очень простое расширение для очистки cookies от сайта. Прячется в меню по правой кнопке мыши.

SQLite Manager

Графический интерфейс для управления базами данных SQLite.

Кнопки Selenium IDE

Просто кнопки для открытия Selenium IDE. Естественно, для работы должна быть установлена сама Selenium IDE: http://seleniumhq.org/projects/ide/

SeoQuake SEO

Расширение Seoquake поможет оптимизировать сайт для поисковых систем и социальных сетей.

ShowIP

Показывает IP-адрес(а) текущей страницы в строке состояния. Также по правому клику отобразит имя хоста, информацию из hois, netcraft и пр. Там же можно скопировать IP-адрес.

Stylish

Смена стилевых таблиц для сайтов. Stylish, подобно GreaseMonkey, имеет крупный репозитарий тем оформлений для сайтов типа Google, YouTube, Tumblr и других.

Tamper Data

Расширение для просмотра и изменения HTTP/HTTPS-заголовков и параметров POST.

Total Validator

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

User Agent Switcher

Переключатель юзер-агента. Пара кликов — и сайты считают вас мобильным устройством или поисковиком.

Web Developer

Панель для веб-разработки. Содержит богатый функционал, не пересекающийся с Firebug.

Расширения Firebug

Firebug на своём пути развития также решил обзавестись расширениями на все случаи жизни. Вот, что из этого получилось:

Acebug

Подсветка синтаксиса и автодополнение при вводе в редакторе Firebug с помощью редактора Ace.

Code Coverage v2 для Firebug 0.1

Отображает покрытие Javascript-кода в окне Firebug.

CSS Usage

Расширение, показывающее, какие CSS-правила действительно используются.

Firecookie

Расширение Firecookie добавляет вкладку Cookies в Firebug.

Firefinder

Находит HTML-элементы, соответствующие CSS-селектору или выражению XPath.

FirePHP

Логирование из PHP в панель Firebug по простому обращению к специальному методу в PHP.

FireQuery

Плагин Firebug для разработки в jQuery.

Inline Code Finder

Расширение Inline Code Finder находит участки в HTML-коде со встроенными скриптами, стилями и ссылками вида «javascript. ».

FireRainbow

Подсветка синтаксиса для Javascript.

NetExport

Расширение NetExport позволяет экспортировать всю собранную информацию с панели Net в формат HTTP Archive (HAR) на основе JSON.

Pixel Perfect

Расширение Pixel Perfect позволяет наложить готовый макет на разрабатываемую страницу.

YSlow

YSlow анализирует страницы и даёт советы по оптимизации их скорости по правилам Yahoo.

Ещё больше расширений для Firebug доступно на странице Firebug Extensions.

А какие ещё расширения вы используете при разработке?

Источник