Cannot read property 'query' of undefined - In Vanilla Chrome Extension [duplicate] - google-chrome-extension

Question

This question already has answers here:
"Cannot read property of undefined" when using chrome.tabs or other chrome API in content script
(4 answers)
Closed 2 years ago.
I'm trying to program a simplistic application that runs a timer in content.js, but also sends an alert of the web page url. After looking at the documentation, I came up with this:
content.js
chrome.tabs.query({'active': true, 'windowId': chrome.windows.WINDOW_ID_CURRENT},
function(tabs){
alert(tabs[0].url);
}
);
let message = "";
console.log("Death Timer Running...");
let body = document.getElementsByTagName("body")[0];
let div = document.createElement("DIV");
div.setAttribute("CLASS", "timer");
let text = document.createElement("P1");
text.setAttribute("ID", "myText");
text.setAttribute("CLASS", "timerText");
div.appendChild(text);
body.appendChild(div);
var endDate = new Date("Oct 07, 2085 16:37:52").getTime();
var myfunc = setInterval(function() {
// code goes here
var now = new Date().getTime();
var timeLeftSeconds = parseInt((endDate - now)/1000);
var timeLeftMinutes = parseInt(timeLeftSeconds/60);
var timeLeftHours = parseInt(timeLeftMinutes/60);
var timeLeftDays = parseInt(timeLeftHours/24);
var timeLeftYears = parseInt(timeLeftDays/365);
let secondsLeft = timeLeftSeconds;
var yearsLeft = timeLeftYears;
secondsLeft -= (yearsLeft * 365 * 24 * 60 * 60)
var monthsLeft = parseInt(secondsLeft/(60*60*24*30))
secondsLeft -= (monthsLeft * 60 * 60 * 24 * 30)
var daysLeft = parseInt(secondsLeft/(60*60*24))
secondsLeft -= (daysLeft * 60 * 60 * 24)
var hoursLeft = parseInt(secondsLeft/(60*60))
secondsLeft -= (hoursLeft * 60 * 60)
var minutesLeft = parseInt(secondsLeft/(60))
secondsLeft -= (minutesLeft * 60)
message = (yearsLeft.toString() + "y, " + monthsLeft.toString() + "mo, " + daysLeft.toString() + "d, " + hoursLeft.toString() + "h, " + minutesLeft.toString() + "mi, " + secondsLeft.toString() + "s")
console.log(message)
document.getElementById("myText").innerText = message;
}, 1000)
manifest.json
{
"manifest_version":2,
"name":"Death Timer",
"version":"0.1",
"description":"A timer that helps you put things into perspective.",
"permissions":[
"activeTab", "tabs"
],
"content_scripts": [
{
"matches":[
"<all_urls>"
],
"js":["content.js"],
"css":["content.css"]
}
]
}
The timer is working fine, however when I try to implement the retrieval of the active tab, I receive this this error:
Uncaught TypeError: Cannot read property 'query' of undefined
at content.js:2
Why would this be happening? I've looked at other SO posts which all had the same problem - but those appeared to be due to the accessing of outside resources. My app is vanilla, so this shouldn't be an issue.

Answer 1

The chrome.tabs API is only available in background and popup scripts. That's why it is returning tabs as undefined.
If you want to use the API, you can send a message from the content script to the background, which will use the tabs API, then send the result back to the content script.