Розробка

Розширення для хрому: створення, публікація, досвід

У пошуках нових майданчиків для діяльності, я звернув увагу на “віджети” хрому, якими користуюся давно, але ніколи не надавав їм значення. Тут же захотілося спробувати що-небудь реалізувати.

Ідеєю стало створення таск-менеджера для розробника (і не тільки), який був би завжди під рукою. У ньому повинні були з’явитися актуальні тікети 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. Таким чином, ви можете переглянути исходники будь-якого розширення, що у вас встановлено.

Працює вона точно так само, як і будь-який веб-сайт, за винятком пари можливостей, наприклад: переходи по посиланнях працюють тільки з 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”].

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

Для цього потрібно скористатися chrome.identity.launchWebAuthFlow(), яка відкриває сторінку авторизації API в новому вікні:

chrome.identity.launchWebAuthFlow(
{
 'url': JiraApi.url(),
 'interactive': true
},
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": ...,
 "вимога": {...},
 "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. Мінус цього підходу в тому, що ти можеш довіряти статистиці рекламного кабінету і не можеш побачити як користувачі ведуть себе на рекламовану сторінку.

Соціальні мережі

Вони як раз і відносяться до категорії сайтів, на яких десктоп це вмираюче меншість.

Вконтакте надає націлювання на мобільний і повну версію свого сайту. Але ця галочка прихована в самому кінці налаштувань, особисто я її не помітив до того, як злив бюджет і побачив у статистиці сумний охоплення

Насправді в той день мобільні перегляди були сильно більше

Думки наостанок

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

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

Related Articles

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *

Close