1. 项目概述：为什么我们需要一个更好的Gemini对话管理器

如果你和我一样，是Google Gemini（前身为Bard）的重度用户，每天用它来辅助编程、撰写文档、进行头脑风暴，那你肯定也遇到过同样的困扰：对话历史的管理简直是一场灾难。Gemini的官方界面只提供了一个简单的、按时间倒序排列的对话列表。当你累积了几百个对话后，想要找到上周讨论过的某个特定Python脚本优化方案，或者上个月关于市场策略的头脑风暴记录，唯一的办法就是像翻旧账一样，一页一页地手动滚动、凭记忆搜索关键词。没有文件夹分类，没有标签系统，更别提批量导出备份了——这对于一个旨在提升效率的生产力工具来说，本身就是一个巨大的效率黑洞。

这就是我动手开发这个免费Chrome扩展的初衷。我需要的不是一个复杂的、功能臃肿的第三方客户端，而是一个轻量级的“增强插件”。它能无缝集成在Gemini的官方网页界面里，在不改变原有操作习惯的前提下，用最小的侵入性，解决最痛的点： 信息归档与检索 。这个扩展的核心目标很明确：为Gemini添加文件夹分类、标签管理以及对话导出功能，让你宝贵的对话资产变得井井有条，随时可查、可用、可备份。目前迭代到v1.5.0版本，它已经从一个简单的想法，变成了一个稳定、功能完整且完全免费的工具。接下来，我会详细拆解整个项目的设计思路、技术实现细节，以及那些在开发过程中踩过的坑和收获的经验。

2. 核心功能设计与技术选型背后的考量

2.1 功能架构：轻量级增强而非重造轮子

在项目启动前，我首先明确了几个核心设计原则，这直接决定了后续的技术路径：

  1. 无感集成 ：用户安装扩展后，访问 gemini.google.com ，扩展应自动激活，并将功能UI（如新建文件夹按钮、标签输入框、导出菜单）自然地“注入”到Gemini原有的页面结构中。用户感觉像是Gemini官方突然更新了这些功能，而不是在使用另一个工具。
  2. 数据本地化优先 ：所有创建的文件夹、分配的标签等元数据，优先存储在用户的浏览器本地（IndexedDB）。这意味着你的分类体系完全私有，不会上传到任何第三方服务器，也与你的Google账户无关。只有当你执行“导出”操作时，才会触及对话内容本身。
  3. 操作异步与非阻塞 ：任何扩展操作（如为对话添加标签、移动文件夹）都不能阻塞或影响用户与Gemini的正常交互。这要求所有DOM操作和数据处理都必须是异步的，并且要有良好的错误处理和状态反馈。

基于这些原则，扩展的核心功能模块被设计为：

  • 文件夹树 ：在侧边栏或顶部添加一个可折叠、可拖拽排序的文件夹树视图。支持创建、重命名、删除文件夹，以及通过拖放将对话移入/移出文件夹。
  • 标签系统 ：为每个对话提供标签输入功能。支持输入建议、多标签、颜色标记。标签数据与对话ID关联存储。
  • 导出功能 ：提供多种导出格式（如纯文本、Markdown、JSON）和范围选择（单个对话、当前文件夹内所有对话、所有带某标签的对话）。导出过程在后台进行，生成文件供用户下载。

2.2 技术栈选型：为什么是Manifest V3 + Vanilla JS + IndexedDB

