Расширение инструментов разработчика

Расширения DevTools добавляют функции в Chrome DevTools путем доступа к API расширений, специфичных для DevTools, через страницу DevTools, добавленную в расширение.

Схема архитектуры, показывающая страницу DevTools, взаимодействующую с осмотрел окно и работник службы. Показан сервисный работник взаимодействие со сценариями контента и доступ к API расширений. Страница DevTools имеет доступ к API DevTools, например, для создания панелей.
Архитектура расширения DevTools.

API-интерфейсы расширений, специфичные для DevTools, включают следующее:

Страница инструментов разработчика

Когда открывается окно DevTools, расширение DevTools создает экземпляр своей страницы DevTools, который существует, пока окно открыто. Эта страница имеет доступ к API DevTools и API расширений и может выполнять следующие действия:

  • Создавайте панели и взаимодействуйте с ними с помощью API-интерфейсов devtools.panels , включая добавление других страниц расширений в качестве панелей или боковых панелей в окно DevTools.
  • Получите информацию о проверяемом окне и оцените код в проверяемом окне с помощью API-интерфейсов devtools.inspectedWindow .
  • Получите информацию о сетевых запросах с помощью API devtools.network .
  • Расширьте панель «Рекордер» с помощью API-интерфейсов devtools.recorder .
  • Получите информацию о состоянии записи панели «Производительность» с помощью API-интерфейсов devtools.performance .

Страница DevTools может напрямую обращаться к API расширений. Это включает в себя возможность общаться с сервисным работником с помощью передачи сообщений .

Создайте расширение DevTools

Чтобы создать страницу DevTools для вашего расширения, добавьте поле devtools_page в манифест расширения:

{
  "name": ...
  "version": "1.0",
  "devtools_page": "devtools.html",
  ...
}

Поле devtools_page должно указывать на HTML-страницу. Поскольку страница DevTools должна быть локальной для вашего расширения, мы рекомендуем указывать ее с помощью относительного URL-адреса.

Члены API chrome.devtools доступны только для страниц, загруженных в окно DevTools, пока это окно открыто. Скрипты контента и другие страницы расширений не имеют доступа к этим API.

Элементы пользовательского интерфейса DevTools: панели и боковые панели.

В дополнение к обычным элементам пользовательского интерфейса расширения, таким как действия браузера, контекстные меню и всплывающие окна, расширение DevTools может добавлять элементы пользовательского интерфейса в окно DevTools:

  • Панель — это вкладка верхнего уровня, такая же, как панели «Элементы», «Источники» и «Сеть».
  • На боковой панели представлен дополнительный пользовательский интерфейс, связанный с панелью. Панели «Стили», «Вычисляемые стили» и «Прослушиватели событий» на панели «Элементы» являются примерами боковых панелей. В зависимости от версии Chrome, которую вы используете, и от того, где закреплено окно DevTools, ваши боковые панели могут выглядеть следующим образом: