Як створити спливний інтерфейс розширення Chrome

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

Спливне вікно розширення Chrome — HTML-сторінка, яку відкриває кнопка панелі. Воно закривається після переходу фокуса назовні, тому щоразу ініціалізуйте його з поточного стану й зберігайте тривалу роботу деінде. Вікно має володіти наступною командою, її безпосереднім результатом і переходом на більшу поверхню.

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

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

1. Оголосіть action.default_popup і створіть зазначений HTML-файл. Додайте явні підписи, нативні кнопки, видимий стан і зовнішній скрипт. Виберіть практичну ширину, яка вміщує перекладені підписи й масштабування браузера.
2. Вимкніть дії без початкових даних. Читайте лише потрібні поля; відсутній параметр використовує явне типове значення, а недоступне сховище має показувати відмову.
3. Підключайте обробники один раз за відкриття. Дочекайтеся запису або підтвердження повідомлення перед оголошенням успіху. Якщо воркер лише прийняв завдання, скажіть «Розпочато», а не «Завершено».
4. Перенесіть довгі звіти у вкладку розширення чи бічну панель. Публічний опис LocaleStress відокремлює керування запуском від перегляду звітів та експорту — корисне рішення для інформації, що перевищує невелике вікно.
5. При повторному відкритті відновіть стан зі сховища або запитайте стан завдання. Spinner попереднього вікна більше не існує. Не обіцяйте скасування чи завершення фонової роботи після закриття без відповідної реалізації.

Перевірте порядок фокуса, його видимість, довгий текст, порожні результати й відмову або втрату зв’язку повідомлення. Натисніть правою кнопкою у вікні для його власної консолі. Відрізняйте її від консолей сторінки та воркера.

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

За дозволу storage, checkbox #highlights із підписом, кнопки #save та елемента #status із role="status" цей скрипт підтверджує запис, а не лише натискання.

const toggle = document.querySelector("#highlights");
const save = document.querySelector("#save");
const status = document.querySelector("#status");
save.disabled = true;

chrome.storage.local.get({ highlights: true }).then(({ highlights }) => {
  toggle.checked = highlights === true;
  save.disabled = false;
}).catch(() => { status.textContent = "Settings could not be loaded."; });

save.addEventListener("click", async () => {
  save.disabled = true;
  status.textContent = "Saving…";
  try {
    await chrome.storage.local.set({ highlights: toggle.checked });
    status.textContent = "Saved.";
  } catch {
    status.textContent = "Save failed. Try again.";
  } finally {
    save.disabled = false;
  }
});

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

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

Вікно зручне для короткого вибору; бічна панель — для тривалого порівняння; повна вкладка — для таблиці чи попереднього перегляду експорту. Вибирайте за тривалістю завдання й обсягом інформації. Фреймворк допомагає зі складним відображенням, але не може зберегти вікно після натискання назовні.

Локальне збереження не потребує облікового запису. Синхронізація малого параметра може переносити його з профілем браузера за доступної синхронізації й у межах квот. Жоден варіант не є захищеним сховищем секретів.

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

• Очікувати, що вікно залишиться відкритим до завершення асинхронної роботи.
• Показувати «Збережено» до успішного завершення запису.
• Завантажувати скрипти CDN для розробки у робочу сторінку розширення.
• Обрізати єдине пояснення відмови.
• Покладатися на пам’ять вікна для підтвердженого параметра.

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

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

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

Чи можна заборонити закриття вікна?

Ні. Використовуйте бічну панель або вкладку, якщо завдання потребує постійної видимості.

Чи має вікно слухати зміни сховища?

Так, якщо інша активна поверхня може змінити показаний параметр. Прибирайте слухачі під час демонтування подання фреймворком.

Яке остаточне рішення для UI?

Залиште у вікні одну основну дію та чесний результат. Складний перегляд перенесіть на поверхню, доступну під час взаємодії зі сторінкою.

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

• Додавання вікна
• API Action
• Політика безпеки розширення
• Роль ARIA status

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

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