Requester

Описание

Пример расширения API chrome.devtools.network с обработкой запросов и ответов в инструментах разработчика. В расширении часть данных отображается на вкладке в инструментах разработчика, а часть пересылается на страницу опций. Тела ответа в примере не используются, но возможность их получения сохранена. API chrome.devtools.network позволяет просмотреть все запросы, проходящие от открытой веб-страницы. Каждая запись, получаемая в еденичной записи chrome.devtools.network.onRequestFinished равна одной entry из HAR-архива.

Технологии

• JavaScript
• Chrome API
• Chrome DevTools

Установка

1. Загрузить zip-архив репозитория или клонировать репозиторий
2. Распаковать архив
3. Открыть браузер Google Chrome и перейти в настройки расширений путем открытия в строке ввода url:

chrome://extensions/

4. В верхней правой части экрана включить радиобаттон: 'Режим разработчика'
5. В верхней левой части экрана нажать кнопку 'Загрузить распакованное расширение' и указать путь к папке '/extension' из п.2

Описание работы

Для демонстрации работы расширения необходимо:

• установить расширение;
• открыть инструменты разработчика и перейти на вкладку 'Requester';
• нажать на значок расширения в верхней панели и открыть страницу опций;
• на вкладке 'Requester' включить чек-бокс 'Отправить статистику в модуль опций'
• перезагрузить страницу;

В итоге на вкладке 'Requester' в инструментах разработчика будет отображена статистика по запросам, а на странице опций статистика по URL. На страницу опций данные пересылаются из инструментов разработчика.

В файле 'ApiModelData.json' содержится модель данных, получаемая от метода 'chrome.devtools.network.onRequestFinished'.

Схемы взаимодействия компонентов расширения

Диаграмма пересылки сообщений между компонентами расширения Requester

Схема пересылки сообщений между компонентами расширения Requester

Дополнительно

Пример получения тела ответа с параметром 'mimeType'

function handleRequestFinished(request) {
	console.log("Server IP: ", request.serverIPAddress);
	request.getContent().then(([content, mimeType]) => {
		console.log("Content: ", content);
		console.log("MIME type: ", mimeType);
	});
}
browser.devtools.network.onRequestFinished.addListener(handleRequestFinished);