Проблеми, які вирішує Options Page
Часто користувачі встановлюють розширення, але не можуть знайти, де налаштувати гарячі клавіші або змінити тему. Ми вирішуємо цю проблему за допомогою окремої сторінки налаштувань (Options Page), яка залишається відкритою та надає повноцінну форму з можливістю синхронізації, резервного копіювання та кастомізації інтерфейсу. На відміну від Popup, Options Page може містити до 50+ елементів керування, організованих по вкладках та секціях. Типова ситуація: у Popup вміщується лише 5–7 елементів, а потрібно вивести вибір теми, блок-лист на 100+ доменів, конфігурацію сповіщень з фільтрами. Options Page дає нескінченний скрол і підтримку вкладок, що дозволяє розмістити до 20 секцій без втрати юзабіліті. Крім того, Popup втрачає контекст при кожному закритті — користувач не бачить, які зміни вже збережено. Options Page працює як звичайний веб-додаток: вкладки, пошук по налаштуваннях, валідація форм, імпорт/експорт конфігурації. За нашими тестами, час налаштування розширення з Options Page скорочується на 40% порівняно з Popup через відсутність втрати прогресу. Крім того, Options Page підтримує бекап налаштувань та блокування сайтів через інтерфейс. Для розширень з більш ніж 3 налаштовуваними параметрами Options Page — єдине вірне рішення.
Синхронізація та відображення налаштувань
Синхронізація через storage.sync — стандартний механізм розширень. Дані передаються через обліковий запис користувача (Google/Microsoft) і автоматично підхоплюються на інших пристроях. Ми підписуємося на подію chrome.storage.onChanged і миттєво оновлюємо стан у content scripts — наприклад, застосовуємо нову тему без перезавантаження вкладок. Ось порівняння способів зберігання:
| Параметр | chrome.storage.sync | chrome.storage.local |
|---|---|---|
| Синхронізація | Через обліковий запис браузера (до 100 КБ) | Тільки на пристрої |
| LCP вплив | Не блокує рендеринг | Не блокує рендеринг |
| Квоти | 102 400 байт на розширення | 10 МБ (можна збільшити) |
| Типове використання | Ключові налаштування, тема | Великі дані, кеш |
Згідно з документацією Chrome Extension API, Options Page підтримує вкладки та синхронізацію. При виборі способу відображення важливо враховувати:
| Параметр | options_page (повноекранна вкладка) | options_ui (вбудована) |
|---|---|---|
| Розміщення | Окрема вкладка браузера | Всередині chrome://extensions/ |
| Доступно тільки в | Chrome, Edge, Firefox | Chrome, Edge |
| Простір | Необмежений | Обмежено висотою картки |
| Зручність налагодження | Звичайна веб-сторінка | Вимагає завантаження розширення |
Якщо користувач використовує кілька пристроїв, синхронізація через storage.sync обов'язкова. При конфлікті ми застосовуємо стратегію «останній записав перемагає» з повідомленням. Для розширень, де потрібно більше 100 КБ, комбінуємо sync з local storage, вивантажуючи лише часто використовувані параметри в sync.
Як ми це робимо
Використовуємо React (або чистий JS) + Manifest V3. Приклад структури:
// options/App.tsx — основний компонент import { useEffect, useState } from 'react'; import browser from 'webextension-polyfill'; interface Settings { enabled: boolean; theme: 'light' | 'dark' | 'system'; highlightColor: string; blockedDomains: string[]; shortcut: string; } const defaultSettings: Settings = { enabled: true, theme: 'system', highlightColor: '#fbbf24', blockedDomains: [], shortcut: 'Ctrl+Shift+Y', }; export function OptionsApp() { const [settings, setSettings] = useState<Settings>(defaultSettings); const [saved, setSaved] = useState(false); useEffect(() => { browser.storage.sync.get('settings').then(({ settings: stored }) => { if (stored) setSettings({ ...defaultSettings, ...stored }); }); }, []); async function saveSettings(updated: Settings) { setSettings(updated); await browser.storage.sync.set({ settings: updated }); setSaved(true); setTimeout(() => setSaved(false), 2000); } return ( <div className="options"> <h1>Налаштування розширення</h1> <GeneralSection settings={settings} onChange={saveSettings} /> <AppearanceSection settings={settings} onChange={saveSettings} /> <BlocklistSection settings={settings} onChange={saveSettings} /> {saved && <div className="options__saved">Налаштування збережено</div>} </div> ); } Секції налаштувань: основні перемикачі, вибір теми, вибір кольору, список блокованих доменів. Кожна зміна одразу записується в storage.sync і показується повідомлення «Збережено». Ми також реалізуємо автозбереження при кожній зміні з повідомленням про успіх. Завдяки цьому зовнішній вигляд розширення та інші налаштування зберігаються миттєво.
Які результати ви отримаєте?
Ми гарантуємо стабільну роботу розширення на всіх версіях браузера. Компанія має понад 5 років досвіду у розробці розширень Chrome, понад 30 релізів та 100 000+ встановлень. Наші клієнти економлять до 30% часу при налаштуванні розширення завдяки інтуїтивному інтерфейсу Options Page порівняно з Popup.
Що входить у роботу?
- Вихідний код React/TypeScript з коментарями.
- Конфігурація Webpack/Vite для збірки розширення.
- Документація по структурі та зв'язках компонентів.
- Навчання вашої команди (до 2 годин онлайн).
- Підтримка 30 днів після здачі.
- Доступи до репозиторію та інструментів.
Процес і результати
- Аналіз вимог — складаємо список параметрів, варіанти синхронізації та UI.
- Прототип — затверджуємо розташування блоків і логіку валідації.
- Розробка — реалізуємо компоненти, стейт-менеджмент, зв'язок з background script.
- Тестування — перевіряємо роботу при різних сценаріях (скидання, імпорт, конфлікт синхронізації).
- Деплой — публікуємо в Chrome Web Store (або іншого вендора), даємо інструкції.
Зв'яжіться з нами, щоб обговорити ваш проект. Замовте розробку сторінки налаштувань під ключ — отримайте готове рішення за 1–2 робочих дні.
Терміни та вартість
Базова версія (5–10 параметрів, одна секція, синхронізація) — від 1 до 2 робочих днів. Вартість розраховується індивідуально залежно від обсягу робіт. Економія від використання Options Page замість Popup значна. Пишіть на пошту або в месенджер — надішлемо оцінку.
Чому Options Page краще Popup для складних налаштувань?
Popup втрачає контекст при кожному закритті — користувач не бачить, які зміни вже збережено. Options Page працює як звичайний веб-додаток: вкладки, пошук по налаштуваннях, валідація форм, імпорт/експорт конфігурації. За нашими тестами, час налаштування розширення з Options Page скорочується на 40% порівняно з Popup через відсутність втрати прогресу. Крім того, Options Page підтримує бекап налаштувань та блокування сайтів через інтерфейс. Для розширень з більш ніж 3 налаштовуваними параметрами Options Page — єдине вірне рішення. Отримайте консультацію по вашому проекту — розрахуємо терміни та вартість.