Эта страница переведена с помощью Cloud Translation API.

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.

Чтобы опробовать этот 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) => {...}
```
- заголовок
  нить
  Текст, отображаемый в заголовке боковой панели.
- возвраты
  Promise< 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 пикселя. Левый значок используется, когда кнопка неактивна; правый значок отображается, когда кнопка нажата.
- всплывающая подсказка
  нить
  Текст отображается в виде всплывающей подсказки при наведении курсора мыши на кнопку.
- неполноценный
  логический
  Отключена ли кнопка.
- возвраты
  Кнопка
показывать
пустота
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) => {...}
```
- выражение
  нить
  Выражение, которое будет оцениваться в контексте проверяемой страницы. Объекты JavaScript и узлы DOM отображаются в разворачиваемом дереве, аналогичном консоли/окну просмотра.
- rootTitle
  строка необязательный
  Необязательный заголовок для корня дерева выражений.
- возвраты
  Обещание<пустота>
  В ожидании
  Функция обратного вызова, вызываемая после обновления боковой панели результатами вычисления выражения.
setHeight
пустота
Задает высоту боковой панели.
Функция setHeight выглядит следующим образом:
```
(height: string) => {...}
```
- высота
  нить
  Указание размера, аналогичное CSS, например, '100px' или '12ex' .
setObject
пустота
Задает объект, соответствующий стандарту JSON, для отображения в боковой панели.
Функция setObject выглядит следующим образом:
```
(jsonObject: string, rootTitle?: string) => {...}
```
- jsonObject
  нить
  Объект, который будет отображаться в контексте проверяемой страницы. Оценка производится в контексте вызывающего объекта (API-клиента).
- rootTitle
  строка необязательный
  Необязательный заголовок для корня дерева выражений.
- возвраты
  Обещание<пустота>
  В ожидании
  Функция обратного вызова, которая срабатывает после обновления боковой панели с помощью соответствующего объекта.
setPage
пустота
Задает HTML-страницу для отображения в боковой панели.
Функция setPage выглядит следующим образом:
```
(path: string) => {...}
```
- путь
  нить
  Относительный путь к странице расширения, которая будет отображаться в боковой панели.

SourcesPanel

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

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

onSelectionChanged
Событие<functionvoidvoid>
Событие срабатывает при выборе объекта на панели.
Функция onSelectionChanged.addListener выглядит следующим образом:
```
(callback: function) => {...}
```
- перезвонить
  функция
  Параметр callback выглядит следующим образом:
```
() => void
```
создать боковую панель
пустота
Создает панель внутри боковой панели панели.
Функция createSidebarPane выглядит следующим образом:
```
(title: string) => {...}
```
- заголовок
  нить
  Текст, отображаемый в заголовке боковой панели.
- возвраты
  Promise< ExtensionSidebarPane >
  В ожидании
  Функция обратного вызова, которая срабатывает при создании боковой панели.

Theme

Chrome 99+

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

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

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

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

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

elements

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

Тип

ElementsPanel

sources

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

Тип

SourcesPanel

themeName

Chrome 59+

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

Тип

нить

Методы

create()

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

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

Параметры

заголовок
нить
Заголовок, отображаемый рядом со значком расширения на панели инструментов разработчика.
iconPath
нить
Путь к значку панели относительно каталога расширений.
pagePath
нить
Путь к HTML-странице панели относительно каталога расширений.

Возвраты

Promise< ExtensionPanel >
В ожидании
Функция, которая вызывается при создании панели.

openResource()

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

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

Параметры

url
нить
URL ресурса для открытия.
номер строки
число
Указывает номер строки, до которой следует прокрутить ресурс при его загрузке.
columnNumber
число необязательно
Chrome 114+
Указывает номер столбца, к которому следует прокрутить ресурс при его загрузке.

Возвраты

Обещание<пустота>
В ожидании
Функция, вызываемая после успешной загрузки ресурса.

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
```
- тема
  Тема
  Текущая тема оформления в инструментах разработчика.

chrome.devtools.panels Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

Описание

Манифест

Пример

Типы

Button

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

ElementsPanel

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

ExtensionPanel

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

ExtensionSidebarPane

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

SourcesPanel

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

Theme

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

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

elements

Тип

sources

Тип

themeName

Тип

Методы

create()

Параметры

Возвраты

openResource()

Параметры

Возвраты

setOpenResourceHandler()

Параметры

setThemeChangeHandler()

Параметры

chrome.devtools.panels