这是一个浏览器扩展项目，技术选型相对固定，但每个选择都有其权衡：

  • Manifest V3 (MV3) ：这是现代Chrome扩展的开发规范。尽管MV3对某些高级API（如 webRequest 拦截）进行了限制，但它更安全、性能更好，并且是Chrome商店未来的强制要求。对于本项目（主要操作DOM和本地存储），MV3的能力完全足够，且能确保扩展的长期可用性。

    注意 ：从MV2迁移到MV3需要特别注意后台脚本（Service Worker）的生命周期和消息传递方式的变化，这是早期开发的一个小坑。

  • Vanilla JavaScript (原生JS) ：没有选择React或Vue等前端框架。原因有三：1) 体积极小 ：扩展包可以控制在几百KB，加载和注入速度极快。2) 依赖简单 ：无需复杂的构建流程（Webpack, Vite），开发调试更直接。3) 控制力强 ：直接操作DOM在与现有页面深度集成时更灵活、更可预测。当然，这要求对原生DOM API和事件处理有较好的掌握。

  • IndexedDB ：作为本地存储方案。相比 localStorage ，IndexedDB支持存储大量结构化数据（用户可能有成千上万个对话的元数据），并且提供异步事务API，不会阻塞主线程。它非常适合存储文件夹、标签以及对话ID的映射关系这类“数据库”型数据。

    • 数据库设计 ：我设计了两个主要的“对象存储空间(Object Store)”：
      1. folders : 存储文件夹信息（id, name, parentId, order）。
      2. conversationTags : 存储对话与标签的关联（conversationId, tags[]）。
    • 版本迁移 ：从v1.0.0到v1.5.0，数据库schema有过更新（例如为标签增加颜色字段）。利用IndexedDB的 onupgradeneeded 事件，可以平滑地进行版本升级和数据迁移，这是确保用户升级后数据不丢失的关键。

  • Chrome APIs ：核心依赖包括：

    • chrome.tabs 和 chrome.runtime : 用于扩展各部件（弹出页、内容脚本、后台脚本）之间的通信。
    • chrome.storage (可选): 用于存储少量简单的配置项（如UI主题偏好），但主要数据仍在IndexedDB。
    • chrome.downloads : 用于触发导出文件的下载，这是实现“一键导出”功能的基础。

3. 核心实现细节与关键代码解析

3.1 内容脚本注入与DOM元素探测

扩展与Gemini页面交互的桥梁是 内容脚本(Content Script) 。难点在于，Gemini是一个复杂的单页应用(SPA)，其DOM结构会在用户导航时动态变化。简单地在 document.ready 时执行一次注入是不够的。

解决方案：使用MutationObserver进行动态探测。 

// content-script.js
function initExtension() {
  // 检查核心容器元素是否已加载
  const mainContainer = document.querySelector('特定Gemini容器选择器，例如[data-testid="conversation-list"]的父元素');
  if (!mainContainer) {
    // 如果没找到，等待一段时间或通过MutationObserver监听
    return false;
  }

  // 注入我们的UI组件
  injectFolderSidebar(mainContainer);
  injectTagInputs();
  // ... 其他初始化
  return true;
}

// 使用MutationObserver监听DOM变化，以应对SPA路由切换
const observer = new MutationObserver((mutations) => {
  // 检查是否有新的节点添加，或者特定的属性变化表明页面状态已刷新
  for (const mutation of mutations) {
    if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
      // 简单的防抖，避免频繁初始化
      clearTimeout(initTimeout);
      initTimeout = setTimeout(() => {
        if (!isInitialized) { // 防止重复初始化
          isInitialized = initExtension();
        }
      }, 500);
    }
  }
});

observer.observe(document.body, { childList: true, subtree: true });

// 首次尝试初始化
initExtension();

实操心得 ：选择正确的 selector 来定位Gemini的容器元素是关键。Google的类名可能经常变动，所以我选择了相对稳定的 data-testid 属性或基于语义的层级选择器。同时，观察者回调函数里一定要加防抖( debounce )，否则在页面快速变化时会导致性能问题甚至初始化冲突。

3.2 文件夹树的渲染与拖放交互

渲染一个可交互的文件夹树涉及递归组件渲染和复杂的拖放逻辑。为了保持轻量，我没有引入像 d3-hierarchy 这样的库，而是自己实现了递归渲染。

核心数据结构与渲染 ：

// 文件夹树节点
class FolderNode {
  constructor(id, name, children = []) {
    this.id = id;
    this.name = name;
    this.children = children;
    this.collapsed = false;
  }
}

// 递归渲染函数
function renderFolderTree(node, parentElement) {
  const li = document.createElement('li');
  li.dataset.folderId = node.id;

  // 创建文件夹项（包含图标、名称、操作按钮）
  const itemDiv = document.createElement('div');
  itemDiv.className = 'folder-item';
  itemDiv.innerHTML = `
    <span class="toggle-icon">${node.collapsed ? '▶' : '▼'}</span>
    <span class="folder-name">${escapeHtml(node.name)}</span>
    <button class="add-subfolder-btn">+</button>
  `;

  // 拖放事件处理
  itemDiv.draggable = true;
  itemDiv.addEventListener('dragstart', handleDragStart);
  itemDiv.addEventListener('dragover', handleDragOver);
  itemDiv.addEventListener('drop', handleDrop);

  li.appendChild(itemDiv);

  // 递归渲染子文件夹
  if (node.children.length > 0 && !node.collapsed) {
    const childUl = document.createElement('ul');
    node.children.forEach(child => renderFolderTree(child, childUl));
    li.appendChild(childUl);
  }

  parentElement.appendChild(li);
}

