chrome.devtools.panels

refresh date: 2026-09-25 robots: noindex

Описание

Используйте chrome.devtools.panels API, чтобы интегрировать расширение в интерфейс окна инструментов разработчика: создавайте собственные панели, получайте доступ к существующим и добавляйте боковые панели.

Манифест

Чтобы использовать этот API, в манифесте нужно объявить следующие ключи:

"devtools_page"

Общие сведения об использовании API инструментов разработчика можно найти в этой статье.

Обзор

Каждая панель расширения и боковая панель отображаются как отдельная HTML-страница. Все страницы расширения, отображаемые в окне инструментов разработчика, имеют доступ ко всем модулям в API chrome.devtools, а также к API chrome.extension. Другие API расширений недоступны для страниц в окне инструментов разработчика, но вы можете вызвать их, отправив запрос на фоновую страницу расширения, как это делается в скриптах контента.

Метод devtools.panels.setOpenResourceHandler позволяет установить функцию обратного вызова, которая обрабатывает запросы пользователя на открытие ресурса (обычно это нажатие на ссылку ресурса в окне инструментов разработчика). Вызывается не более одного из установленных обработчиков. Пользователи могут указать (в диалоговом окне настроек инструментов разработчика) либо поведение по умолчанию, либо расширение для обработки запросов на открытие ресурсов. Если расширение вызывает setOpenResourceHandler() несколько раз, сохраняется только последний обработчик.

Примеры

Следующий код добавляет панель, содержащуюся в Panel.html, представленную FontPicker.png на панели инструментов разработчика и помеченную как Font Picker:

chrome.devtools.panels.create("Font Picker",
                              "FontPicker.png",
                              "Panel.html",
                              function(panel) { ... });

Следующий код добавляет на панель Elements боковую панель, содержащуюся в Sidebar.html и озаглавленную Font Properties, а затем устанавливает ее высоту равной 8ex:

chrome.devtools.panels.elements.createSidebarPane("Font Properties",
  function(sidebar) {
    sidebar.setPage("Sidebar.html");
    sidebar.setHeight("8ex");
  }
);

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

Панель значков расширений на панели инструментов разработчика

Чтобы попробовать этот API, установите пример API панелей инструментов разработчика из репозитория chrome-extension-samples.

Типы

Button

Кнопка, созданная расширением.

Свойства

  • onClicked

    Event<functionvoidvoid>

    Срабатывает при нажатии кнопки.

    Функция onClicked.addListener выглядит следующим образом: 

    (callback: function) => {...}

    • обратный вызов

      function

      Параметр callback выглядит следующим образом: 

      () => void

  • update

    void

    Обновляет атрибуты кнопки. Если некоторые аргументы опущены или имеют значение null, соответствующие атрибуты не обновляются.

    Функция update выглядит следующим образом: 

    (iconPath?: string, tooltipText?: string, disabled?: boolean) => {...}

    • iconPath

      Строка (необязательно)

      Путь к новому значку кнопки.

    • tooltipText

      Строка (необязательно)

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

    • отключено

      Логическое значение (необязательно)

      Отключена ли кнопка.

ElementsPanel

Представляет панель "Элементы".

Свойства

  • onSelectionChanged

    Event<functionvoidvoid>

    Срабатывает, когда на панели выбран объект.

    Функция onSelectionChanged.addListener выглядит следующим образом: 

    (callback: function) => {...}

    • обратный вызов

      function

      Параметр callback выглядит следующим образом: 

      () => void

  • createSidebarPane

    void

    Promise

    Создает область на боковой панели.

    Функция createSidebarPane выглядит следующим образом: 

    (title: string, callback?: function) => {...}

    • название

      string

      Текст, который показывается в подписи боковой панели.

    • обратный вызов

      function необязательно

      Параметр callback выглядит следующим образом: 

      (result: ExtensionSidebarPane) => void

      • Результат

        ExtensionSidebarPane

        Объект ExtensionSidebarPane для созданной боковой панели.

    • Возвращает

      Promise<ExtensionSidebarPane>

      Chrome 152 и более поздних версий

      Обратный вызов, который активируется при создании боковой панели.

      Объекты Promise поддерживаются только в Manifest V3 и более поздних версиях. На других платформах нужно использовать обратные вызовы.

ExtensionPanel

Представляет панель, созданную расширением.

