Расширения на боковой панели Microsoft Edge

Статья
10/09/2023

Как разработчик расширения Microsoft Edge используйте эту статью, чтобы новое или существующее расширение Microsoft Edge отображалось на боковой панели. Любое расширение может использовать боковую панель в дополнение к другому пользовательскому интерфейсу.

Боковая панель расширения Microsoft Edge

Примечание. Функция расширений боковой панели развертывается в растущей базе пользователей для всех каналов Microsoft Edge.

С помощью API боковой панели для расширений можно улучшить работу браузера, позволяя пользователям просматривать дополнительные сведения вместе с main содержимого веб-страницы.

Боковая панель — это постоянная панель, расположенная сбоку браузера, которая сосуществует с основным содержимым браузера. Боковая панель снижает необходимость постоянного переключения между вкладками, что приводит к более продуктивному просмотру.

Расширения могут при необходимости использовать API боковой панели для отображения пользовательского интерфейса на боковой панели Microsoft Edge. Расширения могут по-прежнему отображаться на панели инструментов Microsoft Edge вместе с пользовательским интерфейсом, например всплывающими окнами, и могут внедрять скрипты, например.

Терминология

Термин	Определение
API боковой панели	Имя функции, которую можно использовать в расширениях Microsoft Edge. В документации Chrome используется термин боковая панель.
`sidePanel` или `side_panel`	Имя API и разрешение на включение любого расширения в качестве расширения боковой панели.
Расширение боковой панели	Расширение Microsoft Edge с пользовательским интерфейсом на боковой панели.

Функции API боковой панели включают в себя:

Боковая панель остается открытой при переходе между вкладками.
Расширение на боковой панели можно сделать доступным для определенных веб-сайтов.
Расширение на боковой панели имеет доступ ко всем поддерживаемым API для расширений Microsoft Edge.

Происхождения

Как и в случае с другими ресурсами расширения, страница боковой панели фиксируется в контексте доверенного расширения в источнике (extension://<id>). Боковая панель имеет тот же доступ к API, что и другие доверенные контексты расширения.

Все существующие API расширений доступны для расширений боковой панели, поэтому вы можете использовать все текущие возможности платформы расширяемости в расширении с поддержкой боковой панели.

Добавление разрешения sidePanel в файл манифеста расширения

Чтобы использовать API боковой панели, добавьте разрешение в manifest.json файл. sidePanel Включите разрешение в файл расширенияmanifest.json:

{
  ...
  "name": "My sidebar extension",
  ...
  "side_panel": {
    "default_path": "sidebar.html"
  },
  "permissions": [
    "sidePanel"
  ]
   ...
}

Каждое расширение для Microsoft Edge имеет файл манифеста в формате JSON с именем manifest.json. Файл манифеста — это схема расширения.

См. также:

Формат файла манифеста для расширений

В следующих разделах показаны некоторые распространенные варианты использования API боковой панели.

Боковую панель можно задать по умолчанию, чтобы отобразить одно и то же расширение на всех открытых вкладках браузера. Значения по умолчанию сохраняются в сеансах браузера.

В manifest.jsonопределите "default_path" ключ, например "sidebar.html":

{
  "name": "My sidebar extension",
  ...
  "side_panel": {
    "default_path": "sidebar.html"
  }
  ...
}

Файл, указанный по умолчанию, например sidebar.html, отображается на всех открытых вкладках браузера:

<!DOCTYPE html>
<html>
  <head>
    <title>My Sidebar</title>
  </head>
  <body>
    <h1>Sidebar extension for all sites</h1>
    <p>This sidebar is enabled on all sites</p>
  </body>
</html>

Расширение может использовать sidepanel.setOptions() для включения боковой панели на определенной вкладке. Это может быть определенный веб-сайт, поэтому расширение открывается на боковой панели, когда пользователь переходит на этот веб-сайт.

В этом примере используется chrome.tabs.onUpdated() для прослушивания любых обновлений, внесенных на вкладку. Он проверяет, является ли URL-адрес, www.bing.com и, если да, включает боковую панель. В противном случае боковая панель отключается.

В service-worker.jsв в проверьтеurl.origin, является ли это нужной вкладкой, а затем в sidePanel.setOptions()параметре задайте значение trueenabled или false:addListener()

const BING_ORIGIN = 'https://www.bing.com';

chrome.tabs.onUpdated.addListener(async (tabId, info, tab) => {
  if (!tab.url) return;
  const url = new URL(tab.url);
  // Enables the sidebar when at bing.com
  if (url.origin === BING_ORIGIN) {
    await chrome.sidePanel.setOptions({
      tabId,
      path: 'sidepanel.html',
      enabled: true
    });
  } else {
    // Disables the sidebar when at other sites
    await chrome.sidePanel.setOptions({
      tabId,
      enabled: false
    });
  }
});

Когда пользователь переключается на вкладку или сайт, для которых боковая панель не включена, боковая панель скрыта.

Полный пример см. в разделе Пример боковой панели для конкретного сайта.

Чтобы разрешить пользователям открывать боковую панель, щелкнув значок панели инструментов действий, используйте sidePanel.setPanelBehavior(). Сначала объявите "action" ключ в manifest.json:

{
  "name": "My sidebar extension",
  ...
   "action": {
    "default_title": "Click to open sidebar"
  },
  ...
}

Затем добавьте следующий код service-worker.js в список кода, который находится в разделе Включение боковой панели только для определенного сайта выше:

// Allow users to open the sidebar by clicking the action toolbar icon
chrome.sidePanel
  .setPanelBehavior({ openPanelOnActionClick: true })
  .catch((error) => console.error(error));

Расширение может использовать sidepanel.getOptions() для получения текущей боковой панели, а затем включить другую боковую панель для определенной вкладки.

В этом примере задается боковая панель, содержащая приветственное сообщение в runtime.onInstalled(). Когда пользователь переходит на другую вкладку, боковая панель заменяется боковой панелью на уровне браузера.

// service-worker.js:
const welcomePage = 'sidebar/welcome-sb.html';
const mainPage = 'sidebar/main-sb.html';

chrome.runtime.onInstalled.addListener(() => {
  chrome.sidePanel.setOptions({ path: welcomePage });
});

chrome.tabs.onActivated.addListener(async ({ tabId }) => {
  const { path } = await chrome.sidePanel.getOptions({ tabId });
  if (path === welcomePage) {
    chrome.sidePanel.setOptions({ path: mainPage });
  }
});

sidePanel.open() позволяет расширениям открывать боковую панель с помощью жеста пользователя, например щелчка значка действия или любого взаимодействия с пользователем на странице расширения или скрипте содержимого, например нажатием кнопки.

В следующем коде показано, как открыть глобальную боковую панель в текущем окне, когда пользователь щелкает контекстное меню. При использовании sidePanel.open()выберите контекст, в котором должна открываться боковая панель:

Используйте windowId для открытия глобальной боковой панели, как показано в следующем примере.
Или задайте tabId , чтобы открыть боковую панель только на определенной вкладке.

// service-worker.js:
chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    id: 'openSidePanel',
    title: 'Open sidebar',
    contexts: ['all']
  });
});