拖放实现要点 ：

  1. 数据传递 ： dragstart 事件中，使用 event.dataTransfer.setData('text/plain', folderId) 来传递被拖拽文件夹的ID。
  2. 视觉反馈 ：在 dragover 事件中，通过 event.preventDefault() 允许放置，并修改目标元素的样式（如添加一个背景色）。
  3. 放置处理 ：在 drop 事件中，获取拖拽源ID和目标ID，计算新的父子关系或排序，然后更新IndexedDB中的数据，并重新渲染受影响的树部分。
  4. 对话放入文件夹 ：逻辑类似，但需要区分拖拽源是“对话列表项”还是“文件夹”。我为对话项也设置了唯一的 data-conversation-id 属性。

踩坑记录 ：最初我试图在拖放后立即更新DOM，然后异步更新数据库。这导致了状态不一致：如果数据库更新失败，UI状态就回不去了。 正确的做法是“数据库优先” ：先向后台脚本发送消息，在IndexedDB中原子化地完成数据更新，成功后，后台脚本再通知内容脚本“数据已变更”，内容脚本然后从数据库重新拉取最新数据并更新UI。这保证了数据源是唯一的真理。

3.3 标签系统的实现与输入优化

标签功能需要提供一个流畅的输入体验。我实现了一个类似Gmail或Notion的标签输入框。

关键技术点 ：

  • 输入框与标签展示分离 ：一个 contenteditable 的div作为输入区域，已添加的标签渲染为独立的、可删除的“小气泡”元素放在其前面。
  • 分词与确认 ：监听输入框的 keydown 事件，在用户按下逗号( , )或回车( Enter )时，将当前输入内容生成一个新标签。
  • 自动补全 ：根据已输入的字符，从IndexedDB中查询已有的标签列表进行过滤，以下拉列表形式展示。这里使用了防抖查询，避免输入每个字符都去查数据库。
  • 数据关联存储 ：每个对话在IndexedDB的 conversationTags 存储空间中有一条记录， key 为对话ID， value 是一个标签数组。当在Gemini页面切换对话时，内容脚本会监听页面变化，获取当前对话ID，然后从数据库加载对应的标签并渲染。
// 简化的标签输入处理
class TagInput {
  constructor(inputElement, conversationId) {
    this.input = inputElement;
    this.conversationId = conversationId;
    this.tags = [];
    this.loadTags();

    this.input.addEventListener('keydown', (e) => {
      if (e.key === ',' || e.key === 'Enter') {
        e.preventDefault();
        const tagText = this.input.textContent.trim();
        if (tagText) {
          this.addTag(tagText);
          this.input.textContent = '';
        }
      }
      // 输入防抖查询建议
      this.debouncedFetchSuggestions();
    });
  }

  async addTag(tagName) {
    this.tags.push(tagName);
    await this.saveToIndexedDB();
    this.renderTags();
  }

  async saveToIndexedDB() {
    const db = await getDB(); // 获取IndexedDB连接
    const tx = db.transaction('conversationTags', 'readwrite');
    const store = tx.objectStore('conversationTags');
    await store.put({ conversationId: this.conversationId, tags: this.tags });
  }
}

3.4 对话导出功能的实现

导出功能是相对独立但逻辑严谨的模块。它需要：

  1. 获取对话内容 ：从Gemini页面抓取指定对话的DOM结构。
  2. 解析与清洗 ：将DOM转换为结构化的文本或Markdown。
  3. 格式组装 ：按照用户选择的格式（如JSON、Markdown）组装数据。
  4. 触发下载 ：使用 Blob 和 URL.createObjectURL 生成文件，并通过 chrome.downloads.download API或创建一个隐藏的 <a> 标签触发下载。

