browser.webRequest.onBeforeRequest is not being triggered in my firefox extension

Question

I am trying to intercept http request made using fetch / XmlHttpRequest in my firefox extension following the example here, but nothing is logged in debugger console.

//manifest.json 
{
    "manifest_version": 3,
    ...
    "host_permissions": [
        "<all_urls>"
    ],
    "background": {
        "scripts": ["background.js"]
    },
    "permissions": ["tabs","webRequest","webRequestBlocking"]
}

//background.js

browser.webRequest.onBeforeRequest.addListener((e)=> {
    console.log(`Loading: ${e.url}`);
}, 
{urls: ["<all_urls>"], 
types: ["xmlhttprequest"]
});

some more details if that could help:
I am opening a new tab with local HTML page from extension directory using browser.action.onClicked This page is making fetch API calls and I am trying to intercept those.

Edit 2: I updated background.js to have event listners at the top as described in migration guide to manifest v3 here, still no luck.