Створюємо та публікуємо розширення для Chrome

💡 Усі статті, обговорення, новини про Front-end — в одному місці. Приєднуйтесь до Front-end спільноти!

Вітаю! Я Максим Рудний, працюю Senior Software Engineer. Сьогодні розповім про основні аспекти створення розширення для найпопулярнішого браузера — Google Chrome.

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

Google Chrome Extension — програмне розширення можливостей браузера Google Chrome. Вони створюються за допомогою JavaScript, HTML та CSS. При цьому, у розробника відкривається доступ до Chrome API, де можна працювати з вкладками, закладками, керувати завантаженнями та історією переглядів. Є можливість навіть змінювати налаштування браузера або керувати та комунікувати з іншими розширеннями, та ще багато чого іншого.

По суті, це ще один тип застосунків, десь на рівні вебсайтів, мобільних або десктопних програм, хоч і менш популярний. Найцікавішим з погляду front-end-розробників є те, що для освоєння та написання Chrome-розширень не потрібні додаткові знання. В цій статті я покажу як за допомогою HTML, CSS, JavaScript та улюбленої бібліотеки або фреймворку (React, Vue, Svelte, Solid, Lit...) створити таке розширення.

Покрокова відео інструкція зі створення розширення:

Навіщо вивчати створення Chrome Extensions

• Знання їсти не просять. Інвестувавши мінімум часу та зусиль, ви засвоюєте ще один тип застосунків. Seniority розробника, збільшуємо експертизу.
• Додаткові пропозиції на фриланс. Якщо шукаєте замовлення на UpWork чи Fiverr — це додаткові можливості. Конкуренція, порівняно зі звичайним створенням сайтів, менша, а робота по суті та ж сама.
• У вашій компанії може бути проєкт або замовлення на створення Chrome-розширення, а ви уже експерт в цій галузі.
• Для власних потреб. Покращити функції браузера або улюбленого сайту.

Типова структура розширення

1. Popup-вікно, максимум 800×600 пікселів. Воно відкривається при кліку на іконку розширення у верхньому правому куті — там, де список закріплених розширень.
2. Content scripts — безпосередньо JavaScript та CSS, що ви можете вбудовувати в уже відкриті сторінки (таби) в браузері.
3. Sidebar panel дає налаштовувати бокову панель браузера.
4. Developer tools — дозволяє додавати нову вкладку в інструментах розробника. Хто дебажив React, Redux або GpahQL Apollo — точно ставив додаткові розширення і бачив як вони працюють.
5. Options — повноцінна сторінка (таб) вашого розширення. Якщо не вистачає Popup або хочете дати можливість якихось налаштувань, або вивести додаткову інформацію.
6. New tab — кастомізація нової (порожньої) вкладки браузера.
7. Background — Service worker, такий центральний обробник подій. Відкриття-закриття вкладок, кліки на нотифікації, робота з мережею, отримання та виправляння повідомлень від та до інших компонентів розширення — і це ще не всі його можливості. Його також можна використовувати як стейт- або event-менеджер. З особливостей: це не той web service worker, до якого багато хто звик, особливо якщо працювали з Progressive Web Apps; також він не має доступу до DOM.

Більше про можливості роботи з браузером та вебсторінками можна дізнатися на офіційній сторінці документації.

Найпростіше розширення

Варіант найпростішого розширення складатиметься усього з тьох файлів:

• manifest.json — тут зазначається уся необхідна інформація про розширення. Наприклад, автор, опис, шляхи до файлів, версія маніфесту та самого розширення. Це основний файл;
• popup.html — контент, що будемо показувати в попап-вікні після кліку на іконку розширення;
• icon.png — сама іконка, яка буде в панелі списку розширень браузера.

Код можна знайти в GitHub-репозиторії.

Складніший шаблон розширення

