DEV Community

Rodrigo Nascimento
Rodrigo Nascimento

Posted on

I built my first Chrome extension because editing localStorage was annoying

I finally published my first Chrome extension.

It is called DataSidekick, and I built it because I got tired of fighting DevTools every time I needed to inspect or edit localStorage and sessionStorage.

DataSideKick opend view

Also, yes, I paid the legendary $5 Chrome Web Store developer fee, so emotionally I had to ship something. Otherwise, it would have been the worst investment portfolio of my life.

What is DataSidekick?

DataSidekick is a Chrome extension that opens as a side panel and helps developers work with browser storage in a cleaner way.

Instead of digging through DevTools and editing raw strings, you get a focused interface for:

  • viewing localStorage
  • viewing sessionStorage
  • searching by key or value
  • editing simple values inline
  • editing JSON visually
  • importing data from JSON
  • exporting data to JSON
  • hiding noisy keys
  • requesting access per site/origin

You can check it out here:

https://datasidekick.site

Why I built it

Browser storage is simple until it is not.

A lot of apps store useful state in localStorage, but the default developer experience is still pretty rough:

{"user":{"name":"Rodrigo","settings":{"theme":"dark"}}}
Enter fullscreen mode Exit fullscreen mode

Technically readable? Sure.

Pleasant to edit? Absolutely not.

I wanted something closer to a small developer cockpit: open the panel, find the key, inspect the value, edit it safely, and move on.

The feature I cared about most: visual JSON editing

The main idea was simple:

If a value is valid JSON, don't treat it like a random string.

So instead of this:

{"a":"b","settings":{"theme":"dark"}}
Enter fullscreen mode Exit fullscreen mode

DataSidekick displays structured JSON in a more readable way, so it becomes easier to inspect and edit nested values.

That was the first “okay, this is actually useful” moment.

Chrome permissions were the real boss fight

The extension needs to read and edit storage from the current page. That means permissions matter.

At first, I had an unnecessary permission in the manifest and the Chrome Web Store rejected the extension.

Fair enough. My bad.

The final approach is more intentional:

  • no unnecessary downloads permission
  • site access is requested when needed
  • the user sees when access is required
  • data stays local in the browser

For a tool that touches browser storage, I think this transparency is important.

Exporting without the downloads permission

One small lesson: exporting a JSON file does not necessarily require the Chrome downloads permission.

This is enough for my use case:

const blob = new Blob([JSON.stringify(payload, null, 2)], {
  type: "application/json"
});

const url = URL.createObjectURL(blob);

const a = document.createElement("a");
a.href = url;
a.download = "datasidekick-export.json";
a.click();

URL.revokeObjectURL(url);
Enter fullscreen mode Exit fullscreen mode

Since I was not using chrome.downloads.download(), the permission was unnecessary.

Chrome Web Store noticed. Chrome Web Store was right.

Painful, but useful.

Current features

The first public version includes:

  • Chrome Side Panel UI
  • localStorage and sessionStorage support
  • visual JSON editor
  • key/value search
  • import/export JSON
  • per-site access flow
  • hidden keys
  • noisy key filtering
  • favorites
  • dark/light mode
  • font size controls
  • playground on the website

The playground

I also added a playground to the site so people can understand the idea before installing anything.

That was important because browser storage tools can feel a bit sensitive. I wanted people to see what the extension does before giving it access to a page.

Try it here:

https://datasidekick.site

What I learned

A few things I took away from this first release:

  1. Small dev tools are still worth building.
  2. Chrome extension permissions deserve real attention.
  3. A simple UX decision can matter more than a complex feature.
  4. Shipping to a store is very different from “it works locally”.
  5. Paying $5 makes you emotionally committed.

What's next?

This is my first Chrome extension, but definitely not the last.

Some ideas for future versions:

  • IndexedDB support
  • better diff view
  • undo/redo
  • schema validation
  • storage history
  • better JSON editing interactions

For now, I am happy it is live.

If you work with localStorage or sessionStorage often, I would love your feedback:

https://datasidekick.site

Or plugin link: DataSideKick

Built by a developer who just wanted to stop editing JSON like a caveman.

Top comments (0)