Как написать скрипт для браузера

Как начать писать на JavaScript с нуля

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

Рассмотрим, из чего состоят веб-странички. HTML (HyperText Markup Language) отвечает за придание странице структуры (показывает, где меню сайта, а где заголовок, логотип или статья) и контента (различные тесты, списки, изображения и т. д.). CSS (Cascading Style Sheets) отвечает за визуальную составляющую страницы: определяет, какого цвета и размера должен быть тот или иной блок, как его оформить и вывести пользователю.

Структура и оформление есть, но где же взаимодействие? Здесь на сцену выходит JavaScript. Виртуальный «диалог» с пользователем — от изменения части содержимого сайта в ответ на действия до современных игр в браузере — реализуется с помощью скриптов JavaScript. Этот язык программирования работает в браузере и позволяет взаимодействовать с веб-страницей в режиме реального времени, оживляя её и предоставляя пользователю обратную связь на все действия.

У JavaScript очень интересная история. Он — реализация стандарта ECMAScript, может работать не только в браузере. Но в статье мы рассмотрим только взаимодействие с браузером.

Создаём самый простой скрипт

В первом задании, которое традиционно выполняет студент при изучении языка программирования, нужно вывести на экран фразу «Hello, world». Это позволяет отработать самый важный аспект — вывод информации пользователю, а также познакомиться с базовой структурой программы. Поступим так же.

Есть множество способов что-то вывести на экран в браузере, но мы выберем самый простой. Откроем «Инструменты разработчика» (Developer Tools) в браузере Chrome. Сделать это можно через сочетание клавиш Ctrl + Shift + I или F12 (Cmd + Opt + I на macOS) или через меню браузера. В Google Chrome нужно нажать на три точки, в других браузерах эта настройка может выглядеть иначе. Далее выбираем пункт «Дополнительные инструменты» и «Инструменты разработчика».

У вас должно появиться примерно такое окно, как ниже. Какой именно сайт выбрать для работы, не важно, можете открыть и GeekBrains.

Нас интересует вкладка Console. В ней могут быть ошибки и предупреждения (красные или жёлтые надписи) — не обращайте на них внимания, они нам не помешают. Выполним задание — выведем «Hello, world» на экран. Для этого нам понадобится команда alert(). Она выводит текст, который передан в круглых скобках.

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

Мы выполнили первое задание — вывели простой текст на экран.

Учимся писать чуть более сложные скрипты

На экране перед нами статичный текст, что не очень интересно. Хотелось бы больше взаимодействия с пользователем. Что, если мы будем спрашивать имя зашедшего на сайт и здороваться с ним?

Для этого нам нужно познакомиться с концепцией переменных в языках программирования. Переменная — это область в памяти компьютера, в которой хранится какое-либо значение. Мы можем использовать его как угодно.

Для создания переменной в JavaScript нужно применить ключевое слово let. Есть и другие, но не будем так глубоко погружаться в детали.

Требования к именованию переменных:

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

Создадим простую переменную, поместив в неё имя. Например, Иван.

Обратите внимание: мы объединили слово «привет» и переменную. Здесь имеет значение каждый символ: сначала alert, потом открывающая круглая скобка, которая говорит, что дальнейшие инструкции нужно вывести на экран. Затем кавычки, в которых заключён приветственный текст. Далее знак +, который подсказывает программе, что текст справа от знака нужно объединить с тем, что слева. И завершает это закрывающая круглая скобка.

Мы вывели имя из переменной на экран, но ведь было нужно показать имя, которое сообщит пользователь. Исправим это. Нам понадобится команда prompt(). Она задаст пользователю вопрос — запишем его в круглых скобках. Сохраним в переменную результат выполнения команды prompt().

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

Сохраняем наш первый скрипт

Мы написали программу (скрипт) в консоли браузера. Это было быстро и просто, но не очень практично — такой программой с пользователями не поделишься. Чтобы сделать это, сохраним программу в файл с расширением *.html. Имя можем дать произвольное. Так как HTML подразумевает определённую структуру контента, нужно её отчасти соблюсти, чтобы всё работало. Понадобятся теги <html> и <script>.

Редактировать и сохранять файлы со скриптами можно с помощью любого текстового редактора. Cамый простой и примитивный — «Блокнот», который поставляется вместе с Microsoft Windows. Есть и специальные редакторы кода, например, Visual Studio Code. В блоге даже выходила специальная подборка редакторов кода JavaScript — выбирайте и дерзайте 🙂