获取对话内容的挑战 ：Gemini的对话历史是懒加载的，并且DOM结构可能很深。不能简单地 document.querySelector 。我的方法是：

  • 首先，通过扩展的UI（如勾选框）让用户选择要导出的对话。扩展会记录这些对话的ID（通常可以从URL或DOM属性中提取）。
  • 然后，通过后台脚本( background.js )或一个临时弹出的页面，逐个导航到这些对话的URL（格式如 https://gemini.google.com/chat/{conversationId} ）。
  • 在每个对话页面，内容脚本执行一个 预定义的提取函数 ，该函数专门针对Gemini的DOM结构编写，提取用户和AI的每条消息、时间戳等信息。
  • 将提取的数据传递回后台脚本进行汇总和格式化。

导出为Markdown的示例 ：

function convertToMarkdown(conversationData) {
  let md = `# Conversation: ${conversationData.title || conversationData.id}\n\n`;
  md += `- **Date:** ${conversationData.createdAt}\n`;
  md += `- **Tags:** ${conversationData.tags.join(', ')}\n\n---\n\n`;

  conversationData.messages.forEach((msg, index) => {
    const role = msg.role === 'user' ? '**You:**' : '**Gemini:**';
    // 清理消息内容中的多余换行，并确保代码块被正确包裹
    const content = msg.content.replace(/```(\w+)?\n([\s\S]*?)```/g, '```$1\n$2```');
    md += `${role}\n\n${content}\n\n---\n\n`;
  });

  return md;
}

重要提示 ：由于需要自动导航到多个页面并抓取内容，这部分功能必须放在 后台脚本(Service Worker) 或 弹出页(Popup) 的上下文中执行，因为内容脚本的权限和生命周期受限。同时，要尊重 robots.txt 和网站的使用条款，此扩展仅用于导出用户自己的对话数据，且操作频率被刻意限制（如添加延迟），以避免对Google服务器造成不必要的负载。

4. 开发、调试与发布全流程实录

4.1 开发环境搭建与高效调试技巧

Chrome扩展开发最舒服的方式就是使用Chrome自身的开发者工具。

  1. 加载未打包的扩展 ：

    • 打开 chrome://extensions/ 。
    • 开启右上角的“开发者模式”。
    • 点击“加载已解压的扩展程序”，选择你的项目根目录（包含 manifest.json 的文件夹）。
    • 任何代码修改后，回到这个页面，点击对应扩展的“刷新”图标即可生效。

  2. 调试内容脚本 ：

    • 打开Gemini网页 ( gemini.google.com )。
    • 按F12打开开发者工具。
    • 转到 “Sources” 标签页，在左侧导航栏中，你会发现一个名为 “Content scripts” 的目录，下面列出了你的扩展ID。在这里你可以找到并给你的内容脚本文件设置断点，就像调试普通网页JS一样。
    • console.log 的输出会出现在开发者工具的 “Console” 标签页中，但务必注意选择正确的上下文（通常下拉菜单中会显示“top”或你的扩展名）。

  3. 调试后台脚本(Service Worker) ：

    • 在 chrome://extensions/ 页面，找到你的扩展，点击“service worker”链接（通常是一个蓝色超链接），会打开一个独立的开发者工具窗口，专门用于调试后台脚本。
    • 后台脚本的 console.log 输出就在这个独立窗口的Console里。

  4. 调试弹出页(Popup) ：

    • 右键点击浏览器工具栏中的扩展图标，选择“审查弹出内容”，就会打开一个针对弹出页HTML的小型开发者工具窗口。

实操心得 ：大量使用 console.log 配合 JSON.stringify 来输出对象状态。对于DOM操作，善用开发者工具的 “Elements” 面板，可以实时查看你的扩展注入的HTML元素和样式，并直接修改来测试效果。

4.2 版本迭代与数据迁移策略

从v1.0.0到v1.5.0，我增加了标签颜色、文件夹图标、导出格式选择等功能。每次版本升级，都可能涉及IndexedDB数据库结构的变更。

安全的数据迁移方案 ： 在打开数据库时，指定一个更高的版本号，然后在 onupgradeneeded 事件中执行迁移逻辑。

// db.js - 数据库初始化与升级
const DB_NAME = 'gemini-organizer-db';
const DB_VERSION = 3; // 每次升级递增

