如何使用JavaScript在Chrome扩展(MV3)中实现新增标签页分组功能

1. 配置manifest.json权限 #

首先在你的扩展清单文件中声明必要权限：

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0",
  "permissions": ["tabs", "tabGroups"],
  "background": {
    "service_worker": "background.js"
  }
}

注意：tabGroups 是操作标签分组的必填权限，不要遗漏

2. 核心实现代码 #

可以在背景页、弹出页的JS逻辑中调用以下代码实现分组：

示例1：将指定标签页ID分组 #

// 示例：将ID为123、456的两个标签分到同一组
async function createTabGroup() {
  // 调用group方法创建分组，传入要分组的标签ID数组
  const groupId = await chrome.tabs.group({
    tabIds: [123, 456]
  });
  
  // 可选：配置分组的名称、颜色等属性
  await chrome.tabGroups.update(groupId, {
    title: "自定义分组名称",
    color: "blue" // 可选值：grey、blue、red、yellow、green、pink、purple、cyan
  });
}

createTabGroup();

示例2：动态筛选标签后批量分组 #

如果需要先筛选符合条件的标签再分组，可以先调用chrome.tabs.query查询：

async function groupSameDomainTabs() {
  // 示例：查询当前窗口下所有domain为github.com的标签
  const tabs = await chrome.tabs.query({
    currentWindow: true,
    url: "*://*.github.com/*"
  });
  if (tabs.length < 1) return;

  // 提取标签ID数组
  const tabIds = tabs.map(tab => tab.id);
  // 创建分组
  const groupId = await chrome.tabs.group({ tabIds });
  // 更新分组信息
  await chrome.tabGroups.update(groupId, {
    title: "GitHub项目",
    color: "green"
  });
}

3. 常见注意事项 #

• 传入tabIds的标签ID必须是当前浏览器中存在的有效ID，否则会抛出错误
• 标签分组API仅支持在Chrome 89及以上版本运行，低版本浏览器不兼容
• 如果在弹出页调用API，不要在弹出页关闭后执行异步逻辑，否则会被浏览器终止进程

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