FE Storage Extension

A Chrome extension (Manifest V3) to inspect and manage frontend storage:

• localStorage
• sessionStorage
• cookies
• IndexedDB

Features

• List storage entries by type
• Quick search/filter by key/name/value
• Pretty value viewer (string, number, JSON object, array)
• Add / edit / delete storage entries (where supported)
• Copy value content
• Expand/collapse long content

Tech Stack

• Vite (bundler)
• React 18 (UI)
• TypeScript (type safety)
• vite-plugin-web-extension (Chrome extension build support)

Development

npm install
npm run dev     # watch mode – rebuilds on file changes
npm run build   # one-shot production build

Loading the extension in Chrome

1. Run npm run build to produce the dist/ folder
2. Open chrome://extensions
3. Enable Developer mode
4. Click Load unpacked
5. Select the dist/ folder

Usage

1. Open a target website in a tab
2. Open the extension popup
3. Click Refresh to load storage data
4. Use search and storage type filter to find entries
5. Use Add, Edit, Delete, Copy, and Expand actions