function openDatabase() {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open(DB_NAME, DB_VERSION);

    request.onupgradeneeded = (event) => {
      const db = event.target.result;
      const oldVersion = event.oldVersion;

      // 从版本0（数据库初次创建）升级到版本1
      if (oldVersion < 1) {
        // 创建初始存储空间
        const folderStore = db.createObjectStore('folders', { keyPath: 'id' });
        folderStore.createIndex('parentId', 'parentId', { unique: false });
        db.createObjectStore('conversationTags', { keyPath: 'conversationId' });
      }

      // 从版本1升级到版本2：为标签增加color字段
      if (oldVersion < 2) {
        const transaction = event.target.transaction;
        const tagStore = transaction.objectStore('conversationTags');
        // 需要遍历所有记录，添加默认颜色
        // 注意：这里不能直接修改结构，需要在新版本中读取-修改-写回
        // 更安全的做法是在打开数据库后，运行一个迁移函数
        console.log('需要运行迁移脚本v1->v2');
        // 实际迁移逻辑在另一个函数中，通过版本号判断执行
      }

      // 从版本2升级到版本3：新增配置存储
      if (oldVersion < 3) {
        db.createObjectStore('settings', { keyPath: 'key' });
      }
    };

    request.onsuccess = (event) => {
      const db = event.target.result;
      // 根据当前DB_VERSION和oldVersion，执行可能的数据迁移脚本
      runDataMigrations(db, request.result.version, oldVersion);
      resolve(db);
    };

    request.onerror = (event) => reject(event.target.error);
  });
}

async function runDataMigrations(db, newVersion, oldVersion) {
  // 执行具体的、复杂的迁移逻辑
  if (oldVersion === 1 && newVersion >= 2) {
    await migrateAddTagColor(db);
  }
  // ... 其他迁移
}

4.3 发布到Chrome Web Store的完整流程

  1. 准备材料 ：

    • 图标 ：需要多种尺寸（16x16, 48x48, 128x128）。
    • 截图与宣传图 ：展示扩展功能的精美截图（至少1280x800）。
    • 详细描述 ：用清晰的语言说明功能、优势、使用方法。
    • 隐私政策 ：即使你的扩展完全不收集数据，也最好提供一个简单的隐私政策页面，说明数据本地存储的性质。

  2. 打包扩展 ：

    • 在 chrome://extensions/ 页面，点击“打包扩展程序”。
    • 选择你的扩展根目录，它会生成一个 .crx 文件（签名密钥）和一个 .zip 文件（用于上传商店）。 务必保存好密钥文件 （ .pem ），未来更新扩展必须使用同一个密钥。

  3. 提交至开发者控制台 ：

    • 访问 Chrome Web Store 开发者仪表板 （需要支付一次性$5的注册费）。
    • 创建新项目，上传 .zip 文件，填写所有信息（名称、描述、分类、截图等）。
    • 在“隐私权实践”部分，如实声明你的扩展所需的权限（如“读取和更改您在 gemini.google.com 上的数据”是为了注入UI和抓取导出内容，“下载文件”是为了触发导出下载），并解释这些权限的用途。

  4. 审核与发布 ：

    • 提交后，Google会进行审核，通常需要几天时间。他们可能会测试功能，并检查是否有恶意行为。
    • 审核通过后，即可发布。你可以选择立即发布或定时发布。

5. 常见问题排查与性能优化技巧

5.1 扩展不生效或UI不显示的排查步骤

  1. 检查扩展是否已启用 ：首先去 chrome://extensions/ 确认扩展是“启用”状态。
  2. 检查目标网站 ：确认你访问的是 https://gemini.google.com/ 。内容脚本的 matches 字段在 manifest.json 中定义，确保URL匹配。
  3. 查看后台脚本错误 ：打开后台脚本的开发者工具（如4.1所述），查看Console是否有报错（例如数据库连接失败、API调用错误）。
  4. 查看内容脚本错误 ：在Gemini页面的开发者工具Console中查看。最常见的问题是 DOM选择器失效 ，因为Gemini更新了前端代码。这时需要更新你内容脚本中的 selector 。
  5. 检查网络请求 ：如果扩展有从远程加载资源（如图标、字体），确保网络请求没有被拦截或失败。
  6. 禁用其他扩展 ：有时与其他扩展（特别是其他修改页面的扩展）冲突。尝试在无痕模式下只启用本扩展进行测试。

