Як створити сторінку налаштувань розширення Chrome

Коротка відповідь

Оголосіть HTML-сторінку через options_ui, завантажуйте збережені значення поверх явних типових і показуйте «Збережено» лише після успішного запису. Сторінка параметрів є сторінкою розширення; вона може звертатися до сховища напряму без воркера лише для запису.

Відокремте постійні параметри від тимчасових елементів. Типова величина збільшення тексту може бути параметром; вибрана знахідка — стан перегляду звіту. LocaleStress описує CSS-виключення й необов’язкову історію як конкретні приклади конфігурації. Не перетворюйте кожен тимчасовий стан кнопки на синхронізований параметр.

Практичні кроки реалізації

1. Додайте options_ui.page із open_in_tab: true для повної вкладки або свідомо виберіть вбудовану поверхню. Оголосіть storage і пакуйте скрипти сторінки. Відкривайте її через керування розширенням або chrome.runtime.openOptionsPage().
2. Визначте типові значення в одному чистому модулі. Це резервні значення, а не причина перезаписувати параметри при кожній події встановлення. Відсутні, неправильні й старі поля потребують різної обробки.
3. Перевіряйте введення під час виконання. Перелік має приймати лише відомі значення; CSS-селектор перевірте синтаксично перед використанням. Показуйте помилки біля поля й зберігайте введене значення для виправлення.
4. Визначте час застосування: негайно до активних сторінок, при наступному запуску чи після перезавантаження. Запис і застосування — окремі операції. Для оновлення активних контекстів обробляйте storage.onChanged або надсилайте вузьке повідомлення.
5. Точно визначте скидання. Видаляйте лише ключі цієї сторінки; storage.local.clear() може стерти звіти, історію та записи інших функцій. Окремо підтверджуйте руйнівне видалення історії й скидання параметра.

Для кількох відкритих вкладок не записуйте цілий застарілий об’єкт після редагування одного поля. Зберігайте незалежні ключі або запровадьте явну версію та обробку конфліктів. Chrome storage асинхронне й не є транзакційною базою для багатьох авторів.

Приклад реалізації

Фрагмент маніфесту оголошує сторінку у вкладці. Скрипт очікує select #expansion, форму #settings і статус #status; записує лише дозволені величини.

{
  "options_ui": { "page": "options.html", "open_in_tab": true },
  "permissions": ["storage"]
}

const field = document.querySelector("#expansion");
const form = document.querySelector("#settings");
const status = document.querySelector("#status");
chrome.storage.local.get({ expansion: 30 }).then(({ expansion }) => {
  field.value = String(expansion === 50 ? 50 : 30);
}).catch(() => { status.textContent = "Could not load settings."; });

form.addEventListener("submit", async (event) => {
  event.preventDefault();
  const expansion = Number(field.value);
  if (![30, 50].includes(expansion)) {
    status.textContent = "Choose 30 or 50 percent.";
    return;
  }
  try {
    await chrome.storage.local.set({ expansion });
    status.textContent = "Saved for the next run.";
  } catch {
    status.textContent = "Could not save. Try again.";
  }
});

У повному UI вимкніть надсилання під час початкового завантаження й запису, щоб повільне читання не замінило нове введення. Для відмови завантаження залиште видиму дію повторення. Це приклад параметра за доступними величинами продукту, а не копія коду LocaleStress.

Компроміси та альтернативи

Локальне сховище підходить для параметрів пристрою й більших записів. Sync використовуйте лише для малих вподобань, доречних на різних пристроях; обробляйте недоступність і квоти. Звичайної HTML-форми часто достатньо. React корисний для складних залежних параметрів, але не замінює перевірку й обробку помилок сховища.

Автозапис зменшує кількість натискань, але потребує debounce й чіткої відмови. Кнопка Save полегшує перегляд і підтвердження групи змін. У кожному варіанті поясніть межі й час застосування.

Поширені помилки

• Очищати все сховище для скидання одного параметра.
• Записувати неправильні селектори чи невідомі значення переліку.
• Стверджувати застосування лише після успішного запису.
• Перезаписувати всі параметри із застарілої другої вкладки.
• Зберігати секрети у sync або звичайних експортних файлах.

Контрольний список випуску

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

Поширені запитання

Чи може контентний скрипт відкрити параметри напряму?

Використайте вузьке runtime-повідомлення контексту розширення, який викликає openOptionsPage(), якщо скрипту бракує API.

Чи записувати типові значення при кожному запуску?

Ні. Читайте з резервними значеннями й мігруйте свідомо. Повторні записи можуть замінити вибір користувача.

Що користувачу потрібно знати перед записом?

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

Первинні джерела

• Параметри для користувачів
• API сховища
• API Runtime

Пов’язані посібники та приклади

• Тематичний розділ
• Як створити розширення Chrome з Manifest V3
• Структура проєкту розширення Chrome, що масштабується
• Як написати файл manifest.json для Manifest V3
• CSS-виключення й необов’язкова історія LocaleStress