在 devtools 中检查扩展程序的 chrome.storage

Question

Chrome DevTools 有一个方便的本地存储和会话存储检查器，但是没有什么可以检查的 chrome.storage.sync？

chrome://sync-internals/

似乎没有显示每个分机同步存储的实际内容。

Answer 1

devtools 中的“本地存储”和“会话存储”仅指 Web 平台存储：localStorage API 和 sessionStorage API，not 到 chrome.storage。

---

控制台

• MV3：

  await chrome.storage.local.get()

  或

  await chrome.storage.sync.get()

• MV2：

  chrome.storage.local.get(console.log)

  或

  chrome.storage.sync.get(console.log)

存储区域查看器扩展

• 在所有

  chrome.storage

  区域中查看/编辑/清除/搜索：同步、本地、会话、托管。
• 监控存储变化。
• 黑暗主题。

存储区域浏览器扩展

• 在两个

  chrome.storage

  区域（

  sync

  、

  local

  ）查看/编辑/清除/导入/导出。
• 当存储数据较多时，比

  Storage Area Viewer

  慢很多。
• 开发多年前就被放弃了。

将来此功能可能会本地实现：https://crbug.com/848752.

ManifestV3 Service Worker 的警告：由于 Service Worker 的开发工具不显示存储，因此您必须打开扩展程序的任何可见页面，例如弹出窗口或选项，右键单击该页面，然后单击“检查”，然后转到存储资源管理器。如果您的扩展程序没有任何可见页面，您可以打开

chrome-extension://ID/manifest.json

，其中 ID 是扩展程序的 ID，如 chrome://extensions 页面所示。另一种方法是在 devtools 中右键单击扩展中的任何脚本（当您检查内容脚本或 Service Worker 时），然后单击“在新选项卡中打开”。您可以为此选项卡添加书签，以便下次快速打开它。

Answer 2

1. 参观

   chrome://sync-internals/

2. 单击

   Sync Node Browser

   选项卡并等待其加载（可能会出现空白屏幕或正在进行的光标）
3. 单击侧边栏中的展开三角形即可

   Extension settings

4. 单击侧栏中的各个设置以查看其值和其他元数据

Answer 3

一个糟糕的解决方法是调用

get

并获取所有存储的值。当然，这并不能让您方便地编辑它们：

chrome.storage.sync.get(null, function callback(items) { console.log(items) });

对于现代 Chrome 中的 ManifestV3：

await chrome.storage.session.get()