浏览器插件开发常见需求——标签组

在 Manifest V3 版本的扩展程序中，Chrome 新增了以 chrome.tabGroups 为前缀的 API，它们是与标签组相关的方法。

这些方法里会常用到或一般返回 标签组对象 TabGroup，它包含以下常用属性：

collapsed 布尔值，标签组折叠或展开
color 字符串，标签组所标记的颜色，可以是 grey、blue、red、yellow、green、pink、purple、cyan 这 8 个值之一
id 数值，标签组的 ID 唯一标识符
title 字符串（可选），标签组的名称
windowId 数值，标签组所在的浏览器窗口的 ID 唯一标识符

获取所有标签组

使用方法 chrome.tabGroups.query(queryInfo: object) 获取符合（查询）条件的所有标签组，它是一个异步函数，立即返回的是一个 Promise，最终返回的是所有符合条件的标签组对象 TabGroup 数组。

// 借助 Chrome 提供的 API，封装一个获取当前窗口中所有标签组的方法
const getAllTabGroups = async () => {
  const tabGroups = await chrome.tabGroups.query({
    // 通过 Chrome 内置对象的属性 chrome.windows.WINDOW_ID_CURRENT 获取当前窗口的 ID 唯一标识符
    windowId: chrome.windows.WINDOW_ID_CURRENT,
  });
  return tabGroups;
};

在标签组中创建标签页

使用方法 chrome.tabs.group(options: object) 将给定的（一个或多个）标签添加到指定标签组中，它是一个异步函数，立即返回的是一个 Promise，最终返回的是该标签组 TabGroup 的 ID 唯一标识符。

该方法接受一个配置对象作为入参，该对象常用属性如下：

createProperties，该（可选）属性的值是一个对象，该对象只包含一个（可选）属性 windowId，以指定需要在哪一个窗口新建一个标签组，默认在当前窗口新建标签组

⚠️ 如果在配置对象中指定了另一个属性 groupId，则忽略该属性
groupId 数值（可选），指定将标签添加到哪一个标签组中，如果指定的标签组并不存在，就会创建一个新的标签组
tabIds 数值或数组，通过标签的 ID 指定某个标签，或一系列标签

💡 如果通过以上方法新建标签组时，并不能指定标签组的颜色和标题，可以「曲线救国」先创建一个默认的新标签组（颜色是灰色 gray，默认名称为空），再使用方法 chrome.tabGroups.update(groupId: number, updateProperties: object) 更新标签组的属性，该方法接收两个入参：

第一个参数是标签组 ID，用以指定需要修改哪一个标签组
第二个参数是一个对象用以设置所需更新的内容，可以包含以下属性：
- collapsed 布尔值（可选），标签组折叠或展开
- color 字符串，标签组所标记的颜色，可以是 grey、blue、red、yellow、green、pink、purple、cyan 这 8 个值之一
- title 字符串（可选），标签组的名称

// 借助 Chrome 提供的 API，封装一个将指定标签添加到标签组的方法
// 该方法接收两个参数，第一个参数是所需移动到标签组内的标签页的 ID，第二个参数是该标签组的一些属性（颜色和名称）
const createTabInGroup = async (tabId, group) => {
  // 先使用给定的标签 ID 创建一个新的标签组
  const groupId = await chrome.tabs.group({
    tabIds: tabId,
  });
  // 再更新该标签组的颜色和名称
  await chrome.tabGroups.update(groupId, {
    color: group.color,
    title: group.title,
  });

  return groupId;
};