Chrome扩展标签组移动与非组标签排序代码冲突问题求助

问题根因 #

• Chrome 提供的chrome.tabGroups.move、chrome.tabs.move均为异步API，原有代码没有等待标签组移动完成就执行未分组标签排序逻辑，此时代码中缓存的moveIndex和初始查询的tabs数组均为移动前的旧值，位置对应关系完全错乱，导致功能失效。
• 未分组标签的提取基于初始查询的静态tabs数组，标签组移动后未分组标签的实际位置已经发生变化，旧数组的位置信息不可用。
• 原有两层循环匹配标题排序的逻辑冗余，存在同标题标签匹配错误的隐患。

修复方案 #

步骤1：将Chrome回调式API包装为Promise #

由于原有代码中chrome.storage.sync.get、标签/标签组移动接口均为回调风格，无法直接配合async/await实现顺序执行，先封装通用转换工具：

// 回调式Chrome API转Promise
const promisify = (api, ...args) => new Promise(resolve => api(...args, resolve));

步骤2：改写核心逻辑，确保异步操作按顺序执行 #

核心修改点：

1. 等待所有标签组移动完成后，再执行未分组标签的排序操作
2. 标签组移动完成后重新查询最新的未分组标签列表，不再使用初始的静态tabs缓存
3. 简化排序逻辑，直接对未分组标签数组按标题排序，避免两层循环匹配的问题
   修改后的完整代码如下：

async function titleSort(tabs) {
  // 标签组排序逻辑
  let groups = await chrome.tabGroups.query({ windowId: -1 });
  let groupTitles = groups.map(g => g.title).sort((a, b) => a.localeCompare(b));
  let groupsAlph = groupTitles.map(title => groups.find(g => g.title === title));

  // 改用Promise方式读取storage
  const data = await promisify(chrome.storage.sync.get, ["preserveGroupOrder"]);
  if (data.preserveGroupOrder === false) {
    // 全标签排序逻辑优化
    let allTabs = await promisify(chrome.tabs.query, [{ currentWindow: true }]);
    allTabs.sort((a, b) => a.title.localeCompare(b.title));
    for (let i = 0; i < allTabs.length; i++) {
      await promisify(chrome.tabs.move, allTabs[i].id, { index: i });
    }
  } else if (data.preserveGroupOrder === true) {
    // 统计每个标签组的标签数量
    const tabsInGroup = new Array(groupsAlph.length).fill(0);
    for (const tab of tabs) {
      const groupIdx = groupsAlph.findIndex(g => g.id === tab.groupId);
      if (groupIdx > -1) tabsInGroup[groupIdx]++;
    }

    // 等待所有标签组移动到左侧完成
    let moveIndex = 0;
    for (let i = 0; i < groupsAlph.length; i++) {
      await promisify(chrome.tabGroups.move, groupsAlph[i].id, { index: moveIndex });
      moveIndex += tabsInGroup[i];
    }

    // 重新查询当前窗口的未分组标签，获取最新位置信息
    const ungroupedTabs = await promisify(chrome.tabs.query, [{
      currentWindow: true,
      groupId: chrome.tabGroups.TAB_GROUP_ID_NONE
    }]);
    // 直接对未分组标签按标题排序
    ungroupedTabs.sort((a, b) => a.title.localeCompare(b.title));

    // 按顺序移动未分组标签到标签组后方
    for (let i = 0; i < ungroupedTabs.length; i++) {
      await promisify(chrome.tabs.move, ungroupedTabs[i].id, { index: moveIndex + i });
    }
  }
}

额外优化说明 #

• 避免了同标题标签匹配错误的问题
• 减少了不必要的循环嵌套，执行效率更高
• 所有异步操作按顺序执行，不会出现位置错乱问题

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