chrome.tabs.query event not triggering - google-chrome-extension

Question

I've been trying to work with chrome extensions lately and right now I'm just trying to get familiar with the chrome apis.
Specifically, I'm testing out chrome.tabs.query to create an alert with the URL of the currently active tab, but the event doesn't trigger. Here is the code for my background.js file.
chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
var activeTab = tabs[0];
var activeTabUrl = activeTab.url;
alert(activeTabUrl);
});
And here is my manifest.json. I'm pretty sure all the permissions are correct.
{
"manifest_version": 2,
"name": "Time Tracker",
"description": "Track how much time spent on ...",
"version": "1.0",
"permissions": ["history", "bookmarks", "activeTab", "tabs"],
"background":{
"service_worker": "background.js"
},
"content_scripts": [
{
"matches": ["http://*.www.youtube.com/*"],
"js": ["content.js"]
}
],
"browser_action": {
"default_popup": "popup.html",
"default_icon": "/images/clock.png"
}
}
I've also tried out other chrome apis such as chrome.history.onVisited to try and add an eventListener but nothing seems to be working.
I've added a link to the full repo here.
https://github.com/ismail-ahmed0149/Time-Tracker
Update #1 June 2. 2021 (Response to most recent comment)
Here is my most recent code my background script.
function handleUpdated(tabId, changeInfo, tabInfo) {
console.log("Updated tab: " + tabId);
console.log("Changed attributes: ");
console.log(changeInfo);
console.log("New tab Info: ");
console.log(tabInfo);
}
chrome.tabs.onUpdated.addListener(handleUpdated);
chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
var activeTab = tabs[0];
var activeTabUrl = activeTab.url;
alert(activeTabUrl);
});

Answer 1

You'll find docs for chrome.tabs events here:
LINK
(scroll down till the end)
You have to add a "onUpdated" event in your background script.