PSA: Try the new extension storage viewer in DevTools!

689 views
Skip to first unread message

Oliver Dunk

unread,
Oct 16, 2024, 10:17:04 AM10/16/24
to Chromium Extensions
Hi all,

I've been working on making it possible to view extension storage in DevTools, and it’s now ready for testing. This was one of the most requested DevTools features and has become one of the most starred DevTools issues in the issue tracker. We're really excited about finally adding it!

Extension storage - hello world.png

This includes support for all four storage areas across:
  • Content scripts
  • chrome-extension:// pages
  • Extension service workers (MV3)
  • Background pages (MV2)
You can view values and edit them, saving values as both strings or JSON.

Try it out

To give this a try (macOS or Windows):
  1. Make sure you have Chrome Canary 131.0.6778.0 or later installed.
  2. Open DevTools.
  3. Enable the experiment at ⚙️ > Experiments > Extension storage in Application panel.
  4. Reload DevTools when prompted.
Using Linux? Hold tight - the experiment appears but won't work as expected. We've only just finished landing the last few changes and these haven't yet made it to Canary or Beta. This should be resolved in the next few days.

Known Issues
  • The storage viewer does not monitor changes to storage. You need to click the reload icon to refresh data in storage. We're actively working on changing this!
  • For a chrome-extension:// iframe added to a different origin top-level frame, the extension ID is shown instead of the extension name in the sidebar.
I also wanted to take a moment to mention that over the years, some great extensions have been built by the community offering similar functionality. That work definitely showed the demand here and we're really grateful for it.

As always, we'd love to hear your feedback. This experiment will be available in Chrome 131 as it rolls out to beta and stable. We'll then look at making this available by default in a subsequent version of Chrome.

Thanks,
Oliver on behalf of Chrome Extensions DevRel

woxxom

unread,
Oct 16, 2024, 12:33:36 PM10/16/24
to Chromium Extensions, Oliver Dunk
Performance is absolutely awesome: it takes only half a second to show the list of big values in a chrome.storage.local with hundreds of keys and megabytes of data, which is several times faster than the existing extensions like Storage Area Viewer and Storage Area Editor.

Suggestions:
  1. Paging (like in IndexedDB viewer in devtools)

  2. Show the size of the storage somewhere e.g. in the status bar

  3. Show the total number of keys in the status bar - currently there's an empty area at the bottom

  4. Show a size column for the value in bytes or kiB using regional formatting for thousands separators e.g. via Intl.NumberFormat

  5. Sorting by any column in addition to keys: sizes and values

  6. Editing in the bottom panel (in addition to the inline editor) via "Edit value" in the context menu for the bottom panel or a pen icon in the status bar (that'd be more discoverable). Since it's multi-line, saving should use the standard devtools shortcut (i.e. Ctrl-Enter in PC), but it'd be a good UX to add a Save button (say, in the status bar) which would be enabled when there are unsaved changes.

  7. Show a raw-vs-parsed toggle for single string values (just like devtools network panel does for payloads). Currently string values are displayed not as JSON, but in a simplified form, which is very convenient, but also misleading and prone to causing subtle errors when editing e.g. when the value was a string "1" shown in UI as just 1, so when I edit it to be 2, it is now saved as a number and not as a string.

  8. Alternatively show a type dropdown selector at the end of the input when editing inline or in the status bar when editing in the bottom panel.

  9. Reuse devtools' CodeMirror editor with auto-detection for syntax highlight, at least when editing in the bottom panel.

Oliver Dunk

unread,
Oct 17, 2024, 12:57:40 PM10/17/24
to woxxom, Chromium Extensions
Thanks wOxxOm! This is brilliant feedback and I appreciate your time testing :)

I plan to continue iterating on this, so hopefully we can make a lot of it happen.

Assuming there aren't any major bugs that come up, I think we might enable this by default fairly soon. Which is to say, what ships at first might look a lot like what there already is, but we can keep improving it over time.
Oliver Dunk | DevRel, Chrome Extensions | https://developer.chrome.com/ | London, GB

Uladzimir Yankovich

unread,
Oct 20, 2024, 8:35:30 AM10/20/24
to Chromium Extensions, Oliver Dunk, Chromium Extensions, woxxom
🥰

