A New Tool for Viewing and Editing Chrome Storage Area

[c luo]

I'm excited to share with you a tool I've developed that has significantly improved my workflow, and I believe it can do the same for you. The Storage Area Viewer extension was born out of the need to adapt to Manifest V3's shift from localStorage to the Chrome Storage Area, addressing the lack of direct inspection tools for this storage in the development environment.

https://chromewebstore.google.com/detail/storage-area-viewer/fcbndbpibgeafoogbmbcljcmgakaniae

Key features of Storage Area Viewer include:

Search Capability: 

Utilize the powerful search function to quickly find specific items in your storage, streamlining your workflow and saving time.

Structured JSON View: 

Organizes JSON data into an easily navigable structure, helping you understand and manage complex information more effectively.

Monaco Editor Integration: 

Benefit from the advanced features of the Monaco Editor, the core of Visual Studio Code, allowing for in-browser storage data editing with syntax highlighting and code completion.

Storage Change Tracking:
Receive real-time notifications about changes in your storage, enabling you to instantly monitor and respond to modifications.

Dark Mode Support:
Reduce eye strain with dark mode, particularly beneficial during long sessions or in low-light conditions.

I created this extension to make my development process more efficient and intuitive, and now I want to share it with anyone who might find it useful. Your feedback and suggestions are very much appreciated as they will help improve this tool further.

https://chromewebstore.google.com/detail/storage-area-viewer/fcbndbpibgeafoogbmbcljcmgakaniae

[Jackie Han]

Thanks for sharing. Looks good.

--
You received this message because you are subscribed to the Google Groups "Chromium Extensions" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extens...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/69843c2a-7bd3-41be-8ebc-55015e10054fn%40chromium.org.

[wOxxOm]

Looks like it's 100 times faster than the old Storage Area Explorer when the storage contains hundreds of keys.

However it spams the console with messages "[storage viewer]: Disconnected from the storage viewer, reconnecting...

You don't need the service worker at all, because you can do the same inside inside devtools.js of your hidden devtools.html page. This page runs automatically when devtools is opened and terminates only when devtools is closed, so the ports you open in your devtools panel will be always connected to that hidden page, you won't need to reconnect. You can inspect/debug this page by opening a second devtools-on-devtools (switch your devtools to a detached state, then make sure it's focused, and press the hotkey to open devtools again i.e. Ctrl-Shift-I, which will open a second devtools).

If you ever need it the service worker in the future you can keep it alive by sending a message through the port every 29 seconds or less.

[c luo]

@wOxxOm Thanks for pointing out the console message; I forgot to remove the consoles in eval scripts. I'm sorry, and I will remove them in the next version.

I've tried many ways to communicate with the inspect page, like external message, external port. I really didn't know there was a persistent devtools.html, which seems like it would make things a lot easier. Thanks for pointing it out, I'll give it a try.

[wOxxOm]

Yeah, here's an example: https://stackoverflow.com/questions/72900625/in-a-browser-extension-using-manifest-v3-how-can-i-communicate-between-a-conten/72902614#72902614

[wOxxOm]

Just found another way. Chrome Devtools embeds both pages (devtools.html and devpanel.html) as separate iframes, which means they can directly access each other via `parent`:

// devpanel.js

let myDTPage;
for (let len = parent.length, i = 0, w; i < len && (w = parent[i]); i++) {
  if (w !== window && Object.getOwnPropertyDescriptor(w.location, 'href').get) {
    myDTPage = w;
    break;
  }
}
myDTPage.foo();

// devtools.js can expose stuff using a global `function` and `var`

var data = {};

function foo() {

 .....

}

// it can also explicitly expose stuff

window.bar = 123; 

[wOxxOm]

Your extension unnecessarily adds the panel in non-extension pages, which aren't supported anyway, so maybe you can instead do it conditionally by checking the tab's URL:

chrome.devtools.inspectedWindow.eval('location.protocol', res => {
  if (res === 'chrome-extension:') chrome.devtools.panels.create(...........);
});

[wOxxOm]

...and show it later when the tab is navigated to an extension URL:

function maybeShow(res) {
  if (res.startsWith('chrome-extension:'))
    chrome.devtools.panels.create(.........);
}
chrome.devtools.inspectedWindow.eval('location.origin', maybeShow);
chrome.devtools.network.onNavigated.addListener(maybeShow);

[Tom Riley]

I've been using this recently, really handy development tool, thanks!

[Uladzimir Yankovich]

❤️

[c luo]

@wOxxOm I will try this strategy in the next version. Thanks.

[Glen Little]

It's a great idea... but after adding it to Chrome, I can't find how to use it!  Please help!  It would be good to add that to the description of the extension.

[Glen Little]

My computer was rebooted and now I find the "Storage Area Viewer" as one of the tabs in the developer tools area.  I'm good now, but it would still be nice to add that to the extension's store description!