Браузер Google Chrome обладает большим количеством полезных функций, облегчающих интернет-серфинг. Но порой встроенного функционала не хватает для выполнения тех или иных задач. И тогда на помощь приходят браузерные расширения. В магазине приложений Chrome на данный момент представлено большое количество расширений на любой вкус, доступных для свободного скачивания. Но некоторым пользователям браузера среди всего этого многообразия веб-приложений порой не удается найти подходящий плагин. В таком случае можно написать расширение для Chrome самостоятельно и получить тем самым недостающий функционал.
Что такое расширение для Гугл Хром
Расширение для Google Chrome представляет собой программу, которую можно встроить в браузер Chrome, чтобы изменить его функциональность. При этом могут быть добавлены новые функции в Chrome или изменено существующее поведение самой программы, чтобы она стала более удобной в использовании. Приведем примеры функций, которые могут быть добавлены в Google Chrome благодаря расширениям:
- блокировка показа рекламы;
- оптимизация использования памяти для более эффективной работы браузера;
- добавление списков дел или заметок;
- управление паролями;
- упрощение копирования текста с сайта;
- защита частной жизни и более безопасный просмотр веб-страниц.
Что нужно для создания
Создание расширения для Google Chrome требует обладания базовыми навыками веб-программирования: нужно быть знакомым с языком программирования JavaScript, языком гипертекстовой разметки HTML и каскадными таблицами стилей CSS.
Также следует ознакомиться со специальным API, который Chrome предоставляет разработчикам браузерных расширений. Для проведения тестирования плагина нужно будет использовать браузер Хром. Желательно установить последнюю его версию.
Как создать свое расширение
Контент-скрипты расширения, которые имеют доступ к вкладкам браузера, могут взаимодействовать с содержимым веб-страниц посредством манипуляций со стандартными DOM- и BOM-объектами.
Что же касается фоновых скриптов, то для них открывается доступ к специальному Chrome API. Этот API позволяет использовать встроенные механизмы в браузере, такие как контекстное меню, а также отслеживать действия, которые пользователь выполняет на странице, например, изменение вкладки или добавление страницы в закладки.
К Chrome API также можно получить доступ из скриптов всплывающего окна. Стоит отметить, что скрипты всех названых типов могут обмениваться друг с другом данными.
Подготовка расширения
Важный этап в написании плагина для браузера — это создание файла манифеста. Он имеет вид «manifest.json». Манифест — это файл, который определяет, с чем браузер имеет дело, какие разрешения требуются расширению, а также другие, более стандартные параметры, такие как имя расширения, его версия, описание, путь к файлу с иконкой. Давайте рассмотрим на примере, как может выглядеть содержимое такого файла:
{
«name»: «Image blocker»,
«version»: «1.0.0»,
«description»: «Given extension blocks all the images on a web page.»,
«manifest_version»: 2,
«permissions»: [ «activeTab», «tabs», «storage», «*://example.com/*» ],
«icons»:
{
«16»: «images / icon1.png»,
«32»: «images / icon2.png»,
«48»: «images / icon3.png»,
«128»: «images / icon4.png»
},
«content_scripts»:
[ {
«matches»: [«https://example.com/*»],
«js»: [«index.js»]
} ],
«background»: { «scripts»: [«background-script.js»] },
«browser_action»:
{
«default_icon»: «images / icon3.png»,
«default_popup»: «popup.html»,
«default_title»: «Image blocker»
}
}
Первая строчка содержит название расширения, вторая — его версию, третья — описание плагина, четвертая — версию манифеста. Версия манифеста, согласно рекомендациям Google, должна соответствовать значению «2».
Блок «icons» не обязателен, но его рекомендуется использовать. Он позволяет указать пути к иконкам расширения. Одна из них будет отображаться в менеджере расширений. Иконки также важны в случае, если мы хотим опубликовать наш плагин в магазине расширений. Следует предоставить картинки в 4 размерах: 16×16, 32×32, 48×48 и 128×128 пикселей. В качестве формата рекомендуется использовать формат PNG.
В блоке «permissions» мы определяем разрешения, которые будут предоставлены нашему веб-приложению. В числе прочего, вы можете найти следующую запись: «*://example.com/*». Она означает, что данный плагин может отправлять запросы и получать ответы от внешнего сервиса, расположенного в домене «example.com». Звездочка перед адресом означает возможность работы с разными протоколами. Однако, по соображениям безопасности, желательно, чтобы это был протокол HTTPS. Вторая звездочка указывает на произвольность выбора последующих доменных имен более низкого уровня.
Блок «content_scripts» содержит ключ «matches». Он является обязательным и определяет, на каких веб-страницах будет запускаться код нашего плагина. Кроме того, здесь мы можем предоставить пути к файлам CSS или JavaScript (в нашем случае index.js). Блок «background» предназначен для указания путей к скриптам, работающим в фоне.
С помощью блока «action» вы можете определить иконку расширения по умолчанию, которая будет отображаться рядом с адресной строкой в браузере. Кроме того, здесь указывается заголовок приложения (он появляется при наведении курсора мыши на иконку) и путь к html-файлу всплывающего окна.
Помимо прочего, разработчики браузера предоставили нам механизм создания всплывающего окна. Мы можем вызвать его, нажав на значок расширения, находящийся рядом с адресной строкой.
Промежуточное и финальное тестирование
Если вы разобрались с тем, как написать плагин для Chrome, то вам остается научиться тестировать его. Чтобы выполнить промежуточное тестирование плагина, нужно проделать несколько действий:
- войдите в ваш аккаунт в веб-браузере Chrome;
- введите в поисковой строке «chrome://extensions» и перейдите на эту страницу;
- включите «Режим разработчика» в правом верхнем углу;
- нажмите на надпись «Загрузить распакованное расширение», затем выберите папку с вашим проектом;
- теперь откройте новую вкладку браузера, посетите любую веб-страницу и приступайте к тестированию.
Провести финальное тестирование расширения для Chrome можно при помощи сервиса «endtest.io».
Для этого нужно сделать следующее:
- упакуйте ваше расширение в ZIP-файл;
- загрузите этот ZIP-файл в раздел сайта «Drive»;
- скопируйте URL-адрес загрузки вашего файла;
- перейдите в раздел «Advanced Settings»;
- вставьте URL-адрес загрузки файла в поле «Add Chrome Extension»;
- нажмите на кнопку «Save»;
- выполните нужные вам тесты в Chrome.
Расширение будет автоматически загружено в браузер Google Chrome после начала выполнения теста. Чтобы получить доступ к определенным разделам из расширения Chrome, вам может потребоваться получить идентификатор этого расширения. Идентификатор будет уникальным для каждого выполняемого теста.
Публикация
После создания расширения у вас появляется возможность опубликовать его в интернет-магазине Chrome. В процессе публикации, вы будете шаг за шагом проинструктированы о том, что нужно делать. Среди прочего, вам понадобиться добавить описание вашего плагина, а также внести свои контактные данные. Интернет-магазин Chrome перед публикацией первого расширения попросит вас внести небольшую сумму (5 USD).
Если вы хотите использовать расширение только для собственных нужд, то вы можете сделать это следующим образом. Введите в адресной строке «chrome://extensions», а затем нажмите на «Загрузить распакованное расширение». Далее нужно будет выбрать папку, в которой находится файл manifest.json. Если в данном файле указаны неправильные настройки, то вы получите соответствующее сообщение об ошибке.
Настройка правил работы с расширением
После того, как вы зайдете в консоль администратора Google, у вас появится возможность управлять использованием расширений в браузере Chrome на компьютерах Mac,Windows и Linux. Для настройки правил для расширений сделайте следующее:
- посетите главную страницу консоли администратора;
- нажмите «Устройства»;
- нажмите «Управление устройствами Chrome OS»;
- кликните по надписи «Приложения и расширения»;
- теперь нужно определиться с типом расширения, которое вам надо настроить: «Пользователи и браузеры», «Киоски», «Управляемые гостевые сеансы»;
- если вы хотите, чтобы настройки были применены ко всем пользователям, сделайте выбор в пользу организационного подразделения верхнего уровня, в противном случае надо выбрать дочернее подразделение;
- выберите интересующее вас расширение;
- измените нужные правила для данного расширения;
- нажмите «Сохранить».
Теперь вы знаете, как создать расширение для Chrome, и можете применить полученные знания на практике.
