chrome.devtools.panels

Описание

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

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

Чтобы попробовать этот 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

    • результат

      РасширениеБоковая панельПанель

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

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

    • результат

      РасширениеБоковая панельПанель

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

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

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

  • панель

    Панель расширения

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

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

  • ресурс

    Ресурс

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