3

我真的不明白 Chrome 扩展 API 是如何工作的。很难理解 background.js 和 content.js 是如何工作的，但我目前的问题是，函数 insertCSS(); 似乎需要 tabId，即使官方文档说它是可选的。

所以，这个平台上的答案都不能帮助我，因为我什至不了解整个 API 的概念。

那么任何人都可以解释我，为什么这样的事情是不可能的？

var tabInfo = chrome.tabs.getCurrentTab();

var id = tabInfo.tabId;
4

1 回答 1

5

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

字面问题

那么任何人都可以解释我，为什么这样的事情是不可能的？

var tabInfo = chrome.tabs.getCurrentTab();

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

可以在这个规范问题中阅读 JS 异步性的全面概述。

有两种方法可以处理它：

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

标题中的问题

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

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

chrome.tabs.getCurrentTab()返回调用页面的标签 ID 。请参阅文档。

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

扩展页面是：

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

正如评论中所确定的，这不是您的用例。

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

您遇到的实际问题

从评论中重建，这是您遇到的实际情况：

我在内容脚本中有一个事件。我需要调用tabs.insertCSSAPI，所以我正在向后台页面发送消息来为我做这件事。我如何得到tabId这个电话？

好吧，这里的关键是仔细查看runtime.onMessage事件侦听器签名：

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

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

什么是MessageSender？

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

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

[...]

大奖。我们从内容脚本发送消息，并且听众sender.tab“免费”获得信息。我们只需要快速浏览tabsAPI 文档以查看 aTab包含的内容，并且我们拥有它：

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

误解

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

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

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

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

通常，指定标签 ID 是值得的，它消除了扩展逻辑的不确定性。

于 2019-04-13T10:26:11.370 回答