Расширение для хрома: создание, публикация, опыт
В поисках новых площадок для деятельности, я обратил внимание на «виджеты» хрома, которыми пользуюсь давно, но никогда не придавал им значения. Тут же захотелось попробовать что-нибудь реализовать.
Идеей стало создание таск-менеджера для разработчика (и не только), который был бы всегда под рукой. В нем должны были отобразиться актуальные тикеты trello и jira, реквесты в gitlab и т.п. Это те вещи, которые я обычно искал, набирая ключевые слова в адресную строку браузера, типа «jira PM-20».
Расширение для хрома
Я точно знал, что расширения в браузерах — это обычные html-странички, подпитанные js-скриптами. Но при этом не имел представления, как их создавать. Первое, что выдал мне гугл по этому вопросу — статью на medium, а не официальную документацию. Это было даже лучше, т.к. это была обзорная статья простейшего виджета от идеи до публикации.
Статья дала мне представление о том, что разработка «виджета» — дело не слишком хитрое. Я тут же приступил к созданию «hello world!».
Структура
Оказалось, что нужно создать mainfest.json в корне проекта. Он описывает расширение: название, описание, автора, иконки, разрешения и т.п. Первую версию я сделал без изучения документации.
Первый manifest.json
Расширения позволяют запускать js-скрипты в фоне, которые делают что-то даже когда пользователь ими не пользуется. Этот функционал я пощупал очень поверхностно, просто, чтобы понять, как он может работать. Он просто менял заголовок в
«виджета».
Интерес для меня представляла сама страничка html, которая показывается, при нажатии на иконку в браузере, она называется popup.html в моем манифесте.
Работает она точно так же, как и любой веб-сайт, за исключением пары возможностей, например: переходы по ссылкам работают только с target=»_blank». Есть и технические ограничения, управляемые разработчиком, например Content Security Policyили permissions к функционалу браузера, которые запрашиваются у пользователя.
Запустить расширение
После создания папки с manifest.json и popup.html внутри, можно уже запустить её как виджет. На служебной страничке хрома chrome://extensions есть кнопка Загрузить распакованное расширение. С помощью нее выбираем папку
и расширение тут же отображается в списке “виджетов” рядом с адресной строкой.
С этого момента расширение уже можно тестировать: изменять popup.html, и видеть изменения, переоткрыв “виджет” нажатием на его иконку.
Публикация в webstore
Начнем с того, что возможность публикации первых 20 расширений стоит 5$. Происходит она в dashboard вебстора, для этого потребуется залить zip-архив содержимого папки расширения и поработать над рекламными текстами и картинками.
Подготовка к публикации расширения
Первая часть описания расширения будет отображаться из свойства description манифеста расширения, остальное дописывается в Detailed description в управлении расширением на webstore.
Расширение имеет гибкие настройки публикации: можно выбрать регионы мира для публикации, а также видимость расширения.
Нужно помнить, что если вы выбираете для публикации только РФ, то в остальных странах расширение не появится. Я наткнулся на это находясь в Таиланде: не мог понять почему, спустя 2 дня, расширение не ищется в сторе даже по прямому названию.
Продвинутые опции
Я описал необходимые шаги для публикации простейшего расширения, чтобы процесс был понятен. Теперь хочу осветить некоторые детали для написания более сложного “виджета“.
Суть моего расширения в использовании чужих API для получения информации. Для этого мне нужен как минимум localStorage, чтобы запоминать токены авторизации.
Я воспользовался «permissions»: [«storage»] в своем манифесте.
OAuth2
В большинстве случаев разработчики API предлагают OAuth2 протокол для авторизации.
Если вы не знакомы с этим протоколом: он предлагает безопасный процесс аутентификации и авторизации приложения от лица пользователя без доступа к логину/паролю со стороны этого приложения.
Протокол описывает несколько способов для авторизации. В идеале нужно использовать Authorization Code Flow, которое предполагает наличие бэкенда у приложения; API редиректит пользователя с Auth-кодом на приложение, а приложение на бэкенде обменивает его на токен.
Есть также упрощенный Implicit Flow, позволяющий авторизовываться без бэкенда: API после авторизации редиректит пользователя на приложение с токеном в URL.
Как же пользоваться этой “редиректной” авторизацией в расширении хрома? Заводить веб-сайт? Оказывается, что не обязательно.
Мои костыли
Изначально я взялся интегрироваться с Gitlalb и Trello. С Gitlab все оказалось “просто”: отправляешь пользователя в админку к его Gitlab, чтобы он сделал токен и передал его тебе. С таким подходом долго возиться не пришлось, я просто сделал поле для ввода токена и описал как его получить.
Trello же предоставил OAuth2, я сразу же заметил, что в нем есть implicit flow, но немного странный: токен отображается на их странице /approve в таком виде
Не став углубляться, я так же сделал поле для ввода токена в своем расширении и описал пользователю, как это сделать.
Правильный способ
Как обычно, хорошее решение приходит не сразу. Я на него наткнулся, когда начал интеграцию с Jira, которая имеет только Authorization Code Flow.
Как-то случайно я наткнулся на chrome.identity: функционал браузера, уже реализовавший все “костыли” для авторизации. Этот функционал требует включения identityв разрешениях манифеста. Я дополнил свой манифест: «permissions»: [«storage», «identity»].
Для этого нужно воспользоваться chrome.identity.launchWebAuthFlow(), которое открывает страницу авторизации API в новом окне:
Окно авторизации chrome.identity.launchWebAuthFlow
Другие опции
Когда появляется идея реализовать какой-либо функционал, рекомендую гуглить chrome API, т.к. в нем уже достаточно много подобных фич, которые облегчат вам работу. Например полный manifest.json впечатляет:
Предварительно разбираться со всеми возможностями может оказаться слишком расточительным, т.к. их огромное количество.
К тому же только js-сторона расширения сама по себе может увеличиться до больших размеров.
Моя текущая схема
Продвижение
Немного стоит упомянуть продвижение своего расширения. Особенностью “виджетов” является то, что они направлены на пользователей десктопов, которые в последние годы успели стать меньшинством.
Я попробовал контекстную рекламу и рекламу в социальных сетях. Получил небольшой опыт и нулевую конверсию.
Контекстная реклама
Мой опыт пока ограничился одной площадкой, не могу говорить за остальные, но думаю, там то же самое.
Оказывается, что в контекстной рекламе яндекса нельзя настраивать таргетинг по устройствам и браузерам. Так что если ваше расширение только для хрома, показывать рекламу придется и людям, сидящим на других браузерах, переходы которых принесут только лишние убытки.
Я не хотел делать отдельный сайт для своего расширения, поэтому рекламировал его страницу в webstore. Минус этого подхода в том, что ты можешь доверять только статистике рекламного кабинета и не можешь увидеть как пользователи ведут себя на рекламируемой странице.
Социальные сети
Они как раз и относятся к категории сайтов, на которых десктоп это умирающее меньшинство.
Вконтакте предоставляет таргетинг на мобильную и полную версию своего сайта. Но эта галочка скрыта в самом конце настроек, лично я ее не заметил до того, как слил бюджет и увидел в статистике печальный охват
На самом деле в тот день мобильные просмотры были сильно больше
Мысли напоследок
Я считаю, что расширения это мощный инструмент для людей, работающих в интернете, т.к. в браузере мы проводим много времени, которое иногда хочется оптимизировать. Например виджет гугл-переводчика, переводящий текст при выделении, хороший пример оптимизации. Решение проблемы огромного количества открытых вкладок “на попозже” я тоже решил с помощью виджета.
Написание расширений дает опыт в изучении подводной части айсберга “Chrome” и написании “фронтенда” (особенно если вы бэкенд-разработчик). Расширения можно писать на том же React JS с которого можно перекинуться на написание приложений под мобильные устройства. Процесс написания и того и того очень похожий.
Google Chrome Extensions — Часть 1. Архитектура
Sep 29, 2016 · 5 min read
Любое chrome расширение может иметь такую структуру:
может, так как не все эти части есть обязательные, все зависит от конкретных потребностей и особенностей реализации.
Manifest.json
Ман и фест — главный файл в chrome расширении, поскольку здесь информация о доступах которые нужны, о подключаемых файлах, настройки безопасности и многое другое. Например:
Background page
Если взять определение с официальной документации — невидимая страница, которая содержит основную логику расширения. Главной особенностью background страницы есть то, что она запускается и выполняет некую работу в фоновом режиме, как только запускается браузер и держится в оперативной памяти как фоновый процесс на протяжении сессии. Используя комбинацию Shift + Esc Вы можете просмотреть список задач, которые выполняются внутри браузера Google Chrome. Когда установлено много расширений, список задач этом списке также большой. Они занимают часть памяти и возможно других ресурсов, но не выполняют никаких функций, так как непосредственно само расширение не запущено, а в списке вы видите background страницу конкретного расширения.
Чтобы оптимизировать использование ресурсов, в 2012 году была разработана концепция ивент страниц (Event Pages). Она выполняет те же функции что и бэкграунд страница, но призвана решить проблему производительности и ресурсов, которые используются иррационально. Главное отличие этого подхода — вместо непрерывной работы в фоновом режиме, ивент страница запускается только тогда, когда нужно — например чтобы обработать конкретное событие. После чего выгружается, освобождая память до того момента пока конкретное событие не сработает в следующий раз. В плане кода, разницы никакой между этими двумя подходами нет, а единственное что нужно, указать в manifest.json файле это корректное значение проперти persistent. По умолчанию это значение будет стоять в true для стандартных background страниц и false для ивент страниц.
Это обязательные элементы Chrome Extension-а, теперь давайте перейдем к опциональным.
Content Scripts
Контент скрипты — это javascript файлы или код, которые выполняються не в отдельном фоновом процессе (как бекграунд скрипты) а в контексте Веб страницы. Контент скрипты используют в ограниченном виде Chrome API. Но при этом они изолированные и не могут использовать, как функции и переменные которые объявлены, например на бекграунд странице так и переменные, функции и тд. со скриптов находящихся на веб странице.
Полноценный доступ есть только через к DOM дереву страницы. С контент скрипта вы можете инициировать ивенты, изменять DOM. Даже можете добавлять script тег в страницу и подключать нужные файлы.
Content Security Policy
Для Chrome расширений, действует так называемое Content Security Policy — это набор строгих правил, которые необходимы для того чтобы сделать расширения безопасней и контролировать контент который может быть загружен и выполнен в расширении.
По умолчанию, если использовать манифест 2 версии то в расширении будут такие ограничения:
Эти правила можно отменить или облегчить при необходимости. Например, можно добавить настройки хоста с которого вы хотите извлекать определенные ресурсы или скрипты, но все еще запрещено использовать протокол HTTP только HTTPS.
Также можно разрешить использование eval функции.
Разрешить нельзя использование только инлайн скриптов.
Chrome Javascript API’s
Разрабатывая хром расширения, получить доступ к методам и возможностям браузера можно с помощью специального Chrome Javascript API’s. Большинство методов асинхронные, о чем нужно помнить разрабатывая расширение.
Расширения для браузера Google Chrome: выбираем лучшие
Одной из сильных сторон любого современного браузера является поддержка расширений — дополнительных программных модулей, добавляющих ту или иную функциональность веб-обозревателю. В активе Google Chrome (читай — в магазине Chrome Web Store) таких надстроек, по данным аналитического ресурса ChromeStats, насчитывается свыше 145 тысяч, почти 92% из которых являются бесплатными. Выбирай не хочу! Ну а определиться с выбором поможет наша подборка наиболее интересных с практической точки зрения расширений, которые с равным успехом можно использовать не только в «Хроме», но и в других построенных на кодовой базе Chromium браузерах, будь то Microsoft Edge, Vivaldi и прочие.
Источник изображения: Evan Lorne / Shutterstock.com
Открывает топ-лист лучших дополнений для Google Chrome расширение Web Server for Chrome, позволяющее задействовать браузер в качестве простейшего веб-сервера, например для обмена крупными файлами через интернет. Надстройка проста в использовании, поддерживает протоколы HTTP/HTTPS, умеет работать в фоновом режиме и может быть сконфигурирована в соответствии с предпочтениями пользователя. Единственное, о чем следует помнить, так это о необходимости наличия у имеющегося под рукой компьютера собственного внешнего («белого») IP-адреса, руководствуясь которым удалённый пользователь может установить соединение для получения данных с сервера.
Второй в нашем списке фигурирует надстройка Video Downloader Plus, добавляющая на панель инструментов браузера клавишу для быстрого скачивания роликов с различных видеохостингов. Невероятно удобная вещь для тех, кто предпочитает просматривать мультимедийный контент не только в онлайне, но и в офлайне.
Video Downloader Plus функционирует в паре с одноимённым веб-сервисом и, по заверениям разработчиков, поддерживает свыше тысячи видеохостингов — за исключением YouTube (таковы ограничения магазина Chrome Web Store, и ничего с этим не поделаешь). Скачивать медиаконтент можно в форматах MP4, FLV, MOV, WEBM, 3GP, OGG, BIN, M4A, MP3, WAV, поддерживается загрузка 4K-видео. Для доступа ко всем возможностям расширения необходима подписка, стоимость которой стартует от 5 долларов США в месяц.
Тем, кто не на шутку обеспокоен обеспечением безопасности при работе в глобальной сети, советуем присмотреться к расширению Avast Online Security, позволяющему выстроить дополнительный эшелон защиты от фишинговых и вредоносных ресурсов, в том числе сайтов с плохой репутацией. Также надстройка умеет блокировать трекеры, cookie-файлы, поведенческие анализаторы и прочий сетевой контент, с помощью которого можно отслеживать пользовательскую активность в интернете.
Хорошим дополнением к упомянутому расширению является надстройка VT4Browsers для быстрого сканирования файлов и сетевых ресурсов на предмет наличия вредоносного кода. Проверка осуществляется средствами онлайнового сервиса VirusTotal, использующего несколько десятков антивирусных систем и позволяющего делать достоверные выводы об опасности либо безопасности анализируемых объектов. Благодаря механизму сверки контрольной суммы загружаемых файлов с базой данных ранее проанализированных объектов, сканирование при помощи VirusTotal осуществляется за считаные секунды.
Одно дело информационная безопасность, и совсем другое — работа с документами формата Microsoft Office. В этом случае пригодится разработанная Google надстройка, которая так и называется — «Редактирование файлов Office». Она интегрирует Chrome c онлайновым офисным пакетом Google Docs и позволяет редактировать текстовые документы Word, таблицы Excel и презентации PowerPoint непосредственно в браузере. При этом для открытия того или иного документа не нужно делать лишних телодвижений — достаточно перетащить мышью файл в окно веб-обозревателя. Отличное решение на случай, если на компьютере нет установленного Microsoft Office.
Раз уж речь зашла о работе с документами, имеет смысл обратить внимание читателей на расширение Smart PDF, предназначенное для конвертирования файлов PDF в форматы Word, Excel, PowerPoint, JPG и наоборот. Программа работает в связке с одноимённым веб-сервисом и, по отзывам пользователей, довольно неплохо справляется с преобразованием документов из одного формата в другой.
Ещё одно расширение из разряда must have — LanguageTool. Оно проверяет тексты на наличие орфографических или грамматических ошибок где угодно в интернете, будь то веб-формы, выделенные области в браузере, Gmail, Facebook, Twitter и прочие сервисы. LanguageTool находит ошибки и опечатки, которые не удаётся обнаружить при обычной проверке орфографии (например, повтор фраз, использование слов «одеть» или «надеть»), и может выявить некоторые проблемы в грамматике и стилистике. Надстройка поддерживает более чем 25 языков, включая английский, испанский, французский, немецкий, польский и русский.
Неплохим подспорьем для переводчиков, лиц, работающих с многоязычными материалами в глобальной сети, а также для изучающих иностранные языки могут послужить расширения Mate Translate, Google Dictionary и Language Learning with Netflix. Первая надстройка представляет собой переводчик с поддержкой 103 языков и функцией мгновенного перевода простым наведением курсора мыши на незнакомое слово. Вторая предоставляет доступ к внушительной базе словарей с толкованием значений слов и их произношением на различных языках, а третья предназначена для изучения языков с помощью видеосервиса Netflix. Последний плагин интересен своей реализацией: при просмотре иностранных фильмов и сериалов он отображает субтитры на двух языках, что позволяет сравнивать оригинальные аудиодорожки и текст с переводом на родной язык и таким образом учить новые слова, а также их правильное произношение. Расширение позволяет прослушивать субтитры по одному и менять скорость воспроизведения. Предусмотрен всплывающий словарь.
Пользователям техники Apple рекомендуем взять на заметку надстройки «Пароли iCloud» и «Закладки iCloud», позволяющие синхронизировать сохранённые пароли и закладки между браузерами Safari и Chrome. Упомянутые расширения созданы самой Apple, поэтому в плане надёжности и безопасности им можно доверять. Ну а пригодиться они могут тем, кому регулярно приходится переключаться между компьютерами с macOS и Windows.
Экстремальным веб-сёрфингистам стоит присмотреться к расширениям Speedtest, User-Agent Switcher и Visualping. Первое позволяет измерять время загрузки сайтов и скорость интернет-соединения, второе — корректировать передаваемый веб-серверу параметр User Agent, в том числе маскировать «Хром» под другие браузеры, а средствами третьего можно осуществлять мониторинг сетевых площадок на предмет изменений. Практическую ценность последнего инструмента трудно переоценить: с его помощью можно, например, брать на карандаш ресурсы, лишённые поддержки RSS — формата представления данных, позволяющего в режиме реального времени отслеживать обновления на страницах сайта без его регулярного посещения. Таких ресурсов в последнее время становится всё больше, что делает Visualping более чем актуальным средством мониторинга.
Интересным по части функциональных возможностей является разработанный компанией Google плагин Secure Shell, предназначенный для удалённого администрирования серверов по протоколам SSH и SFTP. В основу надстройки положена JavaScript-библиотека Hterm с открытым исходным кодом, а само расширение по набору функций во многом схоже с широко известным в профессиональной среде клиентом PuTTY. Для разъяснения всех нюансов работы с Secure Shell предусмотрена документация. Найти её можно на сайте chromium.googlesource.com.
Отдельного упоминания заслуживает ещё одно фирменное расширение — Google Tone, с помощью которого можно посредством звука обмениваться ссылками с расположенными поблизости (точнее — в пределах слышимости) компьютерами. Для передачи данных плагин преобразует указанный пользователем веб-адрес в последовательность звуковых сигналов, которые микрофоны других устройств распознают как URL. По замыслу разработчиков, Google Tone является удобной альтернативой электронной почте, мессенджерам и социальным сетям при обмене ссылками между пользователями нескольких ПК, расположенных в одном помещении — например, в офисах. При этом они признают, что технология не лишена недостатков: расширение может давать сбои в шумных местах и на устройствах, расположенных далеко друг от друга.
Любителей радиотрансляций порадует расширение с незамысловатым названием «Радио». Плагин предоставляет удобный доступ к 50 тысячам новостных, разговорных, спортивных и музыкальных онлайн-радиостанций, вещающих в различных странах мира как в прямом эфире, так и в записи. Доступны поиск станций по названию, стране, тематике и жанру транслируемого аудиоконтента. Также предусмотрено отображение названий песен, которые звучат в эфире тех или иных радиостанций. Впрочем, работает эта функция не всегда, а для её замены и идентификации музыкальных композиций всегда можно использовать другое расширение — AHA Music, представляющее собой альтернативу популярному сервису Shazam.
Ну а в завершение обзора отметим, что не все плагины для браузеров одинаково полезны. При установке любого расширения необходимо обращать внимание на запрашиваемые им разрешения, рейтинг и количество скачиваний, внимательно изучать отзывы пользователей, а также стараться использовать продукты только от надёжных разработчиков с хорошей репутацией. Эти простые правила помогут уберечься от вредоносного софта, которому удаётся проникать даже в такой надёжный магазин, как Chrome Web Store.
