无法读取未定义的属性“查询” - 在 Vanilla Chrome 扩展中

Question

我正在尝试编写一个在 content.js 中运行计时器的简单应用程序，但也会发送网页 url 的警报。查看文档后，我想出了这个：

内容.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_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"]
    }
  ]
}

计时器工作正常，但是当我尝试实现活动选项卡的检索时，我收到此错误：

Uncaught TypeError: Cannot read property 'query' of undefined
    at content.js:2

为什么会发生这种情况？我看过其他都有同样问题的 SO 帖子 - 但这些似乎是由于访问外部资源造成的。我的应用程序是香草，所以这应该不是问题。

Answer 1

chrome.tabs API 仅在后台和弹出脚本中可用。这就是为什么它返回tabs为undefined.

如果要使用 API，可以从内容脚本向后台发送消息，后台将使用选项卡 API，然后将结果发送回内容脚本。