Свойства

  • onHidden

    Event<functionvoidvoid>

    Активируется, когда пользователь переключается с панели.

    Функция onHidden.addListener выглядит следующим образом: 

    (callback: function) => {...}

    • обратный вызов

      function

      Параметр callback выглядит следующим образом: 

      () => void

  • onSearch

    Event<functionvoidvoid>

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

    Функция onSearch.addListener выглядит следующим образом: 

    (callback: function) => {...}

    • обратный вызов

      function

      Параметр callback выглядит следующим образом: 

      (action: string, queryString?: string) => void

      • действие

        string

      • queryString

        Строка (необязательно)

  • onShown

    Event<functionvoidvoid>

    Активируется, когда пользователь переключается на панель.

    Функция onShown.addListener выглядит следующим образом: 

    (callback: function) => {...}

    • обратный вызов

      function

      Параметр callback выглядит следующим образом: 

      (window: Window) => void

      • окно

        Окно

  • createStatusBarButton

    void

    Добавляет кнопку в строку состояния панели.

    Функция createStatusBarButton выглядит следующим образом: 

    (iconPath: string, tooltipText: string, disabled: boolean) => {...}

    • iconPath

      string

      Путь к значку кнопки. Файл должен содержать изображение размером 64 x 24 пикселя, состоящее из двух значков размером 32 x 24 пикселя. Значок слева используется, когда кнопка неактивна, а значок справа – когда она нажата.

    • tooltipText

      string

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

    • отключено

      Логическое значение

      Отключена ли кнопка.

  • Показывать

    void

    Chrome 140+

    Показывает панель, активируя соответствующую вкладку.

    Функция show выглядит следующим образом: 

    () => {...}

ExtensionSidebarPane

Боковая панель, созданная расширением.

Свойства

  • onHidden

    Event<functionvoidvoid>

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

    Функция onHidden.addListener выглядит следующим образом: 

    (callback: function) => {...}

    • обратный вызов

      function

      Параметр callback выглядит следующим образом: 

      () => void

  • onShown

    Event<functionvoidvoid>

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

    Функция onShown.addListener выглядит следующим образом: 

    (callback: function) => {...}

    • обратный вызов

      function

      Параметр callback выглядит следующим образом: 

      (window: Window) => void

      • окно

        Окно

  • setExpression

    void

    Promise

    Задает выражение, которое оценивается на проверяемой странице. Результат будет показан на боковой панели.

    Функция setExpression выглядит следующим образом: 

    (expression: string, rootTitle?: string, callback?: function) => {...}

    • выражение

      string

      Выражение, которое будет вычислено в контексте проверяемой страницы. Объекты JavaScript и узлы DOM отображаются в виде разворачиваемого дерева, похожего на консоль или панель Watch.

    • rootTitle

      Строка (необязательно)

      Необязательное название для корня дерева выражений.

    • обратный вызов

      function необязательно

      Параметр callback выглядит следующим образом: 

      () => void

    • Возвращает

      Promise<void>

      Chrome 152 и более поздних версий

      Обратный вызов, выполняемый после обновления боковой панели с результатами оценки выражения.

      Объекты Promise поддерживаются только в Manifest V3 и более поздних версиях. На других платформах нужно использовать обратные вызовы.

  • setHeight

    void

    Задает высоту боковой панели.

    Функция setHeight выглядит следующим образом: 

    (height: string) => {...}

    • высота

      string

      Размер, заданный в формате CSS, например '100px' или '12ex'.

  • setObject

    void

    Promise

    Задает объект, совместимый с JSON, для отображения на боковой панели.

    Функция setObject выглядит следующим образом: 

    (jsonObject: string, rootTitle?: string, callback?: function) => {...}

    • jsonObject

      string

      Объект, который будет показан в контексте проверяемой страницы. Оценивается в контексте вызывающей стороны (API-клиента).

    • rootTitle

      Строка (необязательно)

      Необязательное название для корня дерева выражений.

    • обратный вызов

      function необязательно

      Параметр callback выглядит следующим образом: 

      () => void

    • Возвращает

      Promise<void>

      Chrome 152 и более поздних версий

      Обратный вызов, выполняемый после обновления боковой панели с объектом.

      Объекты Promise поддерживаются только в Manifest V3 и более поздних версиях. На других платформах нужно использовать обратные вызовы.

  • setPage

    void

    Задает HTML-страницу, которая будет показываться на боковой панели.

    Функция setPage выглядит следующим образом: 

    (path: string) => {...}

    • путь

      string

      Относительный путь к странице расширения, которая будет показываться на боковой панели.

SourcesPanel

Представляет панель "Источники".

