chrome.devtools.panels

Описание

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

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

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

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

Манифест

Для использования этого 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) => {...}

    • значокПуть

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

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

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

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

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

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

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

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

ElementsPanel

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

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

  • onSelectionChanged

    Событие<functionvoidvoid>

    Запускается, когда объект выбран на панели.

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

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

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

      функция

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

      () => void

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

    пустота

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

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

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

    • заголовок

      нить

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

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

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

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

      (result: ExtensionSidebarPane) => void

ExtensionPanel

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

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

  • onHidden

    Событие<functionvoidvoid>

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

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

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

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

      функция

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

      () => void

  • onSearch

    Событие<functionvoidvoid>

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

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

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

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

      функция

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

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

      • действие

        нить

      • строка запроса

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

  • onShown

    Событие<functionvoidvoid>

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

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

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

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

      функция

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

      (window: Window) => void

      • окно

        Окно

  • СоздатьStatusBarButton

    пустота

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

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

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

    • значокПуть

      нить

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

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

      нить

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

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

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

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

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

  • setHeight

    пустота

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

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

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

    • высота

      нить

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

  • setObject

    пустота

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

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

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

    • jsonObject

      нить

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

    • rootTitle

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

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

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

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

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

      () => void

  • УстановитьПейдж

    пустота

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

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

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

    • путь

      нить

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

SourcesPanel

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

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

  • onSelectionChanged

    Событие<functionvoidvoid>

    Запускается, когда объект выбран на панели.

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

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

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

      функция

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

      () => void

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

    пустота

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

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

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

    • заголовок

      нить

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

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

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

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

      (result: ExtensionSidebarPane) => void

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

elements

Панель «Элементы».

Тип

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

sources

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

Тип

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

themeName

Хром 59+

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

Тип

нить

Методы

create()

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

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

Параметры

  • заголовок

    нить

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

  • значокПуть

    нить

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

  • PagePath

    нить

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

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

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

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

    (panel: ExtensionPanel) => void

openResource()

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

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

Параметры

  • URL

    нить

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

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

    число

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

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

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

    Хром 114+

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

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

    функция опциональная

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

    () => void

setOpenResourceHandler()

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

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

Параметры

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

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

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

    (resource: Resource) => void