Як додати контекстні меню до розширення Chrome

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

Оголосіть contextMenus, створіть сталі ID через runtime.onInstalled і обробляйте contextMenus.onClicked у воркері. Обмежте меню відповідними контекстами: виділення, посилання, зображення чи сторінка. Назва має пояснювати дію до натискання.

Не створюйте меню при кожному запуску воркера. Воркер часто перезапускається, а пункти живуть довше. Сталі ID та свідоме відтворення при встановленні/оновленні усувають дублікати й застарілі пункти.

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

1. Виберіть вузький контекст. Дія з виділенням має бути пунктом selection, а не постійним меню сторінки. documentUrlPatterns обмежує видимість, але не замінює авторизацію.
2. Синхронно зареєструйте слухача у воркері. Властивість onclick окремого пункту не є шаблоном MV3-воркера; використовуйте подію API.
3. Створюйте або перебудовуйте власні пункти на onInstalled. Читайте runtime.lastError у callback, бо відмова створення асинхронна. Перед дією перевірте menuItemId.
4. Перевіряйте selectionText, URL посилань і зображень як дані сторінки. Обмежуйте текст і не передавайте довільні адреси привілейованому мережевому коду.
5. Виберіть поверхню результату. Вкладка підходить більшому тексту; консоль — лише налагодженню. Для впровадження додайте scripting і потрібний host-доступ або activeTab. Виклик меню може надати activeTab, якщо його оголошено, але не всі API.

Для шрифту праве натискання зручне, проте живий DOM-елемент не можна безпечно серіалізувати. Залиште вибір елемента в контентному скрипті й використайте ID документа. Запис Font Picker ілюструє взаємодію, а не підтверджує таке меню.

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

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

const MENU = "inspect-selection";
chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.removeAll(() => {
    if (chrome.runtime.lastError) {
      console.error(chrome.runtime.lastError.message);
      return;
    }
    chrome.contextMenus.create({
      id: MENU, title: "Inspect selected text", contexts: ["selection"],
    }, () => {
      if (chrome.runtime.lastError) console.error(chrome.runtime.lastError.message);
    });
  });
});

chrome.contextMenus.onClicked.addListener((info) => {
  if (info.menuItemId !== MENU || typeof info.selectionText !== "string") return;
  const selection = info.selectionText.slice(0, 2000);
  console.info("selection-length", selection.length);
});

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

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

Контекстні меню роблять ситуативні дії помітними, але захаращують браузер. Групуйте пов’язані пункти й зберігайте основний шлях панелі. Меню посилання має діяти на нього, а не мовчки підміняти URL активної вкладки.

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

• Створювати однакові ID при кожному запуску.
• Використовувати onclick замість події воркера.
• Вважати видимість дозволом завантажити будь-який URL.
• Експортувати виділення без пояснення адресата.

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

• ☐ Пункти з’являються в доречних контекстах.
• ☐ Встановлення, оновлення й перезапуск не дублюють меню.
• ☐ ID та перевірки обмежують виконання.
• ☐ API й доступ відповідають операції.
• ☐ Результат і відмова видимі користувачу.

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

Чи contextMenus потребує широкого host-дозволу?

Не для створення меню. Дія після натискання може потребувати додаткового доступу.

Чи включати виділення в назву?

Для selection підтримується %s, але назва має бути короткою й не натякати на непояснене завантаження тексту.

Що перевіряти спочатку?

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

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

• API контекстного меню
• Дозвіл activeTab
• Події встановлення

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

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