如何修改Chrome扩展代码实现YouTube标签页按视频时长升序排序

前置权限检查 #

首先确保你的manifest.json配置了对应权限，以下是Manifest V3版本的参考配置：

{
  "manifest_version": 3,
  "name": "YouTube标签时长排序",
  "version": "1.0",
  "permissions": ["tabs", "scripting"],
  "host_permissions": ["*://*.youtube.com/*"],
  "action": {
    "default_popup": "popup.html"
  }
}

如果你使用Manifest V2，把scripting权限替换为activeTab，host_permissions替换为permissions下的"<all_urls>"即可。

核心逻辑说明 #

你原有代码的核心问题是chrome.tabs.executeScript是异步接口，回调返回的顺序和调用顺序不一定一致，无法直接和原始标签列表做绑定。我们通过Promise封装异步调用，等所有标签的时长都获取完成并和对应标签ID绑定后，再执行排序和移动操作。

完整popup.js代码 #

// 封装获取单个标签视频时长的方法，返回Promise保证异步结果可追踪
function getTabVideoDuration(tab) {
  return new Promise((resolve) => {
    // 非YouTube播放页直接返回极大值，排在所有视频标签最后
    if (!tab.url.includes('youtube.com/watch')) {
      resolve({
        tabId: tab.id,
        duration: Infinity
      })
      return
    }
    // 向目标标签注入脚本获取视频时长
    chrome.scripting.executeScript({
      target: { tabId: tab.id },
      func: () => {
        const videoEle = document.querySelector('video')
        // 视频未加载完成的情况也返回极大值，可根据需求自行调整
        return videoEle?.duration || Infinity
      }
    }).then(res => {
      resolve({
        tabId: tab.id,
        duration: res[0].result
      })
    }).catch(() => {
      // 脚本执行失败的标签默认排最后
      resolve({
        tabId: tab.id,
        duration: Infinity
      })
    })
  })
}

// 主执行逻辑
chrome.tabs.query({windowId: chrome.windows.WINDOW_ID_CURRENT}, async (tabs) => {
  // 并行获取所有标签的视频时长，绑定标签ID
  const tabWithDurationList = await Promise.all(tabs.map(tab => getTabVideoDuration(tab)))
  // 按视频时长升序排序
  tabWithDurationList.sort((itemA, itemB) => itemA.duration - itemB.duration)
  // 按排序后的顺序移动标签位置
  for (let i = 0; i < tabWithDurationList.length; i++) {
    chrome.tabs.move(tabWithDurationList[i].tabId, {index: i})
  }
  // 排序完成后自动关闭弹出层，可注释掉这行保留弹出层
  window.close()
})

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