Як створити Chrome-розширення без коду: мій досвід з Google AI Studio

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

У мене абсолютно немає досвіду в програмуванні. Моя основна діяльність — автоматизація бізнес-процесів, і раніше для створення будь-яких кастомних рішень я наймав технічних спеціалістів.

Хто хоч раз працював з розробниками, той зрозуміє мій біль: пишеш детальне ТЗ, здається все зрозуміло, а отримуєш продукт, який виглядає зовсім не так, як уявляв. Починаються ітерації, правки, виправлення…

Знайомство з Google AI Studio (Antigravity)

Платформа Google AI Studio (раніше Antigravity) змінила правила гри. Це інструмент, який дозволяє створювати застосунки просто розмовляючи з AI, як з другом.

Я пробував інші платформи — Cursor та подібні. Але Google AI Studio вразив своєю легкістю, зручністю і безкоштовним планом для особистого користування.

Що потрібно для старту

Переходите на сайт Google AI Studio, вибираєте один з планів:

  • Individual Plan — безкоштовно (з обмеженнями по токенах)
  • Developer Plan — потребує підписки Google One (900 грн/міс, перший місяць безкоштовно)
  • Team Plan — через Google Workspace

Для тестування та створення особистих проєктів безкоштовного плану цілком достатньо.

Практичний кейс: розширення для Upwork

Оскільки зараз я багато працюю на Upwork, вирішив створити застосунок, який полегшить щоденну роутину.

Завдання

При оптимізації профілю на Upwork важливо досліджувати категорію та related queries (пов’язані пошукові запити). Зазвичай вони знаходяться внизу сторінки в блоці “People also search for”.

Мені потрібен був інструмент, який:

  • Автоматично збирає ці ключові слова
  • Показує їх у зручному вікні
  • Дає можливість скопіювати одним кліком

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

Як працює Google AI Studio

Інтерфейс складається з трьох частин:

  1. Ліва панель — файли та артефакти, з якими працюєте
  2. Центральна консоль — код та деталі проєкту
  3. Права панель — чат з AI-агентом

Є два режими роботи:

  • Plan — агент спочатку планує структуру, пояснює кроки і чекає підтвердження
  • Fast — виконує задачі без попереднього узгодження

Вибір моделі

Доступні різні моделі: Claude, GPT, Gemini. Я працював переважно з Gemini Flash — найбільша кількість токенів і якісний результат.

Процес створення: як це було насправді

Крок 1: Підготовка

Створюєте папку для проєкту, відкриваєте її в AI Studio. Система запитає, чи довіряєте цій папці — адже агент працюватиме з файлами всередині.

Порада: завжди робіть бекапи після вдалих правок.

Крок 2: Перша комунікація

Не намагайтесь одразу описати весь кінцевий результат. Декомпозуйте задачу:

  • Опишіть загальну картинку
  • Рухайтесь покроково
  • Точково вносьте правки

Я написав агенту українською (так, не обов’язково англійською):

“Треба створити Chrome-розширення для збору related queries з Upwork”

Крок 3: План і виконання

Агент проаналізував задачу, запропонував план:

  • Які файли потрібні
  • Яку структуру використає
  • Як працюватиме застосунок

Я перевірив план і дав дозвіл: “Окей, зроби”.

За кілька хвилин було написано три файли з кодом — 77, 110 і 140 рядків. У мене на це пішло б усе життя.

Крок 4: Тестування

Встановив розширення в Chrome через режим розробника. Натиснув — і… нічого не відбулося.

Повернувся до AI і написав:

“При натисканні нічого не відбувається. Зроби випадне вікно з ключами та кнопкою копіювання”

Агент виправив код. Знову тестую — вікно з’явилось, але дані не збираються.

Крок 5: Ітерації та виправлення

Далі була серія правок:

  • Додав скріншот, як виглядають ключі на сторінці
  • Прикріпив PDF з інструкцією
  • Показав частину коду зі сторінки через DevTools Network

Деякі правки займали більше часу. Іноді доводилось змінювати модель з Flash на Pro для складніших задач.

Це важливий момент: я показую процес таким, який він є. Без “магічних” відео, де все працює з першого разу. У реальності завжди є нюанси, помилки, правки.

Крок 6: Результат

Після декількох спроб я отримав саме те, що планував:

  • Розширення автоматично збирає related queries
  • Показує їх у зручному списку
  • Дозволяє скопіювати одним кліком

Тепер при пошуку на Upwork я одразу бачу пов’язані ключові слова, не спускаючись вниз сторінки.

Що я зрозумів у процесі

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

Про комунікацію з AI:

  • Пишіть помилками — не страшно
  • Можна навіть надиктовувати (англійською це працює чудово)
  • Давайте контекст: скріншоти, приклади коду, інструкції
  • Чим точніші приклади — тим краще результат

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

Практичне застосування

Цей застосунок — лише один приклад. За допомогою Google AI Studio я створив вже більше 100 автоматизованих процесів для різних галузей: від магазинів до агенцій.

Маючи досвід роботи з платформами автоматизації (n8n, Make.com), я розумію цінність інструментів, які економлять час.

Chrome-розширення для Upwork:

  • Економить 5-10 хвилин на кожному дослідженні
  • Допомагає швидше аналізувати конкуренцію
  • Покращує якість оптимізації профілю

Поради для початківців

Не опускайте руки при перших невдачах. Якщо щось не працює:

  1. Зробіть скріншот помилки
  2. Опишіть, що очікували побачити
  3. Додайте приклади правильної роботи
  4. Змініть модель, якщо результат незадовільний

Робіть бекапи після кожної вдалої версії.

Враховуйте правила платформ, з якими працюєте — ваш застосунок не повинен порушувати Terms of Service.

Висновок

Створення застосунків без коду — це вже не фантастика. Google AI Studio робить розробку доступною кожному, хто вміє чітко формулювати задачі.

Програми, які я раніше бачив як “маленькі світи” з фантастичними можливостями, тепер можу створювати сам. Просто розмовляючи з AI.

Пробуйте, тестуйте, автоматизуйте свої процеси. Це економить час і робить роботу комфортнішою.

Залишити коментар

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

Прокрутка до верху