浏览器扩展中tabs[0]的含义是什么？是否等同于当前活动标签页？

先来看你提到的这段代码：

browser.tabs.sendMessage(tabs[0].id, {
  command: "beastify", beastURL: url
})

这里的tabs确实是包含标签页对象的数组，但它的具体内容完全取决于你是怎么获取到这个数组的——这才是搞懂问题的核心！

核心疑问拆解 #

• tabs数组的来源：
  通常你会通过browser.tabs.query()这类API获取tabs数组。比如调用browser.tabs.query({})会返回浏览器里所有打开的标签页对象数组；但如果是browser.tabs.query({active: true, currentWindow: true})，返回的数组里就只有当前窗口的活动标签页这一个元素。

• tabs[0]具体指代什么？
  这完全由你获取tabs时的查询条件决定：

  • 如果是查询所有标签页，tabs[0]就是浏览器中标签栏最左侧的那个标签页（和你视觉上看到的标签排列顺序一致）；
  • 如果是查询当前窗口的活动标签页，那tabs[0]就是这个唯一的活动标签页，因为数组里只有它一个元素；
  • 要是你用了特定查询条件（比如{url: "*://*.mozilla.org/*"}），tabs[0]就是匹配该条件的第一个标签页。

• 数组其余元素的含义：
  数组里的每个元素都是一个完整的标签页对象，包含id、url、title、active（是否为活动标签）等属性。除tabs[0]外的元素，就是符合你查询条件的其他标签页，顺序和它们在标签栏的排列一致。

• tabs[0]是否等同于当前活动标签页？
  不一定！只有当你获取tabs数组的查询条件明确指定了active: true（通常还要加上currentWindow: true限定当前窗口）时，tabs[0]才是当前活动标签页。如果是查询所有标签页，tabs[0]大概率不是活动标签页。

举个靠谱的实际例子，如果你想确保给当前活动标签页发消息，正确写法应该是先精准获取目标标签页：

// 先查询当前窗口的活动标签页
browser.tabs.query({active: true, currentWindow: true})
  .then(tabs => {
    // 这里的tabs数组只有一个元素，就是当前活动标签页
    browser.tabs.sendMessage(tabs[0].id, {
      command: "beastify", beastURL: url
    });
  });

这样就不会再混淆tabs[0]的指向啦～

内容的提问来源于stack exchange，提问作者a-yang