Requester

Описание

Пример расширения с демонстрацией работы API chrome.webRequest. Данное API предназначено для просмотра запросов и ответов в их различных состояниях. Запросы и ответы просматриваются в фоновом режиме без открытия инструментов разработчка браузера, но нет возможности просматривать содержимое ответов. Описание всех состояний и их параметров находится в спецификации. Для запросов есть возможность просмотра тела запроса.

Технологии

• JavaScript
• Chrome API
• Chrome DevTools

Установка

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

chrome://extensions/

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

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

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

• установить расширение;
• открыть инструменты разработчика и перейти на вкладку 'Web Requester';
• обновить любую вкладку (нажать Ctrl+R) для получения запросов на вкладке Network (Сеть) и отображении их на вкладке 'Web Requester';

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

В папке 'other' содержатся модель данных, получаемая в методе chrome.webRequest.onCompleted.

API chrome.webRequest доступен в следующих модулях:

• background
• devtools
• panel
• options
• popup

Наиболее удобно отслеживать запросы и ответы в модуле 'background' и отправлять данные в другой модуль по запросу или по срабатыванию текущего метода.

Возможно использовать три способа вызова метода получения запросов и ответов:

1. Обычный вызов. Его недостатвом является невозможность передачи экземпляра класса в коллбэк-функция просмотра запроса и ответа details. Пример кода данного способа вызова:

chrome.webRequest.onBeforeSendHeaders.addListener( // onBeforeSendHeaders - тип просматривоемого события
  async function(details) {
    console.log(details)
  },
  {
    urls: ["<all_urls>"], // Обязательный параметр - разрешенные для просмотра url
    types: [ chrome.webRequest.ResourceType.XMLHTTPREQUEST ] // Необязательный параметр - тип просматриваемых запросов
  },
  [ chrome.webRequest.OnBeforeSendHeadersOptions.REQUEST_HEADERS ] // Тип запросов, для кажого вида событий указываются свои типы
)

2. Второй способ аналогичен первому, за исключением того, что методы и параметры формируются отдельно и передаются как параметры. Недостаток у данного способа такой же как у первого - проблема с передачей экземпляра класса в коллбэк. Пример кода данного способа вызова:

/**
* Создание коллбэк функции для вывода содержимого запроса и ответа
*/
let callbackOnBeforeRequest = function(details) {
    console.log(details);
}
let filterOnBeforeRequest = {
                urls: ["<all_urls>"],
                types: [ chrome.webRequest.ResourceType.XMLHTTPREQUEST ]
             }
let optExtraInfoSpecOnBeforeRequest = [ chrome.webRequest.OnBeforeRequestOptions.REQUEST_BODY ];
chrome.webRequest.onBeforeRequest.addListener(
    callbackOnBeforeRequest, filterOnBeforeRequest, optExtraInfoSpecOnBeforeRequest
)

3. Третий способ аналогичен второму, его пример приведен в файле panel.js. По способу вызова он аналогичен второму способу, но благодаря созданию метода с замыканием отсутствует недостаток с передачей экземпляра класса снаружи. В третьем способе так же возможно перенести в класс метод создания коллбэка с замыканием.