Chrome扩展开发：第二个书签返回undefined问题排查

你遇到的第二个书签返回undefined是两个代码bug共同导致的：

1. 递归遍历的索引逻辑错误
   你写的bookmarksArray递归函数中，每一层递归的循环变量i都是从0开始计数，直接覆盖bookmarks数组对应下标的值。Chrome书签树的根层有两个固定的文件夹节点：第一个是「书签栏」、第二个是「其他书签」，两个节点本身没有url属性。代码执行时的流程是：

• 遍历根层节点，先给bookmarks[0]、bookmarks[1]存入文件夹对应的undefined
• 递归进入「书签栏」的子节点，从i=0开始覆盖数组值，把前几个书签的url写入bookmarks[0]、bookmarks[1]等位置
• 递归返回根层后，循环走到i=1处理「其他书签」文件夹，直接把bookmarks[1]的值重新覆盖为该文件夹对应的undefined，这就是第二个书签始终读不到的核心原因。

2. 异步API时序错误
   chrome.bookmarks.getTree是异步接口，你发起调用后没有等回调执行完（书签树还没遍历、数组还没填充），就立刻执行printArray和标签跳转逻辑，读到的是上一次残留的缓存值。你之前觉得不是异步问题，只是其他数组下标碰巧没被覆盖、读到了有效值而已，本质上时序逻辑是不成立的。

调整遍历逻辑，收集书签时跳过无url的文件夹节点，用追加的方式填充数组，同时把所有依赖书签数据的逻辑移到异步回调内部执行，修复后的完整代码如下：

const bookmarks = [];

// 扩展启动时预加载一次书签
chrome.bookmarks.getTree(bookmarkTreeNodes => {
  traverseBookmarks(bookmarkTreeNodes);
});

// 新标签页打开时刷新书签缓存
chrome.tabs.onCreated.addListener(() => {
  bookmarks.length = 0;
  chrome.bookmarks.getTree(bookmarkTreeNodes => {
    traverseBookmarks(bookmarkTreeNodes);
  });
});

chrome.commands.onCommand.addListener(command => {
  const tabSelected = Number(command.charAt(8));
  chrome.bookmarks.getTree(bookmarkTreeNodes => {
    bookmarks.length = 0;
    traverseBookmarks(bookmarkTreeNodes);
    // 校验书签存在再跳转，避免越界报错
    if (bookmarks[tabSelected - 1]) {
      chrome.tabs.update({
        url: bookmarks[tabSelected - 1]
      });
    }
  });
});

// 递归遍历书签树，仅收集带url的有效书签
function traverseBookmarks(bookmarkTree) {
  for (let i = 0; i < bookmarkTree.length; i++) {
    const node = bookmarkTree[i];
    if (node.url) {
      bookmarks.push(node.url);
    }
    if (node.children) {
      traverseBookmarks(node.children);
    }
  }
}

function printArray(){
  for(let i = 0; i<bookmarks.length; i++){
    console.log(bookmarks[i]);
  }
}

• 遍历书签时不再用循环下标直接给数组赋值，遇到有效书签（带url属性、不是文件夹）就用push追加到数组末尾，彻底解决递归过程中数组项被文件夹节点覆盖的问题。
• 每次刷新书签前先清空旧数组，避免历史残留数据导致书签顺序错乱。
• 跳转逻辑移到getTree的回调内部，等书签遍历完成、数组填充完毕后再执行跳转，解决异步时序问题。
• 增加书签存在性校验，书签数量不足时不会触发无效跳转。

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