使用JavaScript进行背景脚本消息传递

Question

我在进行谷歌Chrome扩展内部通信的探索，并使用了以下指南：https://developer.chrome.com/extensions/messaging 它曾经有效，但现在我遇到了一个错误：

在tabs.query响应中出现错误：TypeError: 无法读取未定义的属性'id'

我比较了我的代码和谷歌Chrome代码，但似乎找不到导致出现该错误的原因。

chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
                chrome.tabs.sendMessage(tabs[1].id, {fen: request.needMove}, function(response) {
                    //console.log(response.farewell);
                });
            });

这是我发送的位置：

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    console.log("recv FEN : " + FEN);
   FEN = request.fen;
   setCookie("FEN_SET", "true" , 1);
   setFEN(FEN);

  });

我无论尝试什么，都无法修复那个错误。据我所理解，“Cannot read property of undefined” 意味着 'tabs' 未定义，但我不明白为什么它在 Google 的示例中有效而在这里无效。

另一个问题：

如果我正在尝试将其发送到 tabs [1]，这是否意味着它是第二个位置的选项卡，或者我解释错了？

- NotGI

---

不熟悉该平台，错误意味着“tabs [1]”未定义，请在该点调试脚本并查看“tabs”的实际内容。 - Etheryte

说： "tabs：Array [0]" 但是如果你看谷歌的例子，它完全相同，我复制并粘贴它以适应我的需求。 - NotGI

请确保您的浏览器中至少打开了两个选项卡。 - Dave

我不只有那些，我的扩展需要两个页面... - NotGI

如果tabs是Array[0]，那么chrome.tabs.query({active: true, currentWindow: true},...)将返回一个空数组。尝试扩大查询范围，以便返回您正在查找的所有选项卡。 - Sarah Elan

Answer 1

tabs是所有经过筛选的标签页的列表（不考虑位置）。

你的查询是 {active: true, currentWindow: true}，因此通常只有一个标签页（因为最多只有一个处于活动状态的标签页在当前窗口）。

所以你需要第一个元素，即tabs[0]。

使用这个查询，tabs[1] 始终为空。

---

tabs为空的情况曾经非常罕见（Chrome在后台运行且没有打开窗口）。

然而，最近的更改使API不会返回Dev工具标签页。因此，如果您正在调试扩展并且Dev工具窗口处于打开和焦点状态，则数组将为空。您应该检查这一点。

- Xan

---

空查询？{}阅读文档：https://developer.chrome.com/extensions/tabs#method-query - Xan

最终注意事项：窗口中的位置由选项卡的“索引”属性指示，而不是返回数组中的位置。如果您想要“第二个选项卡”，您需要搜索索引或更好地将其包含在查询中。 - Xan

@Ovi 如果您需要触发依赖于Dev Tools中的“query”的代码，我建议您使用setTimeout包装它，并延迟几秒钟并切换到实际窗口。一般来说，在访问tabs[0]之前检查tabs.length是否为正是更加健壮的 - 这通常不会发生，但如果您正在调试或Chrome在没有活动窗口的情况下运行（例如，打开了Chrome应用程序但浏览器已关闭），则可能会发生，您应该相应地做出反应。 - Xan

然而，最近的更改使API不会返回开发工具选项卡。因此，如果您正在调试扩展并且开发工具窗口已打开并聚焦，则该数组将为空。您应该检查这一点。- 非常好知道 - lollercoaster

{active: true, currentWindow: true} 总是返回长度为0的数组，即使在非devTools标签页上。 - SuperUberDuper