Web extension: delaying http request onBeforeSendHeaders

Hi,
I am trying to delay specific HTTP (video type) requests for 1 minute. When I use “setTimeout()”, it doesn’t work for more than 10 seconds. When I use a “do - while” loop, any subsequent request will be blocked. I tried to use chained promises but the request is returned immediately. below is the code of my event listener, can someone tell me what I am doing wrong?

Thanks

const videoType = "mime=video"; 
const oFilter = {urls: webpattern,types: ["xmlhttprequest"]};
let xinfo = "blocking";

function onBeforeSendHeadersHandler(requestDetails) {
    let lowerCaseUrl = requestDetails.url.toLowerCase();

    if (lowerCaseUrl.includes(videoType)) {
        let delay = 10000;
        function delayIt (val){ 
            return new Promise((resolve, reject) => {
                console.log("step:",Date(Date.now()), val);
                    setTimeout(() => {
                        resolve({ cancel: true });//(val);
                    }, delay);
            });
        }  
                 
        Promise.resolve(requestDetails).then(delayIt).then(delayIt)
           .then(delayIt).then(function (requestDetails){
               console.log("final:",Date(Date.now()), requestDetails);
        });
    }
    else {
        console.log("Another request!");
        return requestDetails;
    }
}

browser.webRequest.onBeforeSendHeaders.addListener(onBeforeSendHeadersHandler, oFilter, [xinfo, "requestHeaders"]);