firefox web extension: delaying http request onBeforeSendHeaders js

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