А если хотите извлечь из JavaScript максимум — приглашаем на факультет Fullstack JavaScript-разработки GeekBrains!

Автоматизируем любые действия в браузере с iMacros

iMacros — это программа, которая позволяет автоматизировать и имитировать действия пользователя в браузере. По словам разработчиков, iMacros загрузили 9 миллионов раз, но лишь 240 тысяч юзеров активно используют приложение. То есть лишь 3% из установивших продукт нашли ему применение. И неслучайно. При первом взгляде на документацию сложно разглядеть его удивительные, поражающие воображение возможности. Эта статья откроет их для тебя.

Рис. 1. Начало работы iMacros

Другие статьи в выпуске:

Хакер #185. Докажи баг!

Установка

Есть два варианта установки iMacros:

в качестве расширения (add-ons) для браузера (Firefox, Chrome или Internet Explorer),
как отдельное приложение (только для Windows).

В описанных ниже примерах использован iMacros Firefox add-on.

Hello world

Основной прием, которому стоит научиться, — запись действий в браузере и последующее их воспроизведение. Перейдем на вкладку Record на панели в левом нижнем углу экрана и нажмем на кнопку Record Macro. Теперь вобьем в Google «Hello world» и нажмем Enter. Потом кнопку Stop (под кнопкой Record Macro). iMacros сгенерировал код, который можно многократно запускать и редактировать:

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

WARNING

В браузере Chrome не работает треть iMacros-команд (какие — см. документацию). Поэтому лучше использовать Firefox (90% возможностей) или Internet Explorer (наиболее полный функционал).

Работа с данными

Заполнение форм из CSV-файла с данными

Предположим, нам нужно заполнить информацию о товарах интернет-магазина через CMS-админку (конкретный пример написан для Insales). Названия, описания, цены и остатки хранятся в файле CSV. Эту задачу можно мгновенно выполнить с помощью небольшого макроса:

Рис. 2. Запись макроса

Извлечение данных из веб-страниц

А теперь представим обратную ситуацию. Когда нужно просмотреть каталог магазина-конкурента и сохранить информацию о товарах.

Естественно, весь этот код можно использовать в цикле с динамическими переменными.

Рис. 3. Панель запуска макроса

Вызов iMacros из кода

Любой макрос можно сохранить в файле с расширением iim и использовать в приложениях, написанных на 16 языках программирования. Только надо не забыть установить полную версию (не аддон) iMacros на компьютер или веб-сервер.

Поддерживаемые языки

ASP
ASP.NET
C#
C++
Delphi
FoxPro
Java
JavaScript
Perl
PHP
Python
Power Shell
Ruby
TCL
VBA
VBS

Пользователи iMacros для Firefox могут делиться между собой исходниками с помощью закладок Delicious. Подробности здесь: wiki.imacros.net/iMacros_for_Firefox#Bookmarking
Полный мануал по iMacros: wiki.imacros.net
Сайт производителя: imacros.net

Batch-файлы

Вызов iMacros из батников — наиболее простой и удобный путь автоматизировать их выполнение. Достаточно одной строки для запуска макроса:

Основная сложность в использовании iMacros под C++ — настройка среды разработки (конкретику по версиям различных сред ищи в документации или спрашивай у саппорта). Принцип работы кода такой же, как в PHP:

Использование JavaScript в макросах

В iMacros можно присваивать переменным результаты выполнения JavaScript-кода c помощью команды EVAL:

iMacros можно запускать с веб-сервера, используя PHP-скрипт. Зачем это может пригодиться? Для пополнения базы данных посредством мониторинга информационных сайтов, генерации онлайн-табло результатов тестирования состояния серверов и так далее. Пример вызова макроса, осуществляющего поиск на странице:

С помощью координатной адресации можно даже имитировать drag and drop. Перед записью макроса для Flash-сайта необходимо включить Use Direct Screen Commands в настройках.

Скриншоты

С помощью команды SCREENSHOT TYPE=(PAGE|BROWSER) FOLDER=folder_name FILE=file_name можно сделать скриншот всей страницы, а используя TAG + обращение к элементу + CONTENT=EVENT:SAVE_ELEMENT_SCREENSHOT — отдельной ее части.

Тестирование сайтов

С помощью iMacros можно легко написать программу для мониторинга времени реакции на разные действия пользователя. Пример:

Результаты измерений сохраняются в Imacros\Downloads\performance_Stopwatch.csv.

Обработка ошибок

