Intercepting requests with "JS" in "Chrome" browser extension?

Question

JavaScript

Good day! Can someone suggest, and ideally give examples of the implementation of this task: "Intercept the request, cancel it, and then display its url and headers on pages like this
You have requested ${url} URL
With the next headers: ${ listOfHeaders}
". Everything is created using "JS" as an extension under "Chrome".

Answer 1

Well, the scheme is something like this, proxying methods

(function () {
    'use strict';

    var original = {
        open: XMLHttpRequest.prototype.open,
        send: XMLHttpRequest.prototype.send
    };

    XMLHttpRequest.prototype.open = function (method, url, async, user, password) {
        console.log(url);
        return original.open.call(this, method, url, async, user, password);
    };

    XMLHttpRequest.prototype.send = function (data) {
        console.log(data);
        return original.send.call(this, data);
    };

}());

Answer 2

Use the webRequest API to intercept HTTP requests . This API will allow you to add listeners at various stages of making HTTP requests. In listeners you can:

1. get access to request headers and bodies, to response headers
   
2. cancel and redirect requests
   
3. modify request and response headers