Firefox WebExtensions browser.tabs.query() 返回的不可访问数组。有人可以解释为什么吗？

Question

有人可以向我解释这里发生了什么吗？我正在使用 Firefox WebExtensions API，并且遇到了一些相当奇怪的行为。这里有一些非常简单的代码来说明问题。

我正在查询所有窗口中的所有固定选项卡，我希望全局数组 var pinned = []; 将填充选项卡数据/对象。但是，至少可以说，事情有点古怪。该数组似乎已填充，但使用标准数组表示法pinned[0] 无法访问各个元素，返回undefined。我对此感到非常困惑。

那么这里发生了什么？这是关于范围或权限的问题吗？

现在是代码...

[manifest.json]

{
  "manifest_version": 2,
  "name": "test",
  "version": "1.0",
  "description": "test",
  "icons": {
    "48": "icons/page-48_white.png"
  },
  "permissions": [
    "tabs",
    "<all_urls>"
  ],
  "background": {
    "scripts": ["background.js"]
  },
  "devtools_page": "test.html",
  "browser_action": {
    "default_icon": { "48": "icons/page-48_white.png"},
    "default_title": "Test",
    "browser_style": true
  }
}

[背景.js]

function createExtPage(){
  browser.tabs.create({ "url": "test.html" });
}
browser.browserAction.onClicked.addListener(createExtPage);

[test.js]

var pinned = [];

browser.tabs.query({pinned: true})
  .then(tabs => {
    for (let [key, value] of tabs.entries() ) {
      console.log("Object " + key, value);
      pinned.push(value);
    }
  });

console.debug("All Pinned Tabs", pinned);
console.debug("First Pinned Tab", pinned[0]);

现在看看 Firefox 开发者工具控制台的输出。

  All Pinned Tabs
  []
    0: {…}
        active: false
        audible: false
        discarded: false
        favIconUrl: "http://www.crunchyroll.com/favicon.ico?v=1"
        height: 800
        hidden: false
        highlighted: false
        id: 149
        incognito: false
        index: 0
        isArticle: false
        isInReaderMode: false
        lastAccessed: 1522229700160
        mutedInfo: Object { muted: false }
        pinned: true
        sharingState: Object { camera: false, microphone: false }
        status: "complete"
        title: "Crunchyroll - Watch Naruto Shippuden, Bleach, Anime Videos and Episodes Free Online"
        url: "http://www.crunchyroll.com/"
        width: 1440
        windowId: 3
        __proto__: Object { … }
  ​
    1: {…}
        active: false
        audible: false
        discarded: false
        favIconUrl: "https://www.pandora.com/favicon.ico"
        height: 800
        hidden: false
        highlighted: false
        id: 145
        incognito: false
        index: 0
        isArticle: false
        isInReaderMode: false
        lastAccessed: 1522447564848
        mutedInfo: Object { muted: false }
        pinned: true
        sharingState: Object { camera: false, microphone: false }
        status: "complete"
        title: "All Along The Watchtower Radio - Now Playing on Pandora"
        url: "https://www.pandora.com/station/play/3395036678172411653"
        width: 1440
        windowId: 67
        __proto__: Object { … }
  ​
    2: {…}
        active: false
        audible: false
        discarded: false
        height: 800
        hidden: false
        highlighted: false
        id: 171
        incognito: false
        index: 1
        isArticle: false
        isInReaderMode: false
        lastAccessed: 1522398347238
        mutedInfo: Object { muted: false }
        pinned: true
        sharingState: Object { camera: false, microphone: false }
        status: "complete"
        title: "Debugging with Firefox Developer Tools"
        url: "about:debugging"
        width: 1440
        windowId: 67
        __proto__: Object { … }
    length: 3
  ​  __proto__: Array []

  First Pinned Tab undefined

  Object 0
    {…}
      active: false
      audible: false
      discarded: false
      favIconUrl: "http://www.crunchyroll.com/favicon.ico?v=1"
      height: 800
      hidden: false
      highlighted: false
      id: 149
      incognito: false
      index: 0
      isArticle: false
      isInReaderMode: false
      lastAccessed: 1522229700160
      mutedInfo: Object { muted: false }
      pinned: true
      sharingState: Object { camera: false, microphone: false }
      status: "complete"
      title: "Crunchyroll - Watch Naruto Shippuden, Bleach, Anime Videos and Episodes Free Online"
      url: "http://www.crunchyroll.com/"
      width: 1440
      windowId: 3
      __proto__: Object { … }

  Object 1
    {…}
      active: false
      audible: false
      discarded: false
      favIconUrl: "https://www.pandora.com/favicon.ico"
      height: 800
      hidden: false
      highlighted: false
      id: 145
      incognito: false
      index: 0
      isArticle: false
      isInReaderMode: false
      lastAccessed: 1522447564848
      mutedInfo: Object { muted: false }
      pinned: true
      sharingState: Object { camera: false, microphone: false }
      status: "complete"
      title: "All Along The Watchtower Radio - Now Playing on Pandora"
      url: "https://www.pandora.com/station/play/3395036678172411653"
      width: 1440
      windowId: 67
      __proto__: Object { … }

  Object 2
    {…}
      active: false
      audible: false
      discarded: false
      height: 800
      hidden: false
      highlighted: false
      id: 171
      incognito: false
      index: 1
      isArticle: false
      isInReaderMode: false
      lastAccessed: 1522398347238
      mutedInfo: Object { muted: false }
      pinned: true
      sharingState: Object { camera: false, microphone: false }
      status: "complete"
      title: "Debugging with Firefox Developer Tools"
      url: "about:debugging"
      width: 1440
      windowId: 67
      __proto__: Object { … }

