How to modify requestHeaders on browser extentions javascript

I am developing a “basic” extension (addon) in firefox to modify the request headers I followed the official documentation here (copy/paste but didn’t work) https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/webRequest/onBeforeSendHeaders#details_2 changed it to the example below and still can’t make it work.

In my manifest I am asking for all the permits mentioned in the documentation:
//manifest.json

{
  ...
  "permissions": [
    "webRequest",
    "webRequestBlocking",
    "storage",
        "tabs"
  ],
  ...
}

//background.js

let currentUserAgent = '';

function updateUserAgent(userAgent) {
  currentUserAgent = userAgent;
  console.log('User agent updated:', currentUserAgent); // User agent updated: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:40.0) Gecko/20100101 Firefox/40.0
  console.log("Registering onBeforeSendHeaders event listener..."); //Registering onBeforeSendHeaders event listener...
  chrome.webRequest.onBeforeSendHeaders.addListener(
    handleRequest,
    { urls: ["<all_urls>"] },
    ["blocking", "requestHeaders"]
  );
  console.log(chrome.webRequest.onBeforeSendHeaders.hasListener(handleRequest)); //true
}

function handleRequest(details) {
  console.log('Handling request:', details); //NO LOG

  // Check if the 'user-agent' header exists
  const userAgentHeader = details.requestHeaders.find(header => header.name.toLowerCase() === 'user-agent');
  if (userAgentHeader) {
    console.log('User-Agent header found:', userAgentHeader.value); //NO LOG
    userAgentHeader.value = currentUserAgent;
    console.log('User-Agent header updated:', userAgentHeader.value); //NO LOG
  } else {
    console.log('User-Agent header not found in the request headers.'); // NO LOG
  }

  return { requestHeaders: details.requestHeaders };
}

// Retrieve the saved user agent on startup
chrome.storage.local.get('userAgent', (data) => {
  updateUserAgent(data.userAgent || 'Default User Agent');
});

// Listen for messages to update the user agent
chrome.runtime.onMessage.addListener(message => {
  if (message.action === 'updateUserAgent') {
    updateUserAgent(message.userAgent);
  }
});

Any ideas on how to make it work?

Other things I tried:
Changing the object chrome to browser, the result doesn’t change.

How do I know is not working?

When I go to the network tab the UA header hasn’t change. I also used burpsuite to capture the request and in fact the headers did not change.