Розширення з бічною панеллю Chrome: архітектура й налаштування

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

Бічна панель — сторінка розширення поруч із поточною вкладкою. Оголосіть side_panel.default_path і дозвіл sidePanel, потім визначте відкриття користувачем. Це зручна поверхня для тривалого порівняння чи інспектора, бо натискання сторінки не закриває її, як вікно.

Панель не є вебсторінкою. Вона не може читати DOM сайту через власний document; використовуйте результати контентного скрипту або дозволене впровадження. Явно виберіть глобальну чи прив’язану до вкладки поведінку й позначайте документ-джерело результатів.

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

1. Пакуйте panel.html, скрипти й стилі; API доступне з Chrome 114, а програмний open() — з Chrome 116. Встановіть мінімальну сумісність за фактичними API.
2. Для керування з панелі браузера налаштуйте openPanelOnActionClick. Не обіцяйте одночасно спливне вікно для тієї самої кнопки; виберіть одну зрозумілу основну поверхню.
3. Для умовної доступності використовуйте setOptions з ідентифікатором вкладки й enabled. Якщо перевіряєте URL для рішення, запитайте лише потрібний доступ до конфіденційних властивостей вкладки. Сам sidePanel не надає довільного доступу до сторінок.
4. Визначте поведінку при зміні активної вкладки. Глобальна панель може показувати попередній результат; вкладкова — мати окремий екземпляр. Зберігайте ідентичність вкладки й документа з результатом та показуйте застарілість або недоступність після навігації.
5. Зберігайте постійні параметри у сховищі, тимчасове виділення в панелі, а DOM-посилання — у контентному скрипті. Закриття може знищити подання; повторне відкриття має відновлювати лише дані з відповідною ідентичністю.

Інспектор шрифтів може виграти від постійних елементів під час руху сторінкою, але запис Font Picker не доводить використання Side Panel API. Це приклад взаємодії, а не підтверджена реалізація.

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

Мінімальна глобальна панель може використати вбудовану поведінку кнопки Chrome. Розмістіть другий блок у воркері; він не потребує читання URL вкладки.

{
  "manifest_version": 3,
  "name": "Persistent inspector",
  "version": "1.0.0",
  "minimum_chrome_version": "114",
  "permissions": ["sidePanel"],
  "action": { "default_title": "Open inspector" },
  "side_panel": { "default_path": "panel.html" },
  "background": { "service_worker": "worker.js" }
}

chrome.runtime.onInstalled.addListener(() => {
  chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true })
    .catch(console.error);
});

Якщо натомість викликаєте chrome.sidePanel.open({ tabId }), робіть це у прямій відповідь на підтримуваний жест користувача та виберіть відповідну мінімальну версію. Не відкладайте відкриття довільною мережею, очікуючи збереження жесту. Виклик відкриває поверхню, а не надає дозвіл читати вміст вкладки.

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

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

Не додавайте бічну панель лише заради масштабу інтерфейсу. Її користь — взаємодія, що триває поруч зі сторінкою. Перевірте вузьку ширину й перекладені підписи замість припущень про desktop.

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

• Викликати open() без відповідного жесту користувача.
• Плутати DOM панелі з DOM сайту.
• Показувати результат попередньої вкладки як поточний після навігації.
• Запитувати широкий host-доступ лише через наявність панелі.
• Вважати видимість панелі гарантією постійного воркера.

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

• ☐ Мінімальна версія охоплює всі використані API панелі.
• ☐ Відкриття має один зрозумілий жест.
• ☐ Результати містять вкладку/документ і стан застарілості.
• ☐ Повторне відкриття й перемикання відновлюють потрібний стан.
• ☐ Вузький макет і клавіатура залишаються придатними.

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

Чи sidePanel надає доступ до сайтів?

Ні. Операції сторінки потребують власного впровадження й дозволів.

Чи можна мати панель і вікно в одному продукті?

Так, для різних завдань, але поясніть відкриття й уникайте неоднозначної кнопки браузера.

Коли вибирати панель?

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

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

• API бічної панелі
• Формат маніфесту
• API вкладок

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

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