Главная » Хабрахабр » [Из песочницы] Расширение для хрома: создание, публикация, опыт

[Из песочницы] Расширение для хрома: создание, публикация, опыт

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

В нем должны были отобразиться актуальные тикеты trello и jira, реквесты в gitlab и т.п. Идеей стало создание таск-менеджера для разработчика (и не только), который был бы всегда под рукой. Это те вещи, которые я обычно искал, набирая ключевые слова в адресную строку браузера, типа "jira PM-20".


Расширение для хрома

Но при этом не имел представления, как их создавать. Я точно знал, что расширения в браузерах — это обычные html-странички, подпитанные js-скриптами. Это было даже лучше, т.к. Первое, что выдал мне гугл по этому вопросу — статью на medium, а не официальную документацию. это была обзорная статья простейшего виджета от идеи до публикации.

Я тут же приступил к созданию "hello world!". Статья дала мне представление о том, что разработка "виджета" — дело не слишком хитрое.

Он описывает расширение: название, описание, автора, иконки, разрешения и т.п. Оказалось, что нужно создать mainfest.json в корне проекта. Первую версию я сделал без изучения документации.

Первый manifest.json

Этот функционал я пощупал очень поверхностно, просто, чтобы понять, как он может работать. Расширения позволяют запускать js-скрипты в фоне, которые делают что-то даже когда пользователь ими не пользуется. Он просто менял заголовок в <h1> "виджета".

Интерес для меня представляла сама страничка html, которая показывается, при нажатии на иконку в браузере, она называется popup.html в моем манифесте.

Таким образом, вы можете просмотреть исходники любого расширения, что у вас установлено. Эту страничку, кстати, можно открыть в браузере как и любой сайт, только в качестве "протокола" будет chrome-extension, например chrome-extension://id-виджета-в-webstore/popup.html.

Есть и технические ограничения, управляемые разработчиком, например Content Security Policyили permissions к функционалу браузера, которые запрашиваются у пользователя. Работает она точно так же, как и любой веб-сайт, за исключением пары возможностей, например: переходы по ссылкам работают только с target="_blank".

На служебной страничке хрома chrome://extensions есть кнопка Загрузить распакованное расширение. После создания папки с manifest.json и popup.html внутри, можно уже запустить её как виджет. С помощью нее выбираем папку

и расширение тут же отображается в списке “виджетов” рядом с адресной строкой.

С этого момента расширение уже можно тестировать: изменять popup.html, и видеть изменения, переоткрыв “виджет” нажатием на его иконку.

Происходит она в dashboard вебстора, для этого потребуется залить zip-архив содержимого папки расширения и поработать над рекламными текстами и картинками. Начнем с того, что возможность публикации первых 20 расширений стоит 5$.

Подготовка к публикации расширения

Первая часть описания расширения будет отображаться из свойства description манифеста
расширения, остальное дописывается в Detailed description в управлении расширением на webstore.

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

Я наткнулся на это находясь в Таиланде: не мог понять почему, спустя 2 дня, расширение не ищется в сторе даже по прямому названию. Нужно помнить, что если вы выбираете для публикации только РФ, то в остальных странах расширение не появится.

Теперь хочу осветить некоторые детали для написания более сложного “виджета“. Я описал необходимые шаги для публикации простейшего расширения, чтобы процесс был понятен.

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

Я воспользовался "permissions": ["storage"] в своем манифесте.

OAuth2

В большинстве случаев разработчики API предлагают OAuth2 протокол для авторизации. 

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

В идеале нужно использовать Authorization Code Flow, которое предполагает наличие бэкенда у приложения; API редиректит пользователя с Auth-кодом на приложение, а приложение на бэкенде обменивает его на токен. Протокол описывает несколько способов для авторизации.

Есть также упрощенный Implicit Flow, позволяющий авторизовываться без бэкенда: API после авторизации редиректит пользователя на приложение с токеном в URL.

Заводить веб-сайт? Как же пользоваться этой “редиректной” авторизацией в расширении хрома? Оказывается, что не обязательно.

Мои костыли

С Gitlab все оказалось “просто”: отправляешь пользователя в админку к его Gitlab, чтобы он сделал токен и передал его тебе. Изначально я взялся интегрироваться с Gitlalb и Trello. С таким подходом долго возиться не пришлось, я просто сделал поле для ввода токена и описал как его получить.

Trello же предоставил OAuth2, я сразу же заметил, что в нем есть implicit flow, но немного странный: токен отображается на их странице /approve в таком виде

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

Правильный способ

Я на него наткнулся, когда начал интеграцию с Jira, которая имеет только Authorization Code Flow. Как обычно, хорошее решение приходит не сразу.