Створюватимемо розширення за допомогою генератора create-chrome-ext. Це простіше і швидше, аніж писати на чистому HTML, JS, CSS. Згенеруємо шаблон з усім потрібними компонентами на улюбленому фреймворку та Vite.

Для суперпростих розширень можна і не використовувати Vite + React. Проте я вже казав, що це, по суті, вебсайт, але у вікні 800×600. Для складніших розширень уже може виникнути потреба в управлінні стейтом, зручній роботі з даними та UI-елементами, а писати усе це на Vanilla JS не так і зручно.

Файлова структура розширення, створеного за допомогою create-chrome-ext, уже більше схожа на типовий React-застосунок. Хто хоч раз створював сайт за допомогою Vite, упізнає ці файли.

Файлова структура розширення, створеного з create-chrome-ext

Кожна тека відповідає своєму компоненту розширення, яке ми уже розглянули вище.

Локальна розробка

Мені подобається процес запуску розширень локально, особливо це зручно для початківців. Не потрібно витрачати багато часу.

Крок 1. Білдимо проєкт за допомогою команди npm run build. Отримаємо build-теку в нашому проєкті. На зображенні вище вона уже присутня.

Крок 2. Переходимо на сторінку управління розширеннями у браузері chrome://extensions/ або через меню Extensions → Manage Extensions.

Крок 3. Вмикаємо Developer Mode:

Крок 4. Завантажуємо файли розширення, натиснувши Load unpacked:

Крок 5. Розширення є у списку розширень. Можна його запінити на панель браузера для зручного доступу під час розробки.

Debugging та помилки

Помилки можна подивитися двома способами:

• На сторінці управління біля вашого розширення буде посилання на звичайну Developer Console:

Приклад з мого реального опублікованого розширення

• Другий варіант — опція Inspect у Popup-вікні. Також відкривається консоль:

Приклад з мого реального опублікованого розширення

Між ними є невелика різниця. Інспектор попап-вікна показує лише помилки самого Popup та автоматично закривається, коли вікно закривається або перевантажується після внесення змін. Не дуже зручно працювати.

Інспектор Service Worker показує як свої помилки, можна сказати помилки back-end, так і помилки Popup або інших складових. Відповідно він і не закривається під час зміни коду або закриття вікна розширення.

Публікація розширення

Варто зазначити — публікується саме архів нашого розширення. Потрібно стиснути build-теку. Можна використати будь-який встановлений архіватор або виконати команду npm run zip. В усіх способах обов’язково варто перевірити вміст архіву, щоб там були усі необхідні файли. Я двічі отримував відмову в оновленні розширення лише тому, що команда zip пропустила необхідні файли

Коли є архів, переходимо у Dev Console магазину розширень. Побачите список своїх розширень — ймовірно, у вас він порожній. Додаємо нове, кнопка праворуч у верхньому кутку.

Головна сторінка Dev Console

Наступним кроком потрібно заповнити відповідні поля.

Важливим є опис прав Permission justification. Ці права ми описували у manifest.json — це усі можливості нашого розширення, на які користувач дає згоду. Їх повинно бути мінімум і не можна додавати «на майбутнє». Якщо щось не використовується у коді — не додаємо. Це, до речі, одна з потенційних причин відмови у публікації.

Реальний приклад

Чому я вирішив створити своє розширення? Дружина пише статті на Medium, а в них аналітика просто жах. Їй було недостатньо інформації.

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

Трішки ознайомившись із запитами, написав клієнта (Service worker) — наш background.js, про який я уже згадував. Він робить запити на сервер, кешує дані, парсить та повертає у потрібному форматі. Залишаться лише вивести цю інформацію. Тут вже свою роботу виконує React.

Знайти моє розширення можна за посиланням — Medium Stats.

Дякую за увагу!

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

Підписуйтесь на мій YouTube-канал. Ділюсь там своїм досвідом, а його у front-end-розробці уже понад 11 років.

Якщо уже створювали розширення для себе — напишіть в коментарях, що вони роблять.