Not able to add a custom header using declarative_net_request and rule resources in chrome extension

Question

I am trying to add a custom header "Authorization" to the outgoing request using a chrome extension. The header should be added before the request hits the api url. I tried below but the header doesn't get added to the request.

manifest.json

{
  "manifest_version": 3,
  "name": "Authorization Headers",
  "description": "Authorization Headers",
  "version": "0.3.3",
  "author": "abc",
  "minimum_chrome_version": "96",
  "offline_enabled": false,
  "content_security_policy": {
    "extension_pages": "script-src 'self' 'wasm-unsafe-eval'; object-src 'self';"
  },
  "permissions": ["declarativeNetRequestWithHostAccess","declarativeNetRequest"],
  "declarative_net_request": {
    "rule_resources": [
      {
        "id": "example_rules",
        "enabled": true,
        "path": "rules.json"
      }
    ],
    "host_permissions": [
      "*"
    ]
  }
}

rules.json

[
    {
      "id": 1,
      "priority": 1,
      "action": {
        "type": "modifyHeaders",
        "requestHeaders": [
          {
            "operation": "append",
            "header": "Authorization",
            "value": "1234"
        }
        ]
      },
      "condition": {
        "urlFilter": ".*",
        "resourceTypes": ["main_frame", "sub_frame", "stylesheet", "script", "image", "font", "object", "xmlhttprequest", "ping", "csp_report", "media", "websocket", "other"]
      }
    }
  ]
  

Am I missing something here ?