Getting Uncaught TypeError: Cannot read properties of undefined (reading 'onAuthRequired')

Question

I am using a Chrome extension to handle the Windows sign-in popup. I have created a manifest.json file and a webrequest.js file. I am able to perform the sign-in using the Chrome extension, and I am also logging messages to the browser console. However, during this process, I am encountering an 'Uncaught TypeError: Cannot read properties of undefined (reading 'onAuthRequired')' error on main browser console and after that the logs added in the webrequest.js are not getting printed.

Interestingly, when I check the console logs using the 'Inspect view: background page for the extension, the logs are printed without any error.

Please help me with this as I am working on the javascript and chrome extension for the first time.

//manifest.json

{
  "manifest_version": 2,
  "name": "Authentication",
  "description": "This chrome extension is used to auto load the automation users while running the test on Jenkins",
  "version": "2.1.0",
  "author": "",
  "content_scripts": [
    {
      "js": ["webrequest.js"],
      "matches": ["<all_urls>"]
    }
  ],
  "permissions": [
    "storage",
    "<all_urls>",
    "webRequest",
    "webRequestBlocking",
    "management"
  ],
  "background": {
    "scripts": ["webrequest.js"]
  },
  "icons": {
    "128": "/images/icon128.png",
    "48": "/images/icon48.png",
    "32": "/images/icon32.png",
    "16": "/images/icon16.png"
  }
}

//webrequest.js

var username = "admin";
var password = "admin";
var retry = 3;

chrome.webRequest.onAuthRequired.addListener(
   function handler(details) {
      console.log("Request intercepted:", details);
      if (--retry < 0) {
         console.log("Max retry reached. Canceling request.");
         return {
            cancel: true
         };
      }
      
      console.log("Trying passing user credentials.");
      
      return {
         authCredentials: {
            username: username,
            password: password
         }
      };
   },
   { urls: ["<all_urls>"] },
   ["blocking"]
);

Console logs with error

Waiting for authantication web request

webrequest.js:7 Uncaught TypeError: Cannot read properties of undefined (reading 'onAuthRequired') at webrequest.js:7:19

I have made some changes but they are not working

var username = "admin";
var password = "admin";
var retry = 3;

function addWebRequestListener() {
    chrome.webRequest.onAuthRequired.addListener(
        function handler(details) {
            console.log("Request intercepted:", details);
            if (--retry < 0) {
                console.log("Max retry reached. Canceling request.");
                return { cancel: true };
            }

            console.log("Trying passing user credentials.");

            return {
                authCredentials: {
                    username: username,
                    password: password
                }
            };
        },
        { urls: ["<all_urls>"] },
        ["blocking"]
    );
}

// Add the listener when the extension is installed or updated
chrome.runtime.onInstalled.addListener(function () {
    addWebRequestListener();
});