{"slug": "i-built-my-first-chrome-extension-because-editing-localstorage-was-annoying", "title": "I built my first Chrome extension because editing localStorage was annoying", "summary": "The article describes the creation of DataSidekick, a Chrome extension developed by Rodrigo to simplify editing localStorage and sessionStorage by providing a cleaner, structured JSON interface instead of the default DevTools experience. The developer paid the $5 Chrome Web Store fee and learned a lesson when the store rejected the initial version due to an unnecessary \"downloads\" permission, which was removed. The extension is now live, supports localStorage and sessionStorage, and includes a playground for users to test its functionality before installation.", "body_md": "I finally published my first Chrome extension.\n\nIt is called **DataSidekick**, and I built it because I got tired of fighting DevTools every time I needed to inspect or edit `localStorage`\n\nand `sessionStorage`\n\n.\n\nAlso, 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.\n\n## What is DataSidekick?\n\nDataSidekick is a Chrome extension that opens as a side panel and helps developers work with browser storage in a cleaner way.\n\nInstead of digging through DevTools and editing raw strings, you get a focused interface for:\n\n- viewing\n`localStorage`\n\n- viewing\n`sessionStorage`\n\n- searching by key or value\n- editing simple values inline\n- editing JSON visually\n- importing data from JSON\n- exporting data to JSON\n- hiding noisy keys\n- requesting access per site/origin\n\nYou can check it out here:\n\n## Why I built it\n\nBrowser storage is simple until it is not.\n\nA lot of apps store useful state in `localStorage`\n\n, but the default developer experience is still pretty rough:\n\n```\n{\"user\":{\"name\":\"Rodrigo\",\"settings\":{\"theme\":\"dark\"}}}\n```\n\nTechnically readable? Sure.\n\nPleasant to edit? Absolutely not.\n\nI wanted something closer to a small developer cockpit: open the panel, find the key, inspect the value, edit it safely, and move on.\n\n## The feature I cared about most: visual JSON editing\n\nThe main idea was simple:\n\nIf a value is valid JSON, don't treat it like a random string.\n\nSo instead of this:\n\n```\n{\"a\":\"b\",\"settings\":{\"theme\":\"dark\"}}\n```\n\nDataSidekick displays structured JSON in a more readable way, so it becomes easier to inspect and edit nested values.\n\nThat was the first “okay, this is actually useful” moment.\n\n## Chrome permissions were the real boss fight\n\nThe extension needs to read and edit storage from the current page. That means permissions matter.\n\nAt first, I had an unnecessary permission in the manifest and the Chrome Web Store rejected the extension.\n\nFair enough. My bad.\n\nThe final approach is more intentional:\n\n- no unnecessary\n`downloads`\n\npermission - site access is requested when needed\n- the user sees when access is required\n- data stays local in the browser\n\nFor a tool that touches browser storage, I think this transparency is important.\n\n## Exporting without the downloads permission\n\nOne small lesson: exporting a JSON file does not necessarily require the Chrome `downloads`\n\npermission.\n\nThis is enough for my use case:\n\n``` js\nconst blob = new Blob([JSON.stringify(payload, null, 2)], {\n  type: \"application/json\"\n});\n\nconst url = URL.createObjectURL(blob);\n\nconst a = document.createElement(\"a\");\na.href = url;\na.download = \"datasidekick-export.json\";\na.click();\n\nURL.revokeObjectURL(url);\n```\n\nSince I was not using `chrome.downloads.download()`\n\n, the permission was unnecessary.\n\nChrome Web Store noticed. Chrome Web Store was right.\n\nPainful, but useful.\n\n## Current features\n\nThe first public version includes:\n\n- Chrome Side Panel UI\n-\n`localStorage`\n\nand`sessionStorage`\n\nsupport - visual JSON editor\n- key/value search\n- import/export JSON\n- per-site access flow\n- hidden keys\n- noisy key filtering\n- favorites\n- dark/light mode\n- font size controls\n- playground on the website\n\n## The playground\n\nI also added a playground to the site so people can understand the idea before installing anything.\n\nThat 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.\n\nTry it here:\n\n## What I learned\n\nA few things I took away from this first release:\n\n- Small dev tools are still worth building.\n- Chrome extension permissions deserve real attention.\n- A simple UX decision can matter more than a complex feature.\n- Shipping to a store is very different from “it works locally”.\n- Paying $5 makes you emotionally committed.\n\n## What's next?\n\nThis is my first Chrome extension, but definitely not the last.\n\nSome ideas for future versions:\n\n- IndexedDB support\n- better diff view\n- undo/redo\n- schema validation\n- storage history\n- better JSON editing interactions\n\nFor now, I am happy it is live.\n\nIf you work with `localStorage`\n\nor `sessionStorage`\n\noften, I would love your feedback:\n\nOr plugin link: [DataSideKick](https://chromewebstore.google.com/detail/datasidekick/mjeonoddcckacjbeeaplmlnppacofgjb)\n\nBuilt by a developer who just wanted to stop editing JSON like a caveman.", "url": "https://wpnews.pro/news/i-built-my-first-chrome-extension-because-editing-localstorage-was-annoying", "canonical_source": "https://dev.to/rodrigocnascimento/i-built-my-first-chrome-extension-because-editing-localstorage-was-annoying-1ji1", "published_at": "2026-05-22 22:27:03+00:00", "updated_at": "2026-05-22 23:03:37.001185+00:00", "lang": "en", "topics": ["developer-tools", "products", "startups"], "entities": ["DataSidekick", "Chrome", "DevTools", "Rodrigo"], "alternates": {"html": "https://wpnews.pro/news/i-built-my-first-chrome-extension-because-editing-localstorage-was-annoying", "markdown": "https://wpnews.pro/news/i-built-my-first-chrome-extension-because-editing-localstorage-was-annoying.md", "text": "https://wpnews.pro/news/i-built-my-first-chrome-extension-because-editing-localstorage-was-annoying.txt", "jsonld": "https://wpnews.pro/news/i-built-my-first-chrome-extension-because-editing-localstorage-was-annoying.jsonld"}}