如何在现有Next.js应用中调用Chrome API实现书签标签组功能

首先要明确：普通网页无法直接调用Chrome的标签组/书签API，这些API是Chrome扩展专属的，只有在扩展上下文里才有访问权限。所以有两种可行路径：

路径一：将Next.js应用打包为Chrome扩展（推荐） #

这是唯一能自动实现“点击按钮在标签组打开书签”的方案，步骤如下：

1. 配置Chrome扩展清单文件 #

在项目根目录创建manifest.json，声明所需权限和扩展入口：

{
  "manifest_version": 3,
  "name": "书签管理工具",
  "version": "1.0",
  "permissions": ["tabs", "tabGroups", "bookmarks"],
  "action": {
    "default_popup": "out/index.html"
  }
}

• manifest_version: 3：采用最新的Manifest V3标准（V2即将废弃）
• permissions：必须申请tabs（操作标签）、tabGroups（管理标签组）、bookmarks（访问书签）权限
• default_popup：指向Next.js打包后的首页

2. 配置Next.js打包输出 #

修改next.config.js，将应用打包为静态导出模式以适配扩展环境：

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  trailingSlash: true,
};

module.exports = nextConfig;

3. 在组件中实现Chrome API调用 #

在Next.js组件中编写点击事件逻辑，注意规避SSR环境报错（chrome对象仅存在于浏览器扩展上下文）：

'use client'; // Next.js App Router 需添加该指令
import { useEffect, useState } from 'react';

export default function BookmarkGroupButton() {
  const [canUseChromeAPI, setCanUseChromeAPI] = useState(false);

  useEffect(() => {
    // 检测当前是否处于Chrome扩展环境
    setCanUseChromeAPI(!!window.chrome?.tabs?.create);
  }, []);

  const openBookmarksInGroup = async () => {
    if (!canUseChromeAPI) return;

    try {
      // 1. 创建新标签组
      const newGroup = await chrome.tabGroups.create({
        title: "我的书签组",
        color: "blue"
      });

      // 2. 目标书签列表（可替换为自定义列表，或从Chrome书签API读取）
      const targetBookmarks = [
        "https://example.com",
        "https://github.com",
        "https://stackoverflow.com"
      ];

      // 3. 逐个打开书签并加入标签组
      for (const url of targetBookmarks) {
        const newTab = await chrome.tabs.create({ url, active: false });
        await chrome.tabs.group({ groupId: newGroup.id, tabIds: newTab.id });
      }

      // 4. 展开标签组（可选操作）
      await chrome.tabGroups.update(newGroup.id, { collapsed: false });
    } catch (err) {
      console.error("操作失败：", err);
    }
  };

  return (
    <button 
      onClick={openBookmarksInGroup} 
      disabled={!canUseChromeAPI}
      style={{ padding: '8px 16px', cursor: canUseChromeAPI ? 'pointer' : 'not-allowed' }}
    >
      在标签组打开书签
    </button>
  );
}

4. 打包并加载扩展 #

执行npm run build打包Next.js应用，然后在Chrome浏览器中：

• 打开chrome://extensions/页面
• 开启“开发者模式”
• 点击“加载已解压的扩展程序”，选择项目根目录下的out文件夹

路径二：普通网页的替代方案（无自动分组） #

如果不想做成Chrome扩展，普通Next.js网页无法直接调用Chrome API创建标签组，只能用以下替代方式：

• 用window.open()批量打开书签，但无法自动分组，需要用户手动通过Chrome的“将标签页添加到组”功能整理
• 提示用户使用Chrome快捷键（如Ctrl+Shift+G）手动将打开的标签分组

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