Chrome теперь поддерживает стандартизированное пространство имен browser.* (доступно начиная с Chrome 148). Мы постепенно обновляем документацию. Подробнее читайте в нашем руководстве по переходу .

Чтобы переводить контент на ваш предпочитаемый язык, Google использует технологии на основе искусственного интеллекта. Переводы от ИИ могут содержать ошибки.

chrome.devtools.panels

Описание

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

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

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

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

Манифест

Чтобы использовать этот API, в манифесте нужно объявить следующие ключи:

"devtools_page"

Пример

Следующий код добавляет панель, содержащуюся в Panel.html, представленную FontPicker.png на панели инструментов разработчика и помеченную как Font Picker:

chrome.devtools.panels.create("Font Picker",
                              "FontPicker.png",
                              "Panel.html",
                              function(panel) { ... });

Следующий код добавляет на панель Elements боковую панель, содержащуюся в Sidebar.html и озаглавленную Font Properties, а затем устанавливает ее высоту равной 8ex:

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

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

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

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

Типы

Button

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

Свойства

onClicked

Event<functionvoidvoid>

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

Функция onClicked.addListener выглядит следующим образом:
```
(callback: function) => {...}
```
- обратный вызов
  
  function
  
  Параметр callback выглядит следующим образом:
```
() => void
```
update

void

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

Функция update выглядит следующим образом:
```
(iconPath?: string, tooltipText?: string, disabled?: boolean) => {...}
```
- iconPath
  
  Строка (необязательно)
  
  Путь к новому значку кнопки.
- tooltipText
  
  Строка (необязательно)
  
  Текст, который показывается в качестве подсказки, когда пользователь наводит указатель мыши на кнопку.
- отключено
  
  Логическое значение (необязательно)
  
  Отключена ли кнопка.

ElementsPanel

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

Свойства

onSelectionChanged

Event<functionvoidvoid>

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

Функция onSelectionChanged.addListener выглядит следующим образом:
```
(callback: function) => {...}
```
- обратный вызов
  
  function
  
  Параметр callback выглядит следующим образом:
```
() => void
```
createSidebarPane

void

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

Функция createSidebarPane выглядит следующим образом:
```
(title: string) => {...}
```
- название
  
  string
  
  Текст, который показывается в подписи боковой панели.
- Возвращает
  Promise<ExtensionSidebarPane>
  
  Chrome 152 и более поздних версий
  
  Обратный вызов, который активируется при создании боковой панели.

ExtensionPanel

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

Свойства

onHidden

Event<functionvoidvoid>

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

Функция onHidden.addListener выглядит следующим образом:
```
(callback: function) => {...}
```
- обратный вызов
  
  function
  
  Параметр callback выглядит следующим образом:
```
() => void
```
onSearch

Event<functionvoidvoid>

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

Функция onSearch.addListener выглядит следующим образом:
```
(callback: function) => {...}
```
- обратный вызов
  
  function
  
  Параметр callback выглядит следующим образом:
```
(action: string, queryString?: string) => void
```
  - действие
    
    string
  - queryString
    
    Строка (необязательно)
onShown

Event<functionvoidvoid>

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

Функция onShown.addListener выглядит следующим образом:
```
(callback: function) => {...}
```
- обратный вызов
  
  function
  
  Параметр callback выглядит следующим образом:
```
(window: Window) => void
```
  - окно
    
    Окно
createStatusBarButton

void

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

Функция createStatusBarButton выглядит следующим образом:
```
(iconPath: string, tooltipText: string, disabled: boolean) => {...}
```
- iconPath
  
  string
  
  Путь к значку кнопки. Файл должен содержать изображение размером 64 x 24 пикселя, состоящее из двух значков размером 32 x 24 пикселя. Значок слева используется, когда кнопка неактивна, а значок справа – когда она нажата.
- tooltipText
  
  string
  
  Текст, который показывается в качестве подсказки, когда пользователь наводит указатель мыши на кнопку.
- отключено
  
  Логическое значение
  
  Отключена ли кнопка.
- Возвращает
  Button
Показывать

void

Chrome 140+ browser.* начиная с Chrome 152

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

Функция show выглядит следующим образом:
```
() => {...}
```

ExtensionSidebarPane

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

Свойства

onHidden

Event<functionvoidvoid>

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

Функция onHidden.addListener выглядит следующим образом:
```
(callback: function) => {...}
```
- обратный вызов
  
  function
  
  Параметр callback выглядит следующим образом:
```
() => void
```
onShown

Event<functionvoidvoid>

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

