TLDR: Шаблон тут https://github.com/5tigerjelly/chrome-extension-react-template
У цьому дописі я поділюсь своїм досвідом створення розширення для Chrome — від використання чистого HTML, JS і CSS до міграції на React і використання Vite для компіляції. Цей шлях був сповнений викликів, уроків і врешті-решт рішення, яке, сподіваюся, допоможе іншим у схожих ситуаціях.
Фото Орісси Хьюмс на Unsplash
Початок роботи з чистим HTML, JS і CSS
Коли я тільки починав, я слідував офіційній документації Google, яка надавала приклади на чистому HTML, JS і CSS. Цей підхід добре працював для налаштування основних функцій. Документація була зрозуміла і допомогла мені зрозуміти основи розширень для Chrome. Мені вдалося створити просте розширення, яке виконувало потрібні мені завдання.
Однак, коли я заглибився в більш складні функції, я зрозумів, що робота з чистим HTML, JS і CSS має свої обмеження, особливо в аспектах підтримуваності та масштабованості.
Однією з суттєвих проблем було управління файлом маніфесту, особливо після нещодавньої міграції з версії маніфесту 2 на версію 3. Файл маніфесту є важливим для визначення дозволів, фонових скриптів та інших налаштувань для розширення Chrome. Перехід на версію 3 приніс кілька змін, які не є сумісними з попередніми версіями, що означало, що багато блогів та відповідей на Stack Overflow посилались на стару версію, що ускладнювало пошук релевантних рішень. Я витратив значну кількість часу на оновлення мого файлу маніфесту і переконався, що він відповідає новим вимогам.
Попри ці труднощі, я зміг вирішити більшість питань і продовжити роботу над проєктом.
Фото від Scott Webb на Unsplash
Додавання сторонніх інструментів для аутентифікації та зберігання даних
Мені потрібно було впровадити аутентифікацію, і спочатку я розглядав використання Supabase. Supabase — це чудовий інструмент для швидкого додавання аутентифікації та інших бекенд-сервісів до проєкту. Однак деякі функції, які я потребував, не підтримувались, а ціни були занадто високі для моїх потреб. Наприклад, я потребував більш детальних налаштувань доступу та зберігання файлів, що було занадто дорого з Supabase. Це змусило мене пошукати інші варіанти. Я розгляну свій досвід із Supabase детальніше в іншому дописі, оскільки це був цінний досвід, який може бути корисним для інших, хто його вивчає.
З огляду на мій досвід роботи з Firebase у попередніх проєктах, я вирішив реалізувати аутентифікацію за допомогою веб SDK Firebase.
Firebase пропонує потужний набір інструментів для аутентифікації, управління базами даних та інших задач. Однак це рішення призвело до неочікуваних проблем. Веб SDK Firebase не підтримує vanilla JS добре, а в поєднанні з суворими обмеженнями завантаження контентних скриптів в Chrome розширеннях, я зіткнувся з проблемами, які не зміг вирішити. Основна проблема полягала в тому, як Firebase ініціалізує та аутентифікує користувачів, що конфліктувало з політиками безпеки контенту, які накладаються на розширення Chrome. Я пробував різні підходи, включаючи завантаження бібліотеки Firebase локально та її запуск, але нічого не працювало. Це стало значним відставанням і фруструючим досвідом.
Добре, використаю React
Після того як я витратив цілий день на виправлення помилок, я вирішив мігрувати свій проєкт на React. React — це потужна бібліотека для створення інтерфейсів користувача, і я успішно використовував її в інших проєктах. Використовуючи ChatGPT, я перевів свій vanilla JS код на React.
Ця перехідна фаза принесла свої проблеми, особливо при створенні та запуску додатка. Мені довелося переписати багато коду, щоб він відповідав компонентній архітектурі React, і виникли проблеми, пов'язані з управлінням станом і методами життєвого циклу, які зайняли деякий час для вирішення. Після того, як я виправив ці проблеми, я використовував Webpack для компіляції React-додатка для Chrome. На жаль, я зіштовхнувся з постійними проблемами компіляції, які було складно відлагодити.
Немає нічого кращого, ніж провести вихідні, мігруючи свій власний проект
Я ніколи не чув про Vite до сьогодні
Vite на допомогу
Під час дослідження я дізнався, що багато розробників зіткнулися з подібними проблемами в Webpack при компіляції для розширень Chrome. Складність і витрати на налаштування Webpack ускладнили отримання бездоганної роботи. Саме тоді я знайшов Vite.
Vite — це інструмент нового покоління для фронтенду, який пропонує швидшу компіляцію та простіше налаштування порівняно з Webpack. Vite вирішив усі мої проблеми і працював відразу після налаштування. Я слідував інструкціям на їхньому сайті, і за лічені хвилини все запрацювало. Налаштування було надзвичайно плавним, і я зміг зосередитися на розробці функцій, а не на боротьбі з інструментами для компіляції. ChatGPT допоміг мені згенерувати мінімальний код, необхідний для запуску додатка як розширення Chrome, що значно спростило процес.
Створення нового проекту з Vite
npm create vite@latest my-chrome-extension --template react-ts
cd my-chrome-extension
npm install vite-plugin-static-copy
**Створення файлу manifest.json.
Розмістіть файл у папці ‘public’
{
"manifest_version": 3,
"name": "React Chrome Extension",
"version": "1.0.0",
"description": "Простий React додаток як розширення Chrome",
"action": {
"default_popup": "index.html"
},
"permissions": []
}
Створення файлу vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { viteStaticCopy } from 'vite-plugin-static-copy';
export default defineConfig({
plugins: [
react(),
viteStaticCopy({
targets: [
{
src: 'public/manifest.json',
dest: '.',
}
],
}),
],
build: {
outDir: 'build',
rollupOptions: {
input: {
main: './index.html',
},
},
},
});
Збірка React додатку за допомогою Vite
npm run build
Ви побачите нову директорію під назвою build/, яка містить необхідні файли для створення додатку розширення для Chrome.
Після успішної збірки перейдіть до chrome://extensions/, увімкніть режим розробника та натисніть 'Завантажити без упаковки', вибравши директорію build, що була щойно створена!
Vite + React працюють як повинні 🙂
Висновок
Щоб допомогти майбутнім розробникам уникнути тих самих проблем, я створив репозиторій шаблону, який кожен може форкнути та будувати проекти на його основі. Шаблон містить базову настройку для розширення Chrome з використанням React і Vite, з усіма необхідними конфігураціями та скриптами. Надаючи цей шаблон, я сподіваюся заощадити інший час і нерви, які я витратив. Репозиторій добре документований і містить покрокові інструкції для початку роботи. Сподіваюся, що цей блог допоможе тим, хто потребує допомоги.
Щасливого кодування 🙂
Перекладено з: Creating a Chrome Extension with React and Vite (Boilerplate provided)