Unable to inject CSS style from service_worker in tab after chrome.alarms has elapsed in Manifest v3

when i tried injection of CSS file using Chrome.scripting API inside chrome.alarms.onAlarm on callback from service_worker js file inside a tab

chrome.alarms.onAlarm.addListener(function() {
    chrome.scripting.insertCSS({
        target: { tabId: tabs.id },
        files: ["inject.css"]
    });
});

but it doesn’t work but when i tried chrome.action.setBadgeText it work fine similarly chrome.notifications API doen’t seems to be working inside this block

chrome.alarms.onAlarm.addListener(function() {
    chrome.action.setBadgeText({text: 'yes'});
    
});

my manifest.json file

{
    "name": "TimeCode",
    "description": "A extension to inject some specific functionallity in leetcode",
    "version": "1.0",
    "manifest_version": 3,
    "icons": {
    
        "32": "./images/output-onlinepngtools1.png",
        "48": "./images/output-onlinepngtools2.png",
        "128": "./images/output-onlinepngtools3.png"
    },
    "background": {
        "service_worker": "./background.js"
    },
    "action": {
        "default_title": "Set timer to your leetcode problem",
        "default_popup": "popup.html",
        "default_icons": {
            "32": "./images/output-onlinepngtools1.png",
            "48": "./images/output-onlinepngtools2.png",
            "128": "./images/output-onlinepngtools3.png"
        }
    },
    "permissions": [
        "activeTab",
        "tabs",
        "storage",
        "scripting",
        "alarms",
        "notifications",
        "storage"
    ],
    "host_permissions": [
        "https://leetcode.com/problems/*"
    ]
}

my background file

const tabId = async function getCurrentTab() {
    let queryOptions = { active: true, currentWindow: true };
    let [tab] = await chrome.tabs.query(queryOptions);
    return tab;
}
  
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
    if (changeInfo.status === 'complete' && /^http/.test(tab.url)) {
        chrome.scripting.executeScript({
            target: { tabId: tabId },
            files: ["./foreground.js"]})
        .then(() => {console.log("INJECTED THE FOREGROUND SCRIPT.");})
        .catch(err => console.log(err));}
});

chrome.alarms.onAlarm.addListener(function() {
    chrome.action.setBadgeText({text: 'yes'}),
    chrome.scripting.insertCSS({
        target: { tabId: tabId },
        files: ["inject.css"]
    }),
    chrome.notifications.create({
        type:     'basic',
        iconUrl:  'timeout.png',
        title:    'Time out',
        message:  'Set Time limit has passed',
        buttons: [{title: 'Continue.'}],
        priority: 2});
    
});
  
chrome.notifications.onButtonClicked.addListener(function() {
    chrome.storage.sync.get(['minutes'], function(item) {
         chrome.action.setBadgeText({text: 'ON'});
    chrome.alarms.create({delayInMinutes: item.minutes});
    });
});

popup.js file

'use strict';

function setAlarm(event) {
  let minutes = parseFloat(event.target.value);
  chrome.action.setBadgeText({text: 'ON'});
  chrome.alarms.create({delayInMinutes: minutes});
  chrome.storage.sync.set({minutes: minutes});
  window.close();
}

function clearAlarm() {
  chrome.action.setBadgeText({text: 'OFF'});
  chrome.alarms.clearAll();
  window.close();
}

//An Alarm delay of less than the minimum 1 minute will fire
// in approximately 1 minute increments if released
document.getElementById('Easy').addEventListener('click', setAlarm);
document.getElementById('Medium').addEventListener('click', setAlarm);
document.getElementById('Hard').addEventListener('click', setAlarm);
document.getElementById('cancelAlarm').addEventListener('click', clearAlarm);