这是真正令人讨厌的事情。如果我在 firefox 开发者工具控制台中输入 pinned[0] 我会得到这个结果

pinned[0]
  {…}
    active: false
    audible: false
    discarded: false
    favIconUrl: "http://www.crunchyroll.com/favicon.ico?v=1"
    height: 800
    hidden: false
    highlighted: false
    id: 149
    incognito: false
    index: 0
    isArticle: false
    isInReaderMode: false
    lastAccessed: 1522229700160
    mutedInfo: Object { muted: false }
    pinned: true
    sharingState: Object { camera: false, microphone: false }
    status: "complete"
    title: "Crunchyroll - Watch Naruto Shippuden, Bleach, Anime Videos and Episodes Free Online"
    url: "http://www.crunchyroll.com/"
    width: 1440
    windowId: 3
    __proto__: Object { … }    

什么给了？为什么我可以从控制台访问数组的元素而不是代码？

如您所见，固定的数组已填充，但我无法使用数组访问内部的各个元素。有谁知道为什么会这样？

Answer 1

这其实是异步代码和数组引用的问题。 让我们一步一步来看看这是怎么回事：

1. 您致电browser.tabs.query。它返回一个承诺，不会立即解决。所以暂时不用进入then部分，代码执行继续下一部分……
2. 这是console.debug("All Pinned Tabs", pinned);。您正在记录一个数组，因此您要为console.debug 提供一个对数组的引用，这在这里非常重要。此引用不会随着时间而改变：当您声明 pinned 数组并且脚本结束时，数组引用仍然是相同的。
3. 然后您转到console.debug("First Pinned Tab", pinned[0]);。此时，promise 处理程序还没有执行，因此pinned 仍然是空的，pinned[0] 实际上是undefined。这就是 undefined 被记录的原因。
4. 承诺解决：您通过 then 处理程序，接收选项卡列表作为参数并将选项卡推送到您的 pinned 数组。

请记住，您的第一个 console.debug 记录了基于数组引用的数组，该数组不会随时间改变。当您之后在控制台中查看阵列时，阵列已被填充，您在控制台中访问的是处于最终状态的阵列。这就是为什么整个数组的日志会打印数组本身。

让我们确保这一点

...通过一个小测试：在第 2 步，我们不记录pinned 数组本身，而是记录pinned 中当前所有元素的id。

var pinned = [];

browser.tabs.query({pinned: true})
  .then(tabs => {
    for (let [key, value] of tabs.entries() ) {
      console.log("Object " + key, value);
      pinned.push(value);
    }
  });

// will log an empty array since pinned tab is still empty,
// therefore, mapping tab ids will return an empty array
console.warn("All Pinned Tabs", pinned.map((t) => t.id));
// still undefined, nothing changed here
console.warn("First Pinned Tab", pinned[0]);

这是你应该得到的：

All Pinned Tabs : Array []
First Pinned Tab undefined

如何处理？

一种解决方案是在第一个 Promise 的末尾链接另一个 Promise（这成为可能，因为每个 then 处理程序返回一个新的 Promise，因此您可以将它们链接起来），如下所示：

var pinned = [];

browser.tabs.query({pinned: true})
  .then(tabs => {
    for (let [key, value] of tabs.entries() ) {
      console.log("Object " + key, value);
      pinned.push(value);
    }
  }).then( () => {
    // ✓ [1,4,3,2] or anything matching your tabs ids
    console.debug("All Pinned Tabs", pinned.map((t) => t.id));
    // ✓ First tab object: { ... } 
    console.debug("First Pinned Tab", pinned[0]);
  });

现在你确实得到了预期的结果：

All Pinned Tabs Array(4) [ 1, 4, 3, 2 ]
First Pinned Tab Object { id: 1, index: 0, windowId: 3, highlighted: false … }

请注意，您可以让第一个 promise 返回一个数组，而不是为数组操作全局变量。