1292234 - [META] Support inspection of WebExtension storage APIs data from the Storage panel of the WebExtension Addon Debugger toolbox

Status: NEW

(WebExtensions :: Storage, defect, P3)

Description

[Nika Layzell [:nika] (ni? for response)]

It would be nice to be able to use the storage tab to inspect the data which is stored by the web extension within the storage.StorageArea API.

Comment 1

[:shell escalante]

can you update the summary so it's clearer (based on your work) for when we get to this work?

Comment 2

[Luca Greco [:rpl] [:luca] [:lgreco]]

The goal of this issue is to create the needed Storage actors[1] to be able to inspect and manipulate data stored by an addon in the WebExtension storage APIs and to ensure that the new storage actors are activated only when the debugging target is a WebExtension, and finally that the new actors are correctly recognized and used in the Storage panel client.

[1]: the Storage actors implementation seems to provide a base abstraction that is then extended by the specialized storage actors (e.g. cookies, local and session storages etc., as an example of specialized storage actor, a link to the "cookies" storage actor implementation: http://searchfox.org/mozilla-central/source/devtools/server/actors/storage.js#375)

Comment 3

[mlissner]

Just adding my 2¢, I spent about an hour today trying to figure out why this code wasn't working:

chrome.storage.local.set({'asdf': 'asdf'});

Seemed like it ran fine with no exceptions, but when I looked at the area of the debugger that was labelled "Local Storage", and which then showed, "moz-extension://{my-id}" as a sub-entry, I couldn't get my key to show up. Little did I know that we've got two kinds of key-value storage called local storage. Ugh!

Anyway, all of this pain would have been avoided if we showed chrome.storage in the debugger as an additional item.

Thanks.

Comment 4

[mlissner]

Attachment: The *very* confusing section of the debugger

This image shows the part of the debugger I stared at today while trying in vain to set a value...alas, I would have been there forever.

Comment 5

[Luca Greco [:rpl] [:luca] [:lgreco]]

Hi mlissner,

That section of the DevTools Storage panel in attachment 8924286 [details] is related to the localStorage web API:

- https://developer.mozilla.org/en-US/docs/Web/API/Storage/LocalStorage

This is an API that any webpage can use and that is also available to the extension pages 
(but it is not available from the content scripts, because from a content script the window object is related to the webpage and not the extension page, and so window.localStorage is the localStorage of the webpage from a content script).

The DevTools Storage panel already support the localStorage web API, but it doesn't yet support the browser.storage.local (or chrome.storage.local) yet, and so the goal of this issue is to add a new section for these extension storage in the DevTools Storage panel (not to remove or re-purpose the section related to the localStorage web API).

I do agree that it is very unfortunate (and pretty confusing) that the two APIs have very similar names (storage.local vs. localStorage).

Comment 6

[mlissner]

Yep, I understand, thanks Luca. I was just trying to chime in with an example of the kinds of confusion that are caused by not having a panel for chrome.storage.local. It'd be great to get this panel in place.

Comment 7

[Wayne Myers]

Finally, after reading the comments above, I understand *why* the 'Storage' tab of the Firefox debugger does not currently show the data my webextension puts in browser.local.storage even when called with the 'debug' button in 'about:debugging'. I agree with those above who both wish that it did and think that it should.

In the meantime, I have found a workaround derived from an old post here: https://stackoverflow.com/questions/49753389/inspect-firefox-webextensions-storage-local

a) Click 'debug' next to your extension in 'about:debugging'
b) Enter the following line into the console that comes up:

 browser.storage.local.get(null, function(items) { console.log(items); });

Presto, your storage.local contents are displayed.

"Obviously" this does not work either in the normal console, or the normal debugging console, but only in the console of the debugger specifically connected to your extension. (That may be obvious to you. It was not initially obvious to me.)

While waiting for this bug to be fixed, I hope the above will be helpful to someone.

Comment 8

[jman]

upvoting this issue +1 would be very useful

thanks Wayne Myers for the workaround

Comment 9

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

Also see bug 1363008

Comment 10

[Bianca Danforth [:bdanforth]]

After discussing with rpl, the scope of work here is large enough to be broken into three separate bugs, one for each of the different types of available extension storage area: local, managed and sync.

Comment 11

[optionalrealnamenotgiven]

I'm upvoting this. There's an extension for snoozing tabs that's holding data for hundreds of tabs I'd like to move to another extension and it would be very useful to be able to retrieve the data this way.