Extension's Icon being clicked not firing an event

Question

Trying to build a Chrome extension, I want an event to be fired when the user clicks on the extension's button.

I tried a multitude of solutions on SO, and still couldn't get the event to work. I'm using manifest version 3.

Files are below:

Manifest.json

{
  "name": "Getting Started Example",
  "description": "Build an Extension!",
  "version": "1.0",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["storage", "activeTab", "scripting"],
  "browser_action": {
    "default_icon": {
      "16": "/images/get_started16.png",
      "32": "/images/get_started32.png",
      "48": "/images/get_started48.png",
      "128": "/images/get_started128.png"
    }
  },
  "icons": {
    "16": "/images/get_started16.png",
    "32": "/images/get_started32.png",
    "48": "/images/get_started48.png",
    "128": "/images/get_started128.png"
  }
}

Background.js

chrome.browserAction.onClicked.addListener(function(tab) {
  console.log('working?');
  alert('YoU HAVE CLICKED THE ICON');
});