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

看起来似乎可以在我的浏览器上查看安装的 Chrome 扩展的 localStorage/chrome.storage。我已经尝试了一些开发工具，但是还没有找到一种方法来做到这一点。有什么想法吗？

43556 次浏览
小开

Open the Chrome Devtool by clicking on the background page of an extension in Chrome://extensions/ (Developer mode needs to be checked to see background pages), then in resource panel you can see the local storage on the left.

小开

You're right that chrome.storage does not show up in developer tools. The only way I've found to view all of it is by putting this into console:

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

This will spit the JSON object into console.

小开

I will proceed to amalgamate the existing knowledge present in several answers, into a simple and comprehensive one. If you vote up this one, please do the same with the ones from @mwkwok and @chaohuang.

It is true that stuff saved using chrome.storage does not show up in developer tools, there you can only see stuff saved using regular localStorage API. Do this:

  1. Open your extension's background page by going to chrome://extensions/ ("Developer mode" needs to be checked to see background pages)

  2. Go to the Console tab and type this:

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

This will spit the whole storage as a JSON object into the console.

小开

There is a very helpful extension to work with both localStorage and chrome.storage that I recently discovered, that works as a Dev Tools panel.

Storage Area Explorer

enter image description here

I did not write this, but it was suggested by the author on some other SO question.

小开

I didn't get any results using the provided code typed into console. But this code worked when put into the console.

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

The difference here is that we pass a null value which will return all content in the storage. To back this up, and for additional reading, check out the official chrome page on this API.

小开

This was actually two questions!

  1. How do I view localStorage of a Chrome Extension I've installed?

Open the Chrome Devtool by clicking on the background page of an extension in Chrome://extensions/ (Developer mode needs to be checked to see background pages), then in resource panel you can see the local storage on the left. (by chaohuang and Kil)

  1. How do I view chrome.storage of a Chrome Extension I've installed?

In the same console of the background page:

OPEN THE BACKGROUND PAGE FIRST:

a. to go to chrome://extensions/

b. ensure you are in development mode

c. then on your extension, either click "Inspect views background page" or go to "Details" and click background page.

NOW THAT YOU ARE ON THE BACKGROUND PAGE YOU CAN PROCEED:

  • For storage.local (by mwkwok)

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

  • For storage.sync

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

小开

In 2022, the best way I've found is still with the console.log, but you can make it a lot cleaner-looking with currying. Open up extensions page, open the inspector for your background worker, go to console, and...

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


提交答案