Этот функционал требует включения identityв разрешениях манифеста. Как-то случайно я наткнулся на chrome.identity: функционал браузера, уже реализовавший все “костыли” для авторизации. Я дополнил свой манифест: "permissions": ["storage", "identity"].

Такой адрес ни для чего не годится, но chrome.identity предоставляет настоящий URL https://<app-id>.chromiumapp.org/*, который можно передать в API с OAuth2 в качестве redirectUrl. Как я уже и говорил: у каждого расширения есть URL типа chrome-extension://<id>/. API, после авторизации, отправит пользователя на него с дополнительными параметрами, будь то authCode или token, а хром их подхватит и передаст в ваш js-callback расширения.

Для этого нужно воспользоваться chrome.identity.launchWebAuthFlow(), которое открывает страницу авторизации API в новом окне:

chrome.identity.launchWebAuthFlow( , jira.callback()
);

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

Окно авторизации chrome.identity.launchWebAuthFlow

Другие опции

в нем уже достаточно много подобных фич, которые облегчат вам работу. Когда появляется идея реализовать какой-либо функционал, рекомендую гуглить chrome API, т.к. Например полный manifest.json впечатляет:

{ // Required "app": { "background": { // Optional "scripts": ["background.js"] } }, "manifest_version": 2, "name": "My App", "version": "versionString", // Recommended "default_locale": "en", "description": "A plain text description", "icons": {...}, // Optional "action_handlers": ["new_note"], "author": ..., "automation": ..., "bluetooth": { "uuids": ["1105", "1006"] }, "commands": {...}, "current_locale": ..., "event_rules": [{...}], "externally_connectable": { "matches": ["*://*.example.com/*"] }, "file_handlers": {...}, "file_system_provider_capabilities": { "configurable": true, "multiple_mounts": true, "source": "network" }, "import": [{"id": "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"}], "key": "publicKey", "kiosk": { "always_update": ..., "required_platform_version": ... }, "kiosk_enabled": true, "kiosk_only": true, "kiosk_secondary_apps": ..., "minimum_chrome_version": "versionString", "nacl_modules": [...], "oauth2": ..., "offline_enabled": true, "optional_permissions": ["tabs"], "permissions": ["tabs"], "platforms": ..., "requirements": {...}, "sandbox": [...], "short_name": "Short Name", "signature": ..., "sockets": { "tcp": { "connect": "*" }, "udp": { "send": "*" } }, "storage": { "managed_schema": "schema.json" }, "system_indicator": ..., "update_url": "http://path/to/updateInfo.xml", "url_handlers": {...}, "usb_printers": { "filters": [...] }, "version_name": "aString", "webview": {...}
}

их огромное количество. Предварительно разбираться со всеми возможностями может оказаться слишком расточительным, т.к.

К тому же только js-сторона расширения сама по себе может увеличиться до больших размеров.

Моя текущая схема

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

Получил небольшой опыт и нулевую конверсию.  Я попробовал контекстную рекламу и рекламу в социальных сетях.

Контекстная реклама

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

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

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

Социальные сети

Они как раз и относятся к категории сайтов, на которых десктоп это умирающее меньшинство.

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

На самом деле в тот день мобильные просмотры были сильно больше

в браузере мы проводим много времени, которое иногда хочется оптимизировать. Я считаю, что расширения это мощный инструмент для людей, работающих в интернете, т.к. Решение проблемы огромного количества открытых вкладок “на попозже” я тоже решил с помощью виджета. Например виджет гугл-переводчика, переводящий текст при выделении, хороший пример оптимизации.

Расширения можно писать на том же React JS с которого можно перекинуться на написание приложений под мобильные устройства. Написание расширений дает опыт в изучении подводной части айсберга “Chrome” и написании “фронтенда” (особенно если вы бэкенд-разработчик). Процесс написания и того и того очень похожий.


Оставить комментарий

Ваш email нигде не будет показан
Обязательные для заполнения поля помечены *

*

x

Ещё Hi-Tech Интересное!

Перевезти дата-центр за 14 400 секунд

Всем знакома пословица «Один переезд равен двум пожарам». Смысл этой народной мудрости в том, что процесс переезда сопряжен со стрессами, суетой, переживаниями и, конечно, беготней, которые бывают и при пожаре, а подчас и с утратами ценного имущества. К тому же, ...

Дорожная карта математических дисциплин для машинного обучения, часть 1

Вместо предисловия Допустим, сидя вечерком в теплом кресле вам вдруг пришла в голову шальная мысль: «Хм, а почему бы мне вместо случайного подбора гиперпараметров модели не узнать, а почему оно всё работает?»Это скользкий путь — вы думаете, что достаточно пары ...