如何查看已安装的Chrome扩展程序的存储空间？

Question

现在看来似乎应该能够查看localStorage/ chrome.storage安装在我的浏览器Chrome扩展的.我曾经玩过开发者工具,但还没有找到办法.有任何想法吗？

Answer 1

有一个非常有用的扩展都与工作localStorage和chrome.storage我最近发现,该工程作为开发工具面板.

我没有写这个,但是作者在其他一些问题上提出了建议.

希望我能+50这个. (5认同)
我尝试了一下，但是对我不起作用。但是，我实际上是在开发Chrome“ devtools”扩展程序-而不是普通的Chrome扩展程序。 (2认同)
@nogridbag尝试为您的开发工具打开开发工具。取消停靠，Ctrl + Shift + I。..wait，我尝试过。如果您患有癫痫病，请不要使用Storage Area Explorer执行此操作！ (2认同)

Answer 2

我将继续将几个答案中现有的知识合并成一个简单而全面的知识.如果您对此进行投票,请与@mwkwok和@chaohuang的相同.

确实,使用保存的东西chrome.storage不会显示在开发人员工具中,只能看到使用常规localStorage API保存的东西.做这个:

chrome.storage.local.get(function(result){console.log(result)})

这会将整个存储作为JSON对象吐出到控制台中.

稍短的等效项是“chrome.storage.local.get(console.log)”。还有`chrome.storage.sync.get(console.log)`！ (12认同)
它说“存储”未定义 (5认同)

Answer 3

你是对的,chrome.storage不会出现在开发者工具中.我发现查看所有内容的唯一方法是将其放入控制台:

chrome.storage.local.get(function(result){console.log(result)})

这会将JSON对象吐出到控制台中.

Answer 4

到 2022 年，我发现的最好方法仍然是使用 console.log，但您可以通过柯里化使其看起来更干净。打开扩展页面，打开后台工作人员的检查器，转到控制台，然后...

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

Answer 5

通过单击扩展的背景页面打开Chrome Devtool Chrome://extensions/(Developer mode需要检查以查看背景页面),然后在资源面板中,您可以看到左侧的本地存储.

如果您使用"LocalStorage API",则可以在Chrome开发者工具中找到它.但是如果使用`chrome.storage API`方法,如`chrome.storage.local.set({"key":value})`,数据就不存储在那里.我们在哪里可以找到这些数据？ (15认同)
查看@Xan 最近添加的答案。 (2认同)

Answer 6

这实际上是两个问题!

通过点击Chrome扩展程序的背景页面打开Chrome Devtool:// extensions /(需要检查开发者模式以查看背景页面),然后在资源面板中,您可以看到左侧的本地存储.(由chaohuang和Kil提供)

在后台页面的同一个控制台中:

chrome.storage.local.get(function(result){console.log(result)})

chrome.storage.sync.get(function(result){console.log(result)})

在 Chrome 80 中，当尝试在控制台中使用“chrome.storage.local.get”时，我收到以下错误：未捕获的类型错误：无法读取 <anonymous>:1:16 处未定义的属性“local”。“chrome.storage”值在控制台中未定义。 (2认同)
我现在明白了。我需要打开**背景页面**，如答案中所写。也许答案可能包括如何导航到后台页面，对于像我这样不知道它是什么的天真的用户来说。 (2认同)

Answer 7

使用在控制台中键入的提供的代码，我没有得到任何结果。但是，当将这些代码放入控制台时，它们可以工作。

chrome.storage.sync.get(null, function (data) { console.info(data) });

此处的区别在于，我们传递了一个空值，该值将返回存储中的所有内容。要对此进行备份以及其他内容，请查看此API上的官方chrome页面。