Как перехватывать HTTP-запросы в веб-расширении?

Опубликовано: 22 Декабря, 2022

В этой статье мы поймем, как перехватывать HTTP-запросы, сделанные браузером, с помощью API веб-расширения.

Что такое перехват HTTP-запроса?

Перехват HTTP-запросов означает манипулирование HTTP-запросами, сделанными браузером через пользователя или через обработчики асинхронных событий. С помощью API веб-расширения вы можете перехватывать любые веб-запросы, которые выполняются в вашем браузере. Например, вы можете изменить структуру запроса или записать сведения о запросе в консоль.

Для перехвата HTTP-запросов используйте API webRequest . Этот API позволяет добавлять прослушиватели для различных этапов создания HTTP-запроса.

С помощью этих слушателей вы можете делать следующее:

Получите доступ к заголовкам и телам запросов и заголовкам ответов.
Отмена и перенаправление запросов.
Измените заголовки запросов и ответов.

Шаги, которые необходимо выполнить, чтобы использовать этот API:

Чтобы использовать этот API, вам необходимо предоставить специальное разрешение в файле manifest.json .
Доступ к этому API возможен только с помощью фонового сценария, поэтому укажите поле фона в файле manifest.json .

Пример манифеста.json:

{
    "name": "webRequest",
    "version": "1.0.0",
    "description": "webRequests",
    "manifest_version": 2,
    "permissions": [
        "webRequest",
        "<all_urls>"
    ],
    "background": {
        "scripts": ["background.js"]
    }
}

Разрешения для API webRequest:

webRequest: чтобы получить доступ к объекту запроса
webRequestBlocking: чтобы заблокировать текущий запрос

О мероприятии и слушателе:

webRequest.onBeforeRequest — это прослушиватель, используемый для получения доступа к HTTP-запросам.

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

onBeforeRequest имеет три функции:

1. addListener: благодаря этому мы можем добавить слушателя к этому событию.

Синтаксис:

browser.webRequest.onBeforeRequest.addListener(
    listener,
    filter,
    extraInfoSpec
)

Где:

слушатель: обратный вызов, который возвращает объект сведений
filter: Фильтр, который ограничивает события, которые будут отправлены этому слушателю.
extraInfoSpec: массив строк. Дополнительные опции для мероприятия. Вы можете передать любое из следующих значений:
« блокировка »: сделайте запрос синхронным, чтобы вы могли отменить или перенаправить запрос
« requestBody »: включить requestBody в объект деталей, переданный слушателю.

2. removeListener: с помощью этого метода мы можем перестать прослушивать это событие.

Синтаксис:

browser.webRequest.onBeforeRequest.removeListener(listener)

3. hasListener: с помощью этого метода мы можем проверить, зарегистрирован ли слушатель для этого события. Возвращает true, если прослушивается, иначе false.

Синтаксис:

browser.webRequest.onBeforeRequest.hasListener(listener)

Разберемся с помощью примеров.

Пример 1. В этом примере мы будем регистрировать сообщения запроса с помощью API webRequest.

шаги:

загрузить расширение
откройте фоновый скрипт и проверьте страницу

В приведенном ниже файле вы предоставляете доступ к API веб-расширения и помогаете своему браузеру загрузить расширение.

manifest.json

{
    "description": "webRequests",
    "manifest_version": 2,
    "name": "webRequest",
    "version": "1.0",
    "permissions": [
        "webRequest",
        "<all_urls>"
    ],
    "background": {
        "scripts": ["app.js"]
    }
}

В приведенном ниже файле app.js вы регистрируете URL-адрес запроса перед запросом.

Javascript

// app.js
function logURL(requestDetails) {
    console.log(`Loading: ${requestDetails.url}`);
}
browser.webRequest.onBeforeRequest.addListener(
    logURL,
    { urls: ["<all_urls>"] }
);

Выход:

Пример 2. В этом примере мы заменим все изображения с https://media.geeksforgeeks.org/ на https://media.geeksforgeeks.org/wp-content/uploads/20220830173608/Screenshot20220830173552.png.

manifest.json

{
    "description": "webRequests",
    "manifest_version": 2,
    "name": "webRequest",
    "version": "1.0",
    "permissions": [
      "webRequest",
      "webRequestBlocking",
      "https://www.geeksforgeeks.org/","https://media.geeksforgeeks.org/"
    ],
    "background": {
      "scripts": ["app.js"]
    }
}

В приведенном ниже файле вы меняете все изображения на https://media.geeksforgeeks.org/wp-content/uploads/20220830173608/Screenshot20220830173552.png.

app.js

Javascript

let pattern = "https://media.geeksforgeeks.org/*";
const targetUrl = 
"https://media.geeksforgeeks.org/wp-content/uploads/20220830173608/Screenshot20220830173552.png";
function redirect(requestDetails) {
    console.log(`Redirecting: ${requestDetails.url}`);
    if (requestDetails.url === targetUrl) {
        return;
    }
    return {
        redirectUrl: targetUrl
    };
}
browser.webRequest.onBeforeRequest.addListener(
    redirect,
    { urls: [pattern], types: ["image", "imageset", "media"] },
    ["blocking"]
);

Выход:

HTML

Как перехватывать HTTP-запросы в веб-расширении?

Javascript

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