chrome.devtools.panels

Описание

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

Манифест

Для использования этого API в манифесте необходимо указать следующие ключи.

"devtools_page"

Для получения общего представления об использовании API инструментов разработчика см. раздел «Краткое описание 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) { ... });

Следующий код добавляет в панель элементов боковую панель, содержащуюся в Sidebar.html и озаглавленную «Свойства шрифта» , а затем устанавливает её высоту равной 8ex :

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

На этом скриншоте показано, как приведенные выше примеры повлияют на окно «Инструменты разработчика»:

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

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

Типы

Button

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

Характеристики

  • onClicked

    Событие<functionvoidvoid>

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

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

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

    • перезвонить

      функция

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

      () => void

  • обновлять

    пустота

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

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

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

    • iconPath

      строка необязательный

      Путь к новой иконке кнопки.

    • всплывающая подсказка

      строка необязательный

      Текст отображается в виде всплывающей подсказки при наведении курсора мыши на кнопку.

    • неполноценный

      логический необязательный

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

ElementsPanel

Представляет собой панель «Элементы».

Характеристики

  • onSelectionChanged

    Событие<functionvoidvoid>

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

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

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

    • перезвонить

      функция

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

      () => void

  • создать боковую панель

    пустота

    Обещать

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

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

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

    • заголовок

      нить

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

    • перезвонить

      функция необязательна

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

      (result: ExtensionSidebarPane) => void

    • возвраты

      Promise< ExtensionSidebarPane >

      В ожидании

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

      Поддержка промисов доступна только для Manifest V3 и более поздних версий; для других платформ необходимо использовать колбэки.

ExtensionPanel

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

Характеристики

  • onHidden

    Событие<functionvoidvoid>

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

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

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

    • перезвонить

      функция

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

      () => void

  • onSearch

    Событие<functionvoidvoid>

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

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

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

    • перезвонить

      функция

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

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

      • действие

        нить

      • queryString

        строка необязательный

  • onShown

    Событие<functionvoidvoid>

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

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

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

    • перезвонить

      функция

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

      (window: Window) => void

      • окно

        Окно

  • createStatusBarButton

    пустота

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

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

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

    • iconPath

      нить

      Путь к значку кнопки. Файл должен содержать изображение размером 64x24 пикселя, состоящее из двух значков размером 32x24 пикселя. Левый значок используется, когда кнопка неактивна; правый значок отображается, когда кнопка нажата.

    • всплывающая подсказка

      нить

      Текст отображается в виде всплывающей подсказки при наведении курсора мыши на кнопку.

    • неполноценный

      логический

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

  • показывать

    пустота

    Chrome 140+

    Панель отображается при активации соответствующей вкладки.

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

    () => {...}

ExtensionSidebarPane

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

Характеристики

  • onHidden

    Событие<functionvoidvoid>

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

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

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

    • перезвонить

      функция

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

      () => void

  • onShown

    Событие<functionvoidvoid>

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

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

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

    • перезвонить

      функция

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

      (window: Window) => void

      • окно

        Окно

  • setExpression

    пустота

    Обещать

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

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

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

    • выражение

      нить

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

    • rootTitle

      строка необязательный

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

    • перезвонить

      функция необязательна

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

      () => void

    • возвраты

      Обещание<пустота>

      В ожидании

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

      Поддержка промисов доступна только для Manifest V3 и более поздних версий; для других платформ необходимо использовать колбэки.

  • setHeight

    пустота

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

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

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

    • высота

      нить

      Указание размера, аналогичное CSS, например, '100px' или '12ex' .

  • setObject

    пустота

    Обещать

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

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

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

    • jsonObject

      нить

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

    • rootTitle

      строка необязательный

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

    • перезвонить

      функция необязательна

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

      () => void

    • возвраты

      Обещание<пустота>

      В ожидании

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

      Поддержка промисов доступна только для Manifest V3 и более поздних версий; для других платформ необходимо использовать колбэки.

  • setPage

    пустота

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

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

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

    • путь

      нить

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

SourcesPanel

Представляет собой панель «Источники».

Характеристики

  • onSelectionChanged

    Событие<functionvoidvoid>

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

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

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

    • перезвонить

      функция

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

      () => void

  • создать боковую панель

    пустота

    Обещать

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

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

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

    • заголовок

      нить

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

    • перезвонить

      функция необязательна

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

      (result: ExtensionSidebarPane) => void

    • возвраты

      Promise< ExtensionSidebarPane >

      В ожидании

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

      Поддержка промисов доступна только для Manifest V3 и более поздних версий; для других платформ необходимо использовать колбэки.

Theme

Chrome 99+

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

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

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

"темный"
Темная тема.

Характеристики

elements

Панель элементов.

Тип

ElementsPanel

sources

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

Тип

SourcesPanel

themeName

Chrome 59+

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

Тип

нить

Методы

create()

Обещать
chrome.devtools.panels.create(
  title: string,
  iconPath: string,
  pagePath: string,
  callback?: function,
): Promise<ExtensionPanel>

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

Параметры

  • заголовок

    нить

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

  • iconPath

    нить

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

  • pagePath

    нить

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

  • перезвонить

    функция необязательна

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

    (panel: ExtensionPanel) => void

    • панель

      ExtensionPanel

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

Возвраты

  • Promise< ExtensionPanel >

    В ожидании

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

    Поддержка промисов доступна только для Manifest V3 и более поздних версий; для других платформ необходимо использовать колбэки.

openResource()

Обещать
chrome.devtools.panels.openResource(
  url: string,
  lineNumber: number,
  columnNumber?: number,
  callback?: function,
): Promise<void>

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

Параметры

  • url

    нить

    URL ресурса для открытия.

  • номер строки

    число

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

  • columnNumber

    число необязательно

    Chrome 114+

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

  • перезвонить

    функция необязательна

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

    () => void

Возвраты

  • Обещание<пустота>

    В ожидании

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

    Поддержка промисов доступна только для Manifest V3 и более поздних версий; для других платформ необходимо использовать колбэки.

setOpenResourceHandler()

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

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

Параметры

  • перезвонить

    функция необязательна

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

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

    • ресурс

      Ресурс

      Объект devtools.inspectedWindow.Resource , содержащий информацию о ресурсе, по которому был произведен щелчок.

    • номер строки

      число

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

setThemeChangeHandler()

Chrome 99+
chrome.devtools.panels.setThemeChangeHandler(
  callback?: function,
): void

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

Параметры

  • перезвонить

    функция необязательна

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

    (theme: Theme) => void

    • тема

      Тема

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