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

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

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

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

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

Страница 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_page в манифест расширения:

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

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

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

Пространство имен браузера и расширения DevTools

В версиях Chrome 152 и более поздних расширения со страницей DevTools могут использовать пространство имен browser .

В версиях Chrome старше 152 пространство имен browser было отключено для расширений, объявляющих devtools_page . Отключение применялось ко всему расширению — не только к странице DevTools, но и ко всем контекстам скриптов, где выполняются API расширений.

Причина заключалась в проблеме совместимости с webextension-polyfill . API chrome.devtools.* до Chrome 152 работали только с обратными вызовами — они не возвращали Promises изначально, — поэтому расширения DevTools обычно полагались на полифил для их обертывания. Полифил пропускает обертывание, если определен параметр browser , предполагая, что хост уже выполнил эту работу. Если бы Chrome включил параметр browser для этих расширений, полифил ничего бы не делал, и chrome.devtools.* перестали бы возвращать Promises. Отключение параметра browser позволяло полифилу продолжать обертывание.

Эта же функция отказа от участия также отключила другие изменения API обмена сообщениями Chrome 148 для этих расширений, включая ответы Promise в runtime.onMessage . Ограничение было снято после того, как API инструментов разработчика стали поддерживать Promise нативно.

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

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

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

Окно инструментов разработчика, отображающее панель «Элементы» и боковую панель «Стили».

Каждая панель представляет собой отдельный HTML-файл, который может содержать другие ресурсы (JavaScript, CSS, изображения и т. д.). Для создания простой панели используйте следующий код:

chrome.devtools.panels.create("My Panel",
    "MyPanelIcon.png",
    "Panel.html",
    function(panel) {
      // code invoked on panel creation
    }
);

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

Для создания простой боковой панели используйте следующий код:

chrome.devtools.panels.elements.createSidebarPane("My Sidebar",
    function(sidebar) {
        // sidebar initialization code here
        sidebar.setObject({ some_data: "Some data to show" });
});

Существует несколько способов отображения контента в боковой панели:

HTML-содержимое: вызовите setPage() , чтобы указать HTML-страницу для отображения в панели.
Данные в формате JSON: передайте объект JSON в setObject() .
Выражение JavaScript: Передайте выражение в setExpression() . Инструменты разработчика вычислят выражение в контексте проверяемой страницы, а затем отобразят возвращаемое значение.

Для функций setObject() и setExpression() панель отображает значение так, как оно выглядело бы в консоли инструментов разработчика. Однако setExpression() позволяет отображать элементы DOM и произвольные объекты JavaScript, в то время как setObject() поддерживает только объекты JSON.

Взаимодействие между компонентами расширения

В следующих разделах описаны некоторые полезные способы обеспечения взаимодействия компонентов расширений DevTools друг с другом.

Внедрить скрипт контента

Для внедрения скрипта содержимого используйте scripting.executeScript() :

// DevTools page -- devtools.js
chrome.scripting.executeScript({
  target: {
    tabId: chrome.devtools.inspectedWindow.tabId
  },
  files: ["content_script.js"]
});

Идентификатор вкладки проверяемого окна можно получить с помощью свойства inspectedWindow.tabId .

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

Выполните JavaScript в проверяемом окне.

Метод inspectedWindow.eval() позволяет выполнять код JavaScript в контексте проверяемой страницы. Вызов метода eval() можно осуществить на странице, панели или боковой панели инструментов разработчика.

Внимание: используйте eval() только в том случае, если вам необходим доступ к содержимому JavaScript проверяемой страницы. В противном случае мы рекомендуем использовать метод scripting.executeScript() для запуска скриптов. Для получения дополнительной информации см. inspectedWindow .

По умолчанию выражение вычисляется в контексте основного фрейма страницы. inspectedWindow.eval() использует тот же контекст выполнения скрипта и параметры, что и код, введенный в консоли DevTools, что позволяет получить доступ к функциям API утилит консоли DevTools при использовании eval() . Например, используйте его для проверки первого элемента скрипта в разделе <head> HTML-документа:

chrome.devtools.inspectedWindow.eval(
  "inspect($$('head script')[0])",
  function(result, isException) { }
);

Вы также можете установить useContentScriptContext в true при вызове inspectedWindow.eval() , чтобы оценить выражение в том же контексте, что и скрипты содержимого. Для использования этой опции используйте статическое объявление скрипта содержимого перед вызовом eval() , либо вызвав executeScript() , либо указав скрипт содержимого в файле manifest.json . После загрузки контекста скрипта содержимого вы также можете использовать эту опцию для внедрения дополнительных скриптов содержимого.

Передайте выбранный элемент в скрипт содержимого.

Скрипт содержимого не имеет прямого доступа к текущему выбранному элементу. Однако любой код, выполняемый с помощью inspectedWindow.eval() имеет доступ к консоли DevTools и API Console Utilities. Например, в выполняемом коде вы можете использовать $0 для доступа к выбранному элементу.

