In this article, we will understand to intercept the HTTP requests made by the browser using web extension API.

What is Intercepting HTTP Request?

Intercepting HTTP Requests means manipulating the HTTP requests made by the browser through the user or through asynchronous event handlers. With the help of web extension API, you can intercept any kind of web requests which are done in your browser. For example, you can change the request structure or log the request details on the console.

To intercept HTTP requests, use the webRequest API. This API enables you to add listeners for various stages of making an HTTP request.

With these listeners you can do the following:

• Get access to request headers and bodies and response headers.
• Cancel and redirect requests.
• Modify request and response headers.

Steps to follow to use this API:

• To use this API you need to provide special permission in the manifest.json file.
• This API can only be accessed using the background script so specify the background field in the manifest.json file.

Example manifest.json:

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

Permissions for webRequest API:

1. webRequest: To get access to the request object
2. webRequestBlocking: To block the ongoing request

About the event and listener:

webRequest.onBeforeRequest is the listener used to get access to the HTTP requests.

This listener is triggered when a request is about to be made, and before headers are available.

onBeforeRequest has three functions :

1. addListener: Through this, we can add a listener to this event.

Syntax:

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

Where:

• listener: Callback that returns the details object
• filter: A filter that restricts the events that will be sent to this listener.
• extraInfoSpec: array of string. Extra options for the event. You can pass any of the following values:
• “blocking“: make the request synchronous, so you can cancel or redirect the request
• “requestBody“: include requestBody in the details object passed to the listener

2. removeListener: Through this method,we can stop listening to this event.

Syntax:

browser.webRequest.onBeforeRequest.removeListener(listener)

3. hasListener: Using this method we can check whether the listener is registered for this event. Returns true if it is listening, false otherwise.

Syntax:

browser.webRequest.onBeforeRequest.hasListener(listener)

Let’s understand with the help of examples.

Example 1: In this example, we will log the request messages using the webRequest API.

steps:

• load the extension
• open the background script and inspect the page

In the below file, you are providing access to the web extension API and helping your browser to load the extension.

manifest.json

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

In the below app.js file you are logging the request URL on before the request.

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

Output:

Example 2: In this example, we will replace all the images from https://media.geeksforgeeks.org/  with https://media.geeksforgeeks.org/wp-content/uploads/20220830173608/Screenshot20220830173552.png

In the below file, you are providing access to the web extension API and helping your browser to load the extension.

manifest.json

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

In the below file, you are changing all the images to  https://media.geeksforgeeks.org/wp-content/uploads/20220830173608/Screenshot20220830173552.png

app.js

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"]
);

Output: