使用 javascript 进行后台脚本消息传递答案

【问题标题】：Background script messaging with javascript使用 javascript 进行后台脚本消息传递
【发布时间】：2015-06-23 06:12:21
【问题描述】：

我在 Google Chrome 扩展程序中搞乱通信，并使用以下指南：https://developer.chrome.com/extensions/messaging

它曾经可以工作，但我遇到了一个错误：

响应 tabs.query 时出错：TypeError: Cannot read property 'id' 未定义的

我比较了我的代码和 Google 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);

  });

我无法修复该错误，无论我尝试什么，它都保持不变。 “无法读取未定义的属性”意味着据我了解“标签”是未定义的，但我不明白为什么它在 Google 示例中有效，而在这里却没有。

另一个问题：

如果我试图将它发送到 tabs[1]，这是否意味着它是第二个位置的标签，还是我解释错了？

【问题讨论】：

在不熟悉平台的情况下，报错表示tabs[1]未定义，此时调试脚本，看看tabs的实际内容是什么。
说："tabs: Array[0]" 但是如果你看一个谷歌的例子，它完全一样，我复制并粘贴它以满足我的需要
确保您在浏览器中至少打开了两个标签页
我还有更多，我的扩展需要两页...
如果 tabs 是 Array[0] 则 chrome.tabs.query({active: true, currentWindow: true},...) 返回一个空数组。尝试扩大您的查询范围，使其返回您正在寻找的所有选项卡。

标签： javascript jquery google-chrome google-chrome-extension communication

【解决方案1】：

tabs 是通过过滤器的所有选项卡（无论位置如何）的列表。

您的查询是{active: true, currentWindow: true}，所以通常它应该只有 1 个选项卡（因为最多有 1 个当前窗口，正好有 1 个活动选项卡）。

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

tabs[1] 在此查询中始终未定义。

tabs 为空的情况过去非常罕见（Chrome 在后台运行且未打开任何窗口）。

但是，最近进行了更改，API 将不会返回开发工具选项卡。因此，如果您正在调试您的扩展并且 Dev Tools 窗口打开并聚焦，则该数组将为空。你应该检查一下。

【讨论】：

如何选择所有标签？
空查询？ {} 阅读文档：developer.chrome.com/extensions/tabs#method-query
最后请注意，窗口内的位置由选项卡的index 属性指示，而不是返回数组中的位置。如果您想要“第二个选项卡”，您需要搜索索引或更好地在查询中包含它。
@Xan，您能否更明确地说明调试的有效解决方法是什么？当 DevTools 选项卡打开时，选项卡返回 []。您将如何检查并解决问题？
@Ovi 如果您需要从开发工具中触发依赖于query 的代码，我会用setTimeout 包装它，延迟几秒钟，然后切换到实际窗口。通常，在继续访问 tabs[0] 之前检查 tabs.length 是否为正会更可靠 - 通常不会发生这种情况，但如果您正在调试或 Chrome 在没有活动窗口的情况下运行（例如 Chrome 应用程序已打开），则可能会发生这种情况但浏览器已关闭），您应该做出相应的反应。