最简单的方法来获取当前的标签ID？

Question

我真的不知道Chrome Extension API是如何工作的。理解background.js和content.js是如何工作的是一个粗略的，但我当前的问题是，函数insertCSS（）;似乎需要tabId，即使官方文档说它是可选的。

所以，这个平台上没有任何答案可以帮助我，因为我甚至不理解整个API的概念。

所以有人可以解释我，为什么这样的事情是不可能的？

var tabInfo = chrome.tabs.getCurrentTab();

var id = tabInfo.tabId;

Answer 1

这里有几个问题需要解答。

Literal question

所以有人可以解释我，为什么这样的事情是不可能的？

var tabInfo = chrome.tabs.getCurrentTab();

简短回答：因为大多数Chrome API都没有返回值;它是异步的，这意味着Chrome的某些其他组件将在JS执行恢复时获得答案。

可以在this canonical question上阅读JS异步性的全面概述。

有两种方法可以解决它：

• 使用回调，并注意实际的回调执行发生在其余的调用代码之后。
• 使用async / await和/或Promises。 WebExtension polyfill可以帮助解决这个问题，但这超出了问题的范围。

Question in title

最简单的方法来获取当前的标签ID？

或“为什么chrome.tabs.getCurrentTab不会帮助你”。

chrome.tabs.getCurrentTab()返回调用页面的选项卡ID。见docs。

这是有限的实用程序：只有扩展页面（而不是内容脚本）可以调用此API。

扩展页面是：

• 背景（没有标签ID），
• 弹出窗口（没有标签ID），
• 选项页面（它很复杂，因为它嵌入在Chrome页面中），
• 在可见选项卡中打开“其他”扩展页面（此处，它按预期工作）。

这不是您在评论中确定的用例。

获取当前活动选项卡的实际方法是使用查询chrome.tabs.query()的{active: true, currentWindow: true}，但继续阅读。

Actual question you're having

从评论中重新构建，这是您所拥有的实际场景：

我在内容脚本中有一个事件。我需要调用tabs.insertCSS API，所以我在后台页面上发送消息给我。如何获得此次通话的tabId？

那么，关键是要仔细看看runtime.onMessage event listener签名：

callback参数应该是一个如下所示的函数：

function(any message, MessageSender sender, function sendResponse) {...};

什么是MessageSender？

包含有关发送消息或请求的脚本上下文的信息的对象。

tabs.Tab（可选）tab 打开连接的tabs.Tab，如果有的话。仅当从选项卡（包括内容脚本）打开连接时，此属性才会出现，并且仅当接收者是扩展名而不是应用程序时才会出现。

[...]

大奖。我们从内容脚本发送消息，并且听众将“免费”传递sender.tab信息。我们只需要快速绕道到tabs API docs，看看Tab包含什么，我们拥有它：

chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
  chrome.tabs.insertCSS(sender.tab.id, {/*...*/});
});

Misconception

我目前的问题是，功能insertCSS()似乎需要tabId，即使官方文档说它是可选的

它没有。如果你称之为省略tabId，这使得details对象成为第一个参数，那么Chrome将假定您想要“当前窗口的活动选项卡”。

如果您尝试在开发工具窗口中为后台页面执行它，这似乎不起作用。那是因为在这种情况下没有这样的标签。当前窗口是您将控制台命令放入的窗口。因此，没有tabId的调用对当前窗口的实际内容非常敏感。

也可能是您没有在当前活动选项卡中注入的权限，这也会失败。

一般来说，特定于标签ID是值得的，它消除了有关扩展逻辑的不确定性。