По умолчанию в случае возникновения какой-либо ошибки выполнение макроса останавливается. Этого можно избежать, прописав в начале !ERRORIGNORE YES.

Использование прокси-серверов

Для этого чтобы подсоединиться к прокси-серверам перед выполнением макроса или во время его, используй команду proxy:

Альтернативы

Запись видео

Если ты хочешь запечатлеть лучшие моменты работы iMacros на видео — используй плагин Capture Fox для Mozilla или Screencastify для Chrome.

В приложении к журналу есть девять шаблонов макросов (с русскоязычными комментами), которые ты сможешь приспособить для решения следующих задач:

заполнение полей форм из CSV-файлов;
извлечение данных из таблицы в CSV-файл;
установка значений в селектах и переключателях (radio buttons);
сохранение картинок с сайта;
обработка всплывающих JS-диалогов;
печать страницы;
создание скриншотов;
измерение времени на загрузку отдельных элементов страницы и выполнение сценариев;
извлечение данных из форм и прочих частей веб-сайта.

Учимся писать userscript’ы

Доброго времени суток всем желающим приобщиться к миру пользовательских скриптов (они же userscript, userJS, юзерскрипты).

В этой статье я хочу поведать о том, что такое юзерскрипты, c чем их едят и, главное, как их готовят!

Внимание: предполагается минимальное знание javascript.
На практике доказано: юзерскрипты может писать человек, не знакомый с программированием, но обладающий усидчивостью и желанием изучить javascript!
О том, что такое javascript и как с ним обращаться, можно узнать на javascript.ru.

Что такое юзерскрипты?

Кратко: юзерскрипт — это программа, написанная на языке JavaScript, хранящаяся на компьютере пользователя и подключаемая браузером на определенных страницах. Юзерскрипт представляет собой файл с расширением .user.js (именно по расширению браузеры понимают, что файл является юзерскриптом), содержащий метаданные и непосредственно javascript-код.

При подключении к странице юзерскрипт выполняется так же, как и обычные javascript-сценарии.
У юзерскрипта есть доступ к DOM-дереву страницы, в контексте которой он выполняется.
В современных браузерах у юзерскрипта есть доступ к localStorage и прочим HTML5 API.

Юзерскрипты поддерживаются всеми основными современными браузерами (и даже кое-как поддерживаются IE7 и выше).

Самый известный портал юзерскриптов — userscripts.org. Тут можно найти хранилище скриптов, инструменты управления своими скриптами на портале и, что не маловажно, отзывчивый форум (всё на английском).

Немного общей теории

Самыми распространенными являются скрипты под расширение GreaseMonkey для браузера Firefox.
Подробную информацию по GreaseMonkey и написанию юзерскриптов под GreaseMonkey можно узнать на http://wiki.greasespot.net.
Так сложилось исторически, что данный браузер был (и остаётся по сей день) первым, в котором поддержка юзерскриптов была выполнена на высоком уровне.

Не все скрипты, написанные для GreaseMonkey, могут запускаться в других браузерах. Причина в ~~криворукости~~ том, что во многих скриптах используется GM API — набор javascript-функций, специфичных для GreaseMonkey.

Простым скриптам не нужна поддержка GM API (библиотека, доступная в GreaseMonkey)
Google Chrome, в отличие от Firefox+GreaseMonkey, имеет отличнейший дебаггер.
Сообщения об ошибках юзерскрипта в Firefox ужасны! Если вы не обладаете ~~даром телепатии~~твердыми знаниями GreaseMonkey и javascript, написание юзерскрипта может превратится в муки!
Google Chrome не требует расширений для поддержки юзерскриптов. Интерфейс для удаления/отключения юзерскриптов доступен «из коробки».

Нет доступа к «родному» window.
Не поддерживается директива @ include метаданных. Директива @ match глючит, можно сказать, что она тоже не поддерживается.

Особенности юзерскриптов

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

Важно:Если вы не доверяете автору скрипта, главное удостовериться, что скрипт не отсылает пользовательские данные (куки, вводимый текст) на сторонние сервисы!

Все юзерскрипты запускаются после того, как загрузились все основные элементы страницы, но ещё не загрузились картинки. Можно сказать, что юзерскрипты грузятся по событию DOMContentLoaded.
В любом случае, проверки на window.onload не нужны.

