chrome.devtools.panels

Описание

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

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

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

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

Манифест

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

"devtools_page"

Пример

Следующий код добавляет панель, содержащуюся в 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
Панель значков расширений на панели инструментов DevTools.

Чтобы опробовать этот API, установите пример API панелей devtools из репозитория 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

    пустота

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

    Функция createSidebarPane выглядит так: 

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

    • заголовок

      нить

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

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

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

      Параметр callback выглядит так: 

      (result: ExtensionSidebarPane) => void

      • результат

        ExtensionSidebarPane

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

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 пикселя. Левый значок используется, когда кнопка неактивна, правый отображается при нажатии кнопки.

    • подсказкаТекст

      нить

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

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

      булев

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

  • показывать

    пустота

    Хром 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 отображаются в разворачиваемом дереве, аналогичном console/watch.

    • rootTitle

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

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

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

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

      Параметр callback выглядит так: 

      () => void

  • setHeight

    пустота

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

    Функция setHeight выглядит так: 

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

    • высота

      нить

      Спецификация размера в стиле CSS, например '100px' или '12ex' .

  • setObject

    пустота

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

    Функция setObject выглядит так: 

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

    • jsonObject

      нить

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

    • rootTitle

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

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

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

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

      Параметр callback выглядит так: 

      () => void

  • setPage

    пустота

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

    Функция setPage выглядит так: 

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

    • путь

      нить

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

SourcesPanel

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

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

  • onSelectionChanged

    Событие<functionvoidvoid>

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

    Функция onSelectionChanged.addListener выглядит так: 

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

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

      функция

      Параметр callback выглядит так: 

      () => void

  • createSidebarPane

    пустота

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

    Функция createSidebarPane выглядит так: 

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

    • заголовок

      нить

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

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

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

      Параметр callback выглядит так: 

      (result: ExtensionSidebarPane) => void

      • результат

        ExtensionSidebarPane

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

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

elements

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

Тип

ElementsPanel

sources

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

Тип

SourcesPanel

themeName

Хром 59+

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

Тип

нить

Методы

create()

chrome.devtools.panels.create(
  title: string,
  iconPath: string,
  pagePath: string,
  callback?: function,
): void

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

Параметры

  • заголовок

    нить

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

  • iconPath

    нить

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

  • pagePath

    нить

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

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

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

    Параметр callback выглядит так: 

    (panel: ExtensionPanel) => void

    • панель

      ExtensionPanel

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

openResource()

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

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

Параметры

  • URL-адрес

    нить

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

  • lineNumber

    число

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

  • Номер столбца

    номер необязательно

    Хром 114+

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

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

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

    Параметр callback выглядит так: 

    () => void

setOpenResourceHandler()

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

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

Параметры

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

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

    Параметр callback выглядит так: 

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

    • ресурс

      Ресурс

      Объект devtools.inspectedWindow.Resource для ресурса, по которому был выполнен щелчок.

    • lineNumber

      число

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