Cannot read property 'query' of undefined - In Vanilla Chrome Extension

Question

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.

score 14 · Accepted Answer · answered Jun 19 '20 at 01:45

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.

Cannot read property 'query' of undefined - In Vanilla Chrome Extension

1 Answers1

Linked