chrome.contextMenus.onClicked.addListener((info, tab) => {
  if (info.menuItemId === 'openSidePanel') {
    // Open the sidebar in all the tabs of the current window.
    chrome.sidePanel.open({ windowId: tab.windowId });
  }
});

Расширения на боковой панели Microsoft Edge имеют следующие возможности пользовательского интерфейса.

Пользователь может открыть расширение на боковой панели несколькими способами:

Щелкнув значок

Пользователи могут щелкнуть значок Открыть на боковой панели (), который отображается рядом с именем расширения в центре Расширения:

Диалоговое окно боковой панели

Кроме того, пользователи могут щелкнуть пользовательский значок расширения на панели инструментов, если он включен. Для этого необходимо, чтобы расширение включило значок ярлыка для открытия боковой панели, как описано выше в разделе Включение значка ярлыка расширения для открытия боковой панели. В этом примере настраиваемым значком расширения является круг ():

Щелкнув правой кнопкой мыши значок расширения

Пользователи могут щелкнуть правой кнопкой мыши значок расширения на панели инструментов, а затем выбрать Открыть на боковой панели или Закрыть боковую панель:

Щелкните правой кнопкой мыши ярлык на панели инструментов, чтобы открыть расширение

Значок расширения отображается на панели инструментов, если пользователь нажал значок Показать на панели инструментов () рядом с именем расширения в центре "Расширения".

Нажатие сочетания клавиш

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

Чтобы включить команду действия, см. раздел Команды действий в chrome.commands в справочнике по API.
Чтобы включить значок действия, см . раздел Открытие боковой панели, щелкнув значок панели инструментов в chrome.sidePanel в справочнике по API.

Если свойству openPanelOnActionClick() типа PanelBehavior присвоено значение true, пользователь может открыть боковую панель с помощью сочетания клавиш. Чтобы включить эту функцию, необходимо указать команду действия в манифесте.

Открытие с помощью жеста

Боковую панель также можно открыть с помощью следующих взаимодействий:

Откройте боковую панель с помощью пользовательского жеста расширения, например щелкнув значок действия. В этом подходе используется sidePanel.open(). См. раздел Открытие боковой панели при взаимодействии с пользователем выше.
Откройте боковую панель, щелкнув значок панели инструментов. В этом подходе используется sidePanel.setPanelBehavior(). См . раздел Нажатие значка в разделе "Открытие расширения на боковой панели" выше.

Примеры расширений

Дополнительные демонстрации расширений API боковой панели см. в следующих расширениях:

Типы и методы

См . статью Типы и методы на странице справочника по API chrome.sidePanel по адресу developer.chrome.com.

См. также

Примечание.

Части этой страницы являются изменениями, основанными на работе, созданной и совместно используемой Google и используемой в соответствии с условиями, описанными в международной лицензии Creative Commons Attribution 4.0. Исходная страница находится здесь.

Эта работа лицензируется по международной лицензии Creative Commons Attribution 4.0.

Поделиться через

Терминология

Функции API боковой панели

Происхождения

Добавление разрешения sidePanel в файл манифеста расширения

Варианты использования API боковой панели

Отображение одной боковой панели на каждом сайте

Включение боковой панели только для определенного сайта

Включение значка ярлыка расширения, чтобы открыть боковую панель

Переключение на другую боковую панель

Открытие боковой панели при взаимодействии с пользователем

Интерфейс пользователя с расширениями боковой панели

Открытие расширения на боковой панели