Chrome扩展中JS数组可完整打印却无法遍历元素的问题

问题根源 #

你的getCurrentTabs函数虽然声明为async，但内部并没有等待chrome.tabs.query()的异步操作完成。chrome.tabs.query()返回的Promise被绑定了then回调，但函数本身没有等待这个Promise执行完毕就直接返回了。

这导致showTabsToSave里的await getCurrentTabs()实际上没有等待标签页数据被推入currentTabs数组，代码会继续往下执行——此时currentTabs还是空数组，所以currentTabs.at(0)是undefined，forEach也不会循环。

至于控制台能打印出完整数组，是因为控制台打印的是数组的引用，当后续then回调执行、数组被填充后，控制台会自动更新显示这个引用对应的最新内容，但代码执行到打印语句的那一刻，数组确实是空的。

修复方案 #

有两种简洁的修复方式：

方式1：直接await chrome.tabs.query()

修改getCurrentTabs函数，等待chrome.tabs.query()的结果，避免使用then回调：

let currentTabs = [];

async function getCurrentTabs() 
{
  const tabs = await chrome.tabs.query({});
  // 清空数组再推入，避免重复执行时数据累加
  currentTabs = [...tabs];
}

async function showTabsToSave()
{
  console.log("creating list of potential tabs to save");
  await getCurrentTabs();
  console.log(currentTabs);
  console.log(currentTabs.at(0)); // 现在能获取到第一个元素
  currentTabs.forEach((tab) =>{
    console.log(tab); // 正常遍历
  });
}

方式2：让getCurrentTabs返回Promise

如果坚持用then回调，需要让函数返回这个Promise，确保await能正确等待：

let currentTabs = [];

async function getCurrentTabs() 
{
  // 返回chrome.tabs.query的Promise
  return chrome.tabs.query({}).then((tabs) =>
  {
    currentTabs.length = 0; // 清空旧数据
    for ( const tab of tabs) 
    {
      currentTabs.push(tab);
    }
  });
}

async function showTabsToSave()
{
  console.log("creating list of potential tabs to save");
  await getCurrentTabs();
  console.log(currentTabs);
  console.log(currentTabs.at(0));
  currentTabs.forEach((tab) =>{
    console.log(tab);
  });
}

额外建议 #

尽量避免用全局变量存储异步获取的数据，更优的写法是让getCurrentTabs直接返回标签页数组，不需要依赖全局变量：

async function getCurrentTabs() 
{
  return chrome.tabs.query({});
}

async function showTabsToSave()
{
  console.log("creating list of potential tabs to save");
  const currentTabs = await getCurrentTabs();
  console.log(currentTabs);
  console.log(currentTabs.at(0));
  currentTabs.forEach((tab) =>{
    console.log(tab);
  });
}

这种写法更清晰，也避免了全局变量可能带来的状态混乱问题。

内容的提问来源于stack exchange，提问作者buckithed