Свойства

  • onSelectionChanged

    Event<functionvoidvoid>

    Срабатывает, когда на панели выбран объект.

    Функция onSelectionChanged.addListener выглядит следующим образом: 

    (callback: function) => {...}

    • обратный вызов

      function

      Параметр callback выглядит следующим образом: 

      () => void

  • createSidebarPane

    void

    Promise

    Создает область на боковой панели.

    Функция createSidebarPane выглядит следующим образом: 

    (title: string, callback?: function) => {...}

    • название

      string

      Текст, который показывается в подписи боковой панели.

    • обратный вызов

      function необязательно

      Параметр callback выглядит следующим образом: 

      (result: ExtensionSidebarPane) => void

      • Результат

        ExtensionSidebarPane

        Объект ExtensionSidebarPane для созданной боковой панели.

    • Возвращает

      Promise<ExtensionSidebarPane>

      Chrome 152 и более поздних версий

      Обратный вызов, который активируется при создании боковой панели.

      Объекты Promise поддерживаются только в Manifest V3 и более поздних версиях. На других платформах нужно использовать обратные вызовы.

Theme

Chrome 99 и более поздних версий.

Тема, используемая инструментами разработчика.

Перечисление

"default"
Тема инструментов разработчика по умолчанию. Это всегда светлая тема.

"dark"
Тёмная тема.

Свойства

elements

Панель "Элементы".

Тип

ElementsPanel

sources

Панель источников.

Тип

SourcesPanel

themeName

Chrome 59 и более поздних версий;

Название цветовой темы, заданной в настройках инструментов разработчика. Возможные значения: default (по умолчанию) и dark.

Тип

string

Методы

create()

Promise 
chrome.devtools.panels.create(
  title: string,
  iconPath: string,
  pagePath: string,
  callback?: function,
): Promise<ExtensionPanel>

Создает панель расширения.

Параметры

  • название

    string

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

  • iconPath

    string

    Путь к значку панели относительно каталога расширения.

  • pagePath

    string

    Путь к HTML-странице панели относительно каталога расширения.

  • обратный вызов

    function необязательно

    Параметр callback выглядит следующим образом: 

    (panel: ExtensionPanel) => void

    • панель

      ExtensionPanel

      Объект ExtensionPanel, представляющий созданную панель.

Возвраты

  • Promise<ExtensionPanel>

    Chrome 152 и более поздних версий

    Функция, которая вызывается при создании панели.

    Объекты Promise поддерживаются только в Manifest V3 и более поздних версиях. На других платформах нужно использовать обратные вызовы.

openResource()

Promise 
chrome.devtools.panels.openResource(
  url: string,
  lineNumber: number,
  columnNumber?: number,
  callback?: function,
): Promise<void>

Запрашивает у инструментов разработчика открытие URL на панели инструментов разработчика.

Параметры

  • url

    string

    URL ресурса, который нужно открыть.

  • lineNumber

    число

    Указывает номер строки, к которой нужно перейти после загрузки ресурса.

  • columnNumber

    number (необязательно)

    Chrome 114 и более поздних версий.

    Указывает номер столбца, к которому нужно перейти при загрузке ресурса.

  • обратный вызов

    function необязательно

    Параметр callback выглядит следующим образом: 

    () => void

Возвраты

  • Promise<void>

    Chrome 152 и более поздних версий

    Функция, которая вызывается после успешной загрузки ресурса.

    Объекты Promise поддерживаются только в Manifest V3 и более поздних версиях. На других платформах нужно использовать обратные вызовы.

setOpenResourceHandler()

chrome.devtools.panels.setOpenResourceHandler(
  callback?: function,
): void

Указывает функцию, которая будет вызываться, когда пользователь нажимает на ссылку ресурса в окне инструментов разработчика. Чтобы отменить обработчик, вызовите метод без параметров или передайте в качестве параметра значение null.

Параметры

  • обратный вызов

    function необязательно

    Параметр callback выглядит следующим образом: 

    (resource: Resource, lineNumber: number) => void

    • ресурс

      Ресурс

      Объект devtools.inspectedWindow.Resource для ресурса, на который нажал пользователь.

    • lineNumber

      число

      Указывает номер строки в ресурсе, на который нажал пользователь.

setThemeChangeHandler()

Chrome 99 и более поздних версий. 
chrome.devtools.panels.setThemeChangeHandler(
  callback?: function,
): void

Указывает функцию, которая будет вызываться при изменении текущей темы в инструментах разработчика. Чтобы отменить обработчик, вызовите метод без параметров или передайте параметр null.

Параметры

  • обратный вызов

    function необязательно

    Параметр callback выглядит следующим образом: 

    (theme: Theme) => void

    • тема

      Тема

      Текущая тема в инструментах разработчика.