如何检查Chrome扩展Manifest V3中的IndexedDB数据

Manifest V2 阶段调试扩展后台存储的常规路径是打开后台页DevTools，切到「Application」标签选择「IndexedDB」即可直接查看数据。这套流程在Manifest V3上失效的核心原因是V3的后台运行载体换成了事件触发的Service Worker，直接打开的Service Worker DevTools默认不会主动挂载扩展上下文的IndexedDB实例，才会出现数据实际存在但面板无展示的情况。

以下是可正常查看数据的三种可用方案：

• 方案1：唤醒Service Worker存储上下文后查看
  1. 打开 Chrome 扩展管理页，地址栏输入chrome://extensions/即可进入
  2. 打开页面右上角的「开发者模式」开关
  3. 定位到需要调试的目标MV3扩展，点击扩展卡片上的「Service Worker」链接，弹出独立的DevTools调试窗口
  4. 不要直接切换到Application面板，先打开Console标签，执行一行代码触发存储上下文挂载：

  await self.indexedDB.databases()
  

  5. 代码执行完成后再切回「Application」标签，展开IndexedDB分类就能看到所有已创建的数据库、表和内部存储的数据。
• 方案2：从扩展页上下文切换查看
  1. 打开目标扩展的任意自有页面，比如点击扩展图标弹出的弹窗页、扩展的选项设置页
  2. 在页面空白处右键选择「检查」，打开该页面的DevTools
  3. 找到DevTools顶部的上下文选择下拉框（默认显示top），下拉选中对应扩展的Service Worker运行上下文
  4. 切换到「Application」面板点击IndexedDB，即可正常加载展示所有存储数据。
• 方案3：控制台直接查询（适合快速校验数据）
  如果只是需要确认数据内容不需要面板可视化，直接在Service Worker的控制台执行IndexedDB原生查询代码即可拿到数据，不需要等待面板加载：

  // 示例代码：替换成你自己的数据库名、表名即可
  const openRequest = indexedDB.open('你的数据库名')
  openRequest.onsuccess = () => {
    const db = openRequest.result
    const transaction = db.transaction('你的存储表名', 'readonly')
    const store = transaction.objectStore('你的存储表名')
    const queryRequest = store.getAll()
    queryRequest.onsuccess = () => console.log('IndexedDB存储数据：', queryRequest.result)
  }
  

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