获取当前选项卡ID的最简单方法？

Question

我真的不了解Chrome Extension API的工作方式。粗略地了解background.js和content.js的工作原理，但是我目前的问题是，函数insertCSS（）;即使官方文档说它是可选的，它似乎也需要tabId。

因此，该平台上的所有答案都无法帮助我，因为我什至都不了解整个API的概念。

那么谁能解释我，为什么这样的事情不可能呢？

var tabInfo = chrome.tabs.getCurrentTab();

var id = tabInfo.tabId;

Answer 1

这里有几个问题要回答。

文学问题

  

那么谁能解释我，为什么这样的事情不可能呢？

var tabInfo = chrome.tabs.getCurrentTab();

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

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

有两种处理方法：

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

标题中的问题

  

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

或“为什么chrome.tabs.getCurrentTab不能帮助您”。

chrome.tabs.getCurrentTab()返回呼叫页面的标签ID。请参见docs。

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

扩展页面为：

• 背景（无标签ID）
• 弹出窗口（无标签ID）
• 选项页面（由于嵌入在Chrome页面中，因此很复杂）
• 在其他标签页中打开了“其他”扩展页（在这里，它可以按预期工作）。

这不是您的用例，如注释中所述。

获取当前活动标签的实际方法是使用查询chrome.tabs.query()的{​​{1}}，但请继续阅读。

您遇到的实际问题

从评论中还原出来，这是您遇到的实际情况：

  

我在内容脚本中有一个事件。我需要致电tabs.insertCSS API，因此我正在向后台页面发送消息，以便为我完成此操作。如何获得此通话的{active: true, currentWindow: true}？

好吧，这里的关键是仔细研究runtime.onMessage event listener签名：

  

回调参数应为如下所示的函数：

     

tabId

什么是MessageSender？

  

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

     

tabs.Tab（可选）function(any message, MessageSender sender, function sendResponse) {...};
  tab，用于打开连接（如果有）。仅当从选项卡（包括内容脚本）打开连接时，并且仅当接收方是扩展程序而不是应用程序时，此属性才存在。

     

[...]

头奖。我们正在从内容脚本发送消息，并且监听器被tabs.Tab信息“免费”处理。我们只需要快速绕行tabs API docs来查看sender.tab包含的内容，就可以了：

Tab

误解

  

我目前的问题是，即使官方文档说它是可选的，但功能chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) { chrome.tabs.insertCSS(sender.tab.id, {/*...*/}); }); 似乎需要insertCSS()

不是。如果您省略它来调用tabId（使tabId对象成为第一个参数），则Chrome会假定您需要“当前窗口的活动标签”。

如果您尝试在后台页面的“开发工具”窗口中执行此操作，则似乎无法使用。这是因为在这种情况下，没有这样的选项卡。当前窗口是您要在其中输入console命令的窗口。因此，没有tabId的调用对当前窗口的实际情况非常敏感。

在某些情况下，您无权插入当前的活动选项卡，这也会失败。

通常，它需要指定制表符ID，从而消除了扩展逻辑的不确定性。