Реалізація Context Menu (контекстне меню) у браузерному розширенні

Реалізація Context Menu у браузерному розширенні

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

Дозвіл у маніфесті

{
  "permissions": ["contextMenus"]
}

Без цього дозволу виклики chrome.contextMenus мовчки ігноруються.

Створення пунктів меню

Пункти меню створюються в service worker при встановленні розширення. Створення при кожному запуску SW створить дублікати:

chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.removeAll(() => {
    chrome.contextMenus.create({
      id: 'translate-selection',
      title: 'Перевести "%s"',
      contexts: ['selection'],
    });

    chrome.contextMenus.create({
      id: 'save-link',
      title: 'Зберегти ссилку в список',
      contexts: ['link'],
    });

    chrome.contextMenus.create({
      id: 'separator-1',
      type: 'separator',
      contexts: ['selection'],
    });
  });
});

%s у title замінюється на виділений текст (до ~25 символів).

Типи контекстів

Обробка кліків

chrome.contextMenus.onClicked.addListener(async (info, tab) => {
  switch (info.menuItemId) {
    case 'translate-selection':
      await handleTranslate(info.selectionText, tab);
      break;

    case 'save-link':
      await saveLink(info.linkUrl, tab);
      break;

    case 'search-image':
      await searchImage(info.srcUrl, tab);
      break;
  }
});

Терміни

Просте контекстне меню з 2-3 пунктами: 1 день. Складне з підменю, перевіркою дозволів: 2–3 дні.