Чтобы передать выбранный элемент в скрипт содержимого:

Создайте в скрипте содержимого метод, который принимает выбранный элемент в качестве аргумента.
```
function setSelectedElement(el) {
    // do something with the selected element
}
```
Вызовите метод со страницы DevTools, используя inspectedWindow.eval() с параметром useContentScriptContext: true .
```
chrome.devtools.inspectedWindow.eval("setSelectedElement($0)",
    { useContentScriptContext: true });
```

Параметр useContentScriptContext: true указывает, что выражение должно вычисляться в том же контексте, что и скрипты содержимого, чтобы иметь доступ к методу setSelectedElement .

Получить `window` справочной панели

Для вызова postMessage() из панели инструментов разработчика вам потребуется ссылка на её объект window . Получить iframe-окно панели можно из обработчика события panel.onShown :

extensionPanel.onShown.addListener(function (extPanelWindow) {
    extPanelWindow instanceof Window; // true
    extPanelWindow.postMessage( // …
});

Отправляйте сообщения из внедренных скриптов на страницу инструментов разработчика.

Код, внедренный непосредственно на страницу без скрипта содержимого, включая добавление тега <script> или вызов inspectedWindow.eval() , не может отправлять сообщения на страницу DevTools с помощью runtime.sendMessage() . Вместо этого мы рекомендуем объединить внедренный скрипт со скриптом содержимого, который может выступать в качестве посредника, и использовать метод window.postMessage() . В следующем примере используется фоновый скрипт из предыдущего раздела:

// injected-script.js

window.postMessage({
  greeting: 'hello there!',
  source: 'my-devtools-extension'
}, '*');

// content-script.js

window.addEventListener('message', function(event) {
  // Only accept messages from the same frame
  if (event.source !== window) {
    return;
  }

  var message = event.data;

  // Only accept messages that we know are ours. Note that this is not foolproof
  // and the page can easily spoof messages if it wants to.
  if (typeof message !== 'object' || message === null ||
      message.source !== 'my-devtools-extension') {
    return;
  }

  chrome.runtime.sendMessage(message);
});

Другие альтернативные методы передачи сообщений можно найти на GitHub .

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

Чтобы отслеживать, открыто ли окно DevTools, добавьте слушатель onConnect к сервис-воркеру и вызовите метод connect() со страницы DevTools. Поскольку каждая вкладка может иметь открытое собственное окно DevTools, вы можете получать несколько событий connect. Чтобы отслеживать, открыто ли какое-либо окно DevTools, подсчитайте события connect и disconnect, как показано в следующем примере:

// background.js
var openCount = 0;
chrome.runtime.onConnect.addListener(function (port) {
    if (port.name == "devtools-page") {
      if (openCount == 0) {
        alert("DevTools window opening.");
      }
      openCount++;

      port.onDisconnect.addListener(function(port) {
          openCount--;
          if (openCount == 0) {
            alert("Last DevTools window closing.");
          }
      });
    }
});

На странице «Инструменты разработчика» устанавливается соединение следующим образом:

// devtools.js

// Create a connection to the service worker
const serviceWorkerConnection = chrome.runtime.connect({
    name: "devtools-page"
});

// Send a periodic heartbeat to keep the port open.
setInterval(() => {
  port.postMessage("heartbeat");
}, 15000);

Примеры расширений DevTools

Примеры на этой странице взяты со следующих страниц:

Расширение Polymer Devtools — использует множество вспомогательных функций, работающих на главной странице, для запроса состояния DOM/JS и отправки его обратно в пользовательскую панель.
Расширение React DevTools — использует подмодуль рендерера для повторного использования компонентов пользовательского интерфейса DevTools.
Ember Inspector — общее ядро расширений с адаптерами для Chrome и Firefox.
Coquette-inspect — это простое расширение на основе React с агентом отладки, внедряемым в главную страницу.
В разделе Sample Extensions вы найдете множество полезных расширений, которые стоит установить, попробовать и изучить.

Более подробная информация

Для получения информации о стандартных API, которые могут использовать расширения, см. API chrome.* и веб-API .

Оставляйте отзывы! Ваши комментарии и предложения помогают нам улучшать API.

Примеры

Примеры использования API DevTools можно найти в разделе «Примеры» .

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

Страница DevTools

Создайте расширение для инструментов разработчика.

Пространство имен браузера и расширения DevTools

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

Взаимодействие между компонентами расширения

Внедрить скрипт контента

Выполните JavaScript в проверяемом окне.

Передайте выбранный элемент в скрипт содержимого.

Получить window справочной панели

Отправляйте сообщения из внедренных скриптов на страницу инструментов разработчика.

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

Примеры расширений DevTools

Более подробная информация

Примеры

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

Получить `window` справочной панели