Pre-built devtools panel for inspecting Primary Storage

[louisgv]

With the advent of the new inspector API, can we leverage it even further, and build out a pre-built viz for storage as a chrome devtool page?

-> This requires a bit more experimentation to find the best way to make it seamless (like an import away)

[olamarvel]

This would be much needed, as the current solution is to use the chrome.storage.local.get(console.log) hack.

[fa-sharp]

There is an existing Chrome extension that adds a tab to the DevTools and allows inspection of Chrome Storage. I've been using this for my current projects.

However, this extension hasn't had major updates for a while, so it doesn't include more recent features like session storage, and also the JSON formatting could be improved.

So there's definitely a need for a modern devtools panel. I'll see if I can come up with a prototype when I have a chance, and update here.

[fa-sharp]

I built a rough prototype using Plasmo of what this could look like - it auto-updates values, pretty-formats objects, and supports all storage areas.

The question is how to integrate it into the Plasmo tooling 😅. Somehow it needs to be injected into the development build, as part of an import or something. Or maybe it just detects whether the user has installed the storage package, similar to the storage permission that's automatically added to the manifest.

@louisgv Do you have ideas on how to implement that? I'm more than happy to work on this if you can point me in the right direction 🙂

[louisgv]

@fa-sharp great call - this might be related to the inspector module.

The idea I had was that we can export an inspector dev panel (react component that has all the UI above). Then, the user just need to have a very minimal setup devtools panels (see: https://github.com/PlasmoHQ/examples/tree/main/with-devtools ), import the component, then the extension should be able to render the above storage debugger?

[fa-sharp]

@louisgv Looking at the example you linked, the user would have to go through two steps to set this up (please correct me if I'm wrong!):

1. Create a page that will import and then export default the inspector component (perhaps using the new tabs directory, as that takes care of routing for you)
2. Create a devtools.tsx file that will actually create the devtools panel and reference that page (i.e. it will call chrome.devtools.panels.create("Storage Devtools", null,"tabs/storagePanel.html"))

Do I have that right? Is there any way to combine/reduce the steps here?