chrome extension js not showing alarm or notifications – Blancer.com Tutorials and projects

I was recently trying to learn about chrome extension and was trying to show some simple alert, alarm, notification upon a button click.

alert is working for a button click but it seems i can not make it work to trigger alarm or display notification in chrome extensions. No error is being thrown either in service worker dev tool.

Here are the codes. Codes are simple and should work. But i dont know why i am not seeing anything in the chrome. I am fairly new here. any help is appreciated.

manifest.json

{
  "manifest_version": 3,
  "name": "Alarm Extension",
  "version": "1.0",
  "permissions": [
    "alarms",
    "notifications"
  ],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icon16.png",
      "48": "icon48.png",
      "128": "icon128.png"
    }
  },
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  },
  "background": {
    "service_worker": "background.js"
  }
}

popup.html

<!DOCTYPE html>
<html>
<head>
  <title>Alarm Extension</title>
</head>
<body>
  <button id="triggerAlarm">Trigger Alarm</button>
  <script src="popup.js"></script>
</body>
</html>

popup.js

document.addEventListener("DOMContentLoaded", function () {
  document.getElementById("triggerAlarm").addEventListener("click", function () {
    chrome.alarms.create({ delayInMinutes: 1 });
    alert("Alarm set for 1 minute from now!");
  });
});

background.js

chrome.alarms.onAlarm.addListener(function (alarm) {
    chrome.notifications.create({
      type: "basic",
      title: "Alarm Triggered",
      message: "Your alarm has been triggered!",
      iconUrl: "icon128.png"
    });
  });

For deployment i am going here chrome://extensions/, enabled developer mood and load unpacked

Can anyone guide what i am doing wrong?

How can i see the trigger alarm or notification in chrome?