al

unread,
Feb 18, 2025, 6:14:20 PM (7 days ago) Feb 18
to Chromium Extensions, Oliver Dunk, Chromium Extensions, woxxom
I was going to start a new thread but luckily remembered this one
Now that the update is live and I've had a proper cursory look,  I thought I'd share some thoughts as well.

Up to now, I've been using Storage Area Explorer, which will be unsupported soon, but it still has some features that are hard to leave:
  • Bulk actions: Clearing all (that's in!), exporting and import - be it via clipboard or to a file
    • Perhaps the latter, in some form, could be added to the top bar?
  • Info at a glance: Like Woxxom mentioned, being able to view the number of keys, size taken by each and total size used
    • Maybe it could be added to the left of each key (spitballing), or I'd also agree with the column suggestion. 
    • The totals (size, count) could be at the top bar
  • Editting large values from what I've seen seems a little tedious, as each key is limited to a single row (by design)
    • This means I have to copy, then paste to the Console at least, to make edits, then re-paste

I generally agree with Woxxom's suggestions, I was going to emphasize some, but I think I already have inadvertantly.

I also wanted to include some highlights that I particularly liked from the new implementation as well:
  • Filter: I didn't realise I've been missing this!
  • Access: It's great to be able to access it from any window (SW, Popup, and the content page itself!)
    • Also accessing Managed and Session storage is new to me (from using SAE), so another welcome addition
  • The fact that it's native at all! Now I can spin up a new profile for testing, and immediately view changes and such, which is great
  • Parsed view at a glance/click is quite nice

I'm keenly aware that it's a work in progress, (especially at the pace you're permitted by your work load!), so these aren't "make or break requirements" or anything. 
I'm mostly posting as I'll soon have to transition myself, so I've been thinking more about it. 
What do others think?

I think it's looking pretty good so far. Really nice job Oliver (and co), keep it up!

Likely Logic

unread,
Feb 18, 2025, 7:12:39 PM (7 days ago) Feb 18
to Chromium Extensions, al, Oliver Dunk, Chromium Extensions, woxxom
Nice one!

If you want another challenge, I'd love to see a proper tree view in Snippets 👀

Oliver Dunk

unread,
Feb 19, 2025, 11:05:39 AM (6 days ago) Feb 19
to Likely Logic, Chromium Extensions, al, woxxom
Thanks so much for the detailed feedback!

Import and export is a really interesting request. That likely wouldn't be too hard to implement, but I do think it would make sense to be consistent with the other storage viewers in DevTools. Perhaps I can chat to the team about implementing that universally.

Noted on the various key count and size metadata. Given that's two votes now it seems like something that would be worth looking at.

Yeah, understood on editing large values. This is another case where we're matching the other parts of DevTools but I do agree.

I think it's looking pretty good so far. Really nice job Oliver (and co), keep it up!

Thanks for the kind words!

The thing I really want to get to next is live updating. I have a work in progress change for this, so I should really get that finished up and open. 

If you want another challenge, I'd love to see a proper tree view in Snippets 👀

This seems like more of a general DevTools feature request, but I'll pass it on to the team :) 
Oliver Dunk | DevRel, Chrome Extensions | https://developer.chrome.com/ | London, GB

Dave Stewart (Likely Logic)

unread,
Feb 19, 2025, 1:19:40 PM (6 days ago) Feb 19
to Chromium Extensions, Oliver Dunk, Chromium Extensions, al, woxxom, Likely Logic
> This seems like more of a general DevTools feature request, but I'll pass it on to the team :) 

Is this OSS? Could it be a weekend challenge?

Oliver Dunk

unread,
Feb 19, 2025, 1:33:22 PM (6 days ago) Feb 19
to Dave Stewart (Likely Logic), Chromium Extensions, al, woxxom
Yes, DevTools is fully open source! https://github.com/ChromeDevTools/devtools-frontend

I would suggest getting a thumbs up from the team first to make sure you don't implement something in a way that might not be landed. Unless you are just keen to prototype, of course - in which case, go right ahead.
Oliver Dunk | DevRel, Chrome Extensions | https://developer.chrome.com/ | London, GB

Reply all
Reply to author
Forward
0 new messages