Реалізація Options Page (сторінки налаштувань) браузерного розширення

Реалізація Options Page (сторінка налаштувань) браузерного розширення

Options Page — окремана сторінка розширення для управління налаштуваннями. На відміну від Popup, вона не закривається сама по собі та має повноекранне місце. Відкривається через chrome.runtime.openOptionsPage() або з меню розширень браузера.

Два режими відображення

Повноекранна сторінка (options_page) — відкривається в окремій вкладці браузера. Більше місця, знайомий інтерфейс.

Вбудована в браузер (options_ui) — відкривається прямо в chrome://extensions/ в нижній частині карточки розширення. Тільки у Chrome/Edge.

{
  "manifest_version": 3,
  "options_page": "options/options.html",

  // АБО (взаємовиключаючі):
  "options_ui": {
    "page": "options/options.html",
    "open_in_tab": false
  }
}

open_in_tab: false — показувати в chrome://extensions/. open_in_tab: true — відкривати в новій вкладці (як options_page).

Структура React-застосунку налаштувань

// 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[];
}

const defaultSettings: Settings = {
  enabled: true,
  theme: 'system',
  highlightColor: '#fbbf24',
  blockedDomains: [],
};

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>

      <section className="options__section">
        <h2>Основне</h2>
        <label>
          <input
            type="checkbox"
            checked={settings.enabled}
            onChange={e => saveSettings({ ...settings, enabled: e.target.checked })}
          />
          Розширення активне
        </label>
      </section>

      <section className="options__section">
        <h2>Зовнішній вид</h2>
        <label>
          <span>Тема</span>
          <select
            value={settings.theme}
            onChange={e => saveSettings({ ...settings, theme: e.target.value as Settings['theme'] })}
          >
            <option value="system">Системна</option>
            <option value="light">Світла</option>
            <option value="dark">Тривра</option>
          </select>
        </label>
      </section>

      {saved && <div className="options__saved">Налаштування збережено</div>}
    </div>
  );
}

Найкращі практики

• Використовувати chrome.storage.sync для налаштувань користувача (cross-device синхронізація через Google акаунт)
• Валідувати вхідні дані на сервері, якщо можливо
• Показувати миттєвий зворотний зв'язок при збереженні налаштувань
• Організувати в логічні секції
• Підтримувати навігацію з клавіатури

Терміни

Проста сторінка налаштувань: 2–3 дні. Розширена з синхронізацією, імпортом/експортом, темами: 5–7 днів.