Каждый браузер накладывает свои ограничения на исполнение юзерскриптов, но в целом юзерскрипты могут делать почти всё, что могут скрипты на странице.
Чаще всего юзерскрипты используются для изменения интерфейса страницы или для добавления плюшек, блекджека ~~и шлюх~~(юзерскрипты для социальных сетей).
Бывают и продвинутые юзерскрипты, которые представляют собой самостоятельные программы (аукционные и игровые боты, плагины-помощники и т.д).

Анатомия юзерскриптов

Юзерскрипт — это текстовый файл с расширением user.js. В начале файла располагается блок метаданных — описание самого скрипта. После блока метаданных следует javascript-код, который и будет исполняться браузером.

Рассмотрим тестовый скрипт, который показывает alert с текстом на определенной странице.

Важно: данный скрипт представляет собой оболочку для кроссбраузерных юзерскриптов. Этот же скрипт, но с английскими комментариями, можно стянуть с pastebin.com и использовать безнаказанно.

В самом начале располагается блок метаданных (в виде комментария).

Этот блок состоит из директив описания юзерскрипта. Ниже в таблице представлены основные директивы и их назначение.

Важно:Все директивы, как и сам блок метаданных, могут отсутствовать.

Директива	Назначение
@ name	Название юзерскрипта. Это название будет отображаться в интерфейсе управления юзерскриптами. Если директива отсутствует, то название юзерскрипта будет таким же, как и название файла.
@ description	Описание юзерскрипта. Это описание будет отображаться в интерфейсе управления юзерскриптами.
@ namespace	Пространство имён. Определяет уникальность набора скриптов. Сюда можно вписать имя домена, принадлежащего вам. Или любую другую строку. Считайте, что это второе название скрипта. Обязательная директива для Trixie!
@ author	Имя автора.
@ license	Название лицензии, по которой распространяется юзерскрипт.
@ version	Номер версии юзерскрипта. К сожалению, механизма автообновления нету ни в одном браузере, поэтому номер версии — это просто цифры, которые отображаются в интерфейсе.
@ include	Директива описания url страницы, на которой нужно запускать юзерскрипт. Поддерживает вайлдкард *(применимо в GreaseMoneky, Opera, IE). Для каждого отдельного url нужно использовать отдельную директиву @ include.
@ exclude	Директива описания url страницы, на которой не нужно запускать юзерскрипт. Поддерживает вайлдкард *(применимо в GreaseMonkey, Opera, IE). Для каждого отдельного url нужно использовать отдельную директиву @ exclude.
@ match	Аналогично @ include, но с более жесткими ограничениями (применимо в GreaseMonkey старше 0.9.8, Google Chrome). Подробнее об ограничениях и формате директивы можно прочитать на этой странице. Для каждого отдельного url нужно использовать отдельную директиву @ match.

Важно: Как показала практика, полагаться на директиву @ match в юзерскриптах не стоит.
Google Chrome периодически отказывается учитывать @ match
и запускает юзерскрипты на всех страницах.
Для предотвращения такой ситуации в юзерскрипты,
которые будут запускаться не только в Firefox,
нужно добавлять код проверки адреса страницы (см. ссылку [4] в коде юзерскрипта) .

Важно: При отсутствии директив @ include или @ match, юзерскрипты будут запускаться на всех страницах.

Для того, чтобы юзерскрипты имели одинаковое поведение и не загрязняли глобальную область видимости, код оборачивается в замыкание (см. [1] в коде скрипта) .
Для правильного подключения библиотек внутри юзерскрипта и для обхода некоторых хитрых особеннойстей GreaseMonkey, необходимо «нормализовать» ссылку на глобальную область видимости window (см. [2] в коде скрипта) .
Для того, чтобы юзерскрипт не запускался несколько раз на одной и той же странице, необходимо останавливать работу при запуске юзерскрипта во фреймах (см. [3] в коде скрипта) .
Для того, чтобы юзерскрипт запускался только на нужных нам страницах, необходимо явно проверять url страницы (см. [4] в коде скрипта) .
Благодаря такой структуре, юзерскрипт может быть относительно просто преобразован в букмарклет.

Результат

Наш юзерскрипт готов к использованию!
Нет, серьёзно, вы можете скопировать код юзерскрипта в файл, назвать его my.user.js, и закинуть полученный файл в браузер (используйте Chrome или Firefox с установленным GreaseMonkey).

Конечно, наш юзерскрипт не обладает серьезными функциями, код выглядит страшным и малопривлекательным (для непосвященного человека). Но в итоге мы получили заготовку для кроссбраузерных юзерскриптов.
Это значит, что юзерскрипт можно запустить практически в любом современном браузере!
И это замечательно!