5.2 性能优化要点

  • 惰性加载与虚拟滚动 ：如果用户有海量对话，一次性渲染所有对话项到侧边栏会导致页面卡顿。v1.5.0中我实现了虚拟滚动——只渲染可视区域内的对话项。这需要计算每个项目的高度，并监听滚动事件动态更新DOM。
  • IndexedDB操作批量化 ：避免在循环中进行大量的单条读写操作。对于批量移动对话到文件夹，可以先在内存中处理好所有数据变更，然后开启一个读写事务，一次性提交所有更新。
  • 防抖与节流 ：搜索输入、窗口大小调整、滚动事件等高频触发的事件，必须使用防抖( debounce )或节流( throttle )来限制处理函数的执行频率。
  • CSS性能 ：扩展注入的样式应尽量简洁，避免使用昂贵的CSS选择器（如深层嵌套 * ）或会触发重排/重绘的属性（在滚动或拖拽时）。

5.3 用户数据备份与恢复

虽然数据存储在本地，但用户重装系统或更换电脑时会丢失。我提供了一个简单的“导出/导入设置”功能。

  • 导出 ：将IndexedDB中 folders 和 conversationTags 两个存储空间的所有数据序列化为一个JSON文件。
  • 导入 ：读取用户选择的JSON文件，解析后，先清空现有数据库，再将数据批量写入。 关键点 ：导入过程必须在用户明确确认后进行，因为这会覆盖现有数据。并且要做好数据验证，防止损坏的JSON文件导致数据库异常。
async function exportAllData() {
  const db = await getDB();
  const [folders, tags] = await Promise.all([
    getAllFromStore(db, 'folders'),
    getAllFromStore(db, 'conversationTags')
  ]);
  const exportData = { version: DB_VERSION, folders, tags };
  const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' });
  // 触发下载...
}

async function importData(jsonString) {
  const data = JSON.parse(jsonString);
  // 验证数据格式和版本
  if (!data.version || data.version > DB_VERSION) {
    throw new Error('不支持的备份文件版本');
  }
  const db = await getDB();
  const tx = db.transaction(['folders', 'conversationTags'], 'readwrite');
  await clearStore(tx, 'folders');
  await clearStore(tx, 'conversationTags');
  await bulkAdd(tx, 'folders', data.folders);
  await bulkAdd(tx, 'conversationTags', data.tags);
  // 完成后，通知UI刷新
}

开发这个扩展的过程，是一个不断与浏览器API、DOM和异步编程“打交道”的过程。最大的成就感来自于看到它实实在在地解决了一个痛点，并且被许多同样受困于杂乱对话历史的用户所使用。如果你也有兴趣动手做一个解决自己问题的浏览器扩展，希望这篇详尽的复盘能给你提供一个清晰的路线图。从捕捉一个想法，到设计、编码、调试、发布，每一步都有其独特的挑战和乐趣。记住，从解决自己的问题开始，往往能做出最棒的产品。

Logo
亚马逊云科技技术品牌专区

更多推荐

Kiro Editor 开发实战：使用 Cargo 构建、测试与性能优化指南

欢迎来到这篇终极指南，我们将深入探索如何使用Rust构建高性能的终端文本编辑器Kiro Editor。无论你是Rust新手还是经验丰富的开发者，这篇完整教程将带你了解如何利用Cargo工具链进行高效的开发、测试和性能优化，打造一款快速、轻量且功能强大的UTF-8文本编辑器。## 什么是Kiro Editor？Kiro Editor是一款使用Rust编写的极简终端文本编辑器，它最初是著名编辑

avatar 亚马逊云科技技术品牌专区

近期零基础学量化，先按基础差异拆学习顺序

读者应明白，拆解学习顺序时要先看自己的基础缺口，再决定哪一段需要放慢。不同流程阶段都有不同检查任务，学习路线要能反映这些差异。

avatar 亚马逊云科技技术品牌专区

2026年量化工具选择，要跟着能力基础走

读者应理解，选择工具前要先判断自己的能力基础和当前任务。工具应该帮助自己补上当前最关键的缺口，而不是替代学习顺序本身。

avatar 亚马逊云科技技术品牌专区