Функция onShown.addListener выглядит следующим образом:
```
(callback: function) => {...}
```
- обратный вызов
  
  function
  
  Параметр callback выглядит следующим образом:
```
(window: Window) => void
```
  - окно
    
    Окно
setExpression

void

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

Функция setExpression выглядит следующим образом:
```
(expression: string, rootTitle?: string) => {...}
```
- выражение
  
  string
  
  Выражение, которое будет вычислено в контексте проверяемой страницы. Объекты JavaScript и узлы DOM отображаются в виде разворачиваемого дерева, похожего на консоль или панель Watch.
- rootTitle
  
  Строка (необязательно)
  
  Необязательное название для корня дерева выражений.
- Возвращает
  Promise<void>
  
  Chrome 152 и более поздних версий
  
  Обратный вызов, выполняемый после обновления боковой панели с результатами оценки выражения.
setHeight

void

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

Функция setHeight выглядит следующим образом:
```
(height: string) => {...}
```
- высота
  
  string
  
  Размер, заданный в формате CSS, например '100px' или '12ex'.
setObject

void

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

Функция setObject выглядит следующим образом:
```
(jsonObject: string, rootTitle?: string) => {...}
```
- jsonObject
  
  string
  
  Объект, который будет показан в контексте проверяемой страницы. Оценивается в контексте вызывающей стороны (API-клиента).
- rootTitle
  
  Строка (необязательно)
  
  Необязательное название для корня дерева выражений.
- Возвращает
  Promise<void>
  
  Chrome 152 и более поздних версий
  
  Обратный вызов, выполняемый после обновления боковой панели с объектом.
setPage

void

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

Функция setPage выглядит следующим образом:
```
(path: string) => {...}
```
- путь
  
  string
  
  Относительный путь к странице расширения, которая будет показываться на боковой панели.

SourcesPanel

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

Свойства

onSelectionChanged

Event<functionvoidvoid>

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

Функция onSelectionChanged.addListener выглядит следующим образом:
```
(callback: function) => {...}
```
- обратный вызов
  
  function
  
  Параметр callback выглядит следующим образом:
```
() => void
```
createSidebarPane

void

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

Функция createSidebarPane выглядит следующим образом:
```
(title: string) => {...}
```
- название
  
  string
  
  Текст, который показывается в подписи боковой панели.
- Возвращает
  Promise<ExtensionSidebarPane>
  
  Chrome 152 и более поздних версий
  
  Обратный вызов, который активируется при создании боковой панели.

Theme

Chrome 99 и более поздние версии browser.* начиная с Chrome 152

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

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

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

"dark"
Тёмная тема.

Свойства

elements

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

Тип

ElementsPanel

sources

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

Тип

SourcesPanel

themeName

Chrome 59 и более поздних версий browser.* начиная с Chrome 152

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

Тип

string

Методы

create()

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

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

Параметры

название

string

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

string

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

string

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

Возвраты

Promise<ExtensionPanel>

Chrome 152 и более поздних версий

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

openResource()

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

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

Параметры

url

string

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

число

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

number (необязательно)

Chrome 114 и более поздних версий browser.* начиная с Chrome 152

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

Возвраты

Promise<void>

Chrome 152 и более поздних версий

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

setOpenResourceHandler()

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

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

Параметры

обратный вызов

function необязательно

Параметр callback выглядит следующим образом:
```
(resource: Resource, lineNumber: number) => void
```
- ресурс
  
  Ресурс
  
  Объект devtools.inspectedWindow.Resource для ресурса, на который нажал пользователь.
- lineNumber
  
  число
  
  Указывает номер строки в ресурсе, на который нажал пользователь.

setThemeChangeHandler()

Chrome 99 и более поздние версии browser.* начиная с Chrome 152

browser.devtools.panels.setThemeChangeHandler(
  callback?: function,
): void

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

Параметры

обратный вызов

function необязательно

Параметр callback выглядит следующим образом:
```
(theme: Theme) => void
```
- тема
  
  Тема
  
  Текущая тема в инструментах разработчика.

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

Описание

Манифест

Пример

Типы

Button

Свойства

ElementsPanel

Свойства

ExtensionPanel

Свойства

ExtensionSidebarPane

Свойства

SourcesPanel

Свойства

Theme

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

Свойства

elements

Тип

sources

Тип

themeName

Тип

Методы

create()

Параметры

Возвраты

openResource()

Параметры

Возвраты

setOpenResourceHandler()

Параметры

setThemeChangeHandler()

Параметры

chrome.devtools.panels