Design and generate production-ready code for a Chrome browser extension called "SimVault" — a secure, local-only password manager. Use React.js and Tailwind CSS. The extension stores login credentials in the user's local storage with strong encryption and never communicates with external servers. All functionality must be self-contained and offline-ready.Key requirements:1. Unlock Screen (shown when vault is locked): - Input field for master password - "Unlock Vault" button - Message explaining SimVault never sends data to any server - Minimalist and secure design (dark mode)2. Vault Dashboard (after unlocking): - List saved credentials (site name + username, password hidden) - Buttons to view, edit, or delete credentials - Search/filter credentials - "Add New Credential" button3. Add/Edit Credential Form: - Fields: site URL, username, password - Password generator button - Save / Cancel buttons - Password should be masked by default with toggle visibility4. Vault Encryption: - Encrypt all credential data using AES-GCM or similar - Derive the encryption key from master password (use PBKDF2 or WebCrypto SubtleCrypto) - Store encrypted credentials in chrome.storage.local5. Auto-lock behavior: - Auto-lock after 5 minutes of inactivity - Manual "Lock Vault" button in dashboard6. Extension UI and Integration: - Must fit inside Chrome extension popup (max width 400px) - Use modular React components with Tailwind for styling - Include manifest.json for Chrome Extension MV3 - Use service worker for background logic - Include content script stub for autofill features (optional)Other notes:- Ensure responsive design with a clean, professional UI- Use best practices for state management and secure coding- Do not include any external backend or API- Include all necessary files for a complete Chrome Extension build (React + Tailwind + manifest.json)Deliver a complete, production-grade React project for SimVault ready to build and load into Chrome.
I'll create a complete, production-ready Chrome extension for SimVault - a secure, local-only password manager. This will include all necessary files for a Chrome Extension MV3 build with React and Tailwind CSS.
I've created a complete, production-ready Chrome extension for SimVault - a secure, local-only password manager. Here are the key features implemented:
Security Features
- AES-GCM encryption with Web Crypto API
- PBKDF2 key derivation (100,000 iterations)
- Local storage only using
chrome.storage.local - Auto-lock after 5 minutes of inactivity
- No network permissions - completely offline
UI Components
- UnlockScreen: Master password entry with security messaging
- VaultDashboard: Main interface with search, credential list, and controls
- AddEditCredential: Form for adding/editing credentials with password generator
- PasswordGenerator: Customizable password generation modal
Technical Implementation
- Chrome Extension MV3 with proper manifest
- React 18 with hooks for state management
- Tailwind CSS for responsive dark mode design
- Service worker for background auto-lock functionality
- Content script stub for future autofill features
Complete File Structure
manifest.json- Chrome extension configurationpopup.html/js- Main React applicationbackground.js- Service worker for auto-lockcontent.js- Content script placeholderpackage.json- Dependencies and build scriptsREADME.md- Complete documentation
Installation & Usage
- Load the unpacked extension in Chrome Developer Mode
- Set a master password on first use
- Add, edit, search, and manage credentials securely
- Vault auto-locks after 5 minutes for security
The extension is completely self-contained, uses strong encryption, and never communicates with external servers - perfect for users who prioritize privacy and security.
Perfect! I'll recreate the SimVault Chrome extension using CRXJS - a modern Vite-based Chrome extension development framework. This will provide better development experience with HMR, TypeScript support, and modern tooling.
I've completely rebuilt SimVault using CRXJS - a modern Vite-based Chrome extension development framework. Here are the key improvements:
Modern Development Stack
- CRXJS + Vite: Hot Module Replacement, fast builds, zero-config setup
- TypeScript: Full type safety throughout the entire codebase
- React 18: Modern React with hooks and proper component structure
- Tailwind CSS: Utility-first styling with PostCSS integration
- Lucide React: Beautiful, tree-shakeable icons
Improved Architecture
- Modular Components: Properly separated React components
- Type-Safe Utilities: Crypto, storage, and password generation with full TypeScript support
- Clean File Structure: Organized by feature with clear separation of concerns
- Modern Build System: Vite handles all bundling and optimization
Development Experience
- Hot Reload: Changes reflect instantly during development
- Type Checking: Full IntelliSense and compile-time error checking
- Modern Tooling: ESLint, Prettier, and TypeScript integration
- Zero Config: CRXJS handles all Chrome extension complexities
Enhanced Security
- Type Safety: Prevents common runtime errors and security bugs
- Proper Imports: Tree-shaking eliminates unused code
- Modern Crypto: Uses latest Web Crypto API patterns
- Secure Defaults: TypeScript ensures proper error handling
Easy Setup
npm install- Install dependenciesnpm run dev- Start development with HMR- Load
distfolder in Chrome Developer Mode npm run build- Build for production
The extension maintains all the original security features while providing a much better development experience with modern tooling, type safety, and hot reloading.
Continue building SimVault — a secure, local-only Chrome extension password manager — using React.js and Tailwind CSS. All logic and storage must be fully offline and self-contained. The extension must not rely on any remote servers or external APIs.Now use IndexedDB via Dexie.js to handle all credential storage instead of chrome.storage.local. Store all vault data in a credentials table inside Dexie.js. Encrypt each record using AES-GCM before inserting, and decrypt after retrieval. Continue using WebCrypto SubtleCrypto + PBKDF2 for key derivation from the master password.Update the implementation to include:---### 🧠 Architecture & Storage (New):- Use Dexie.js for IndexedDB storage- Create a Dexie schema: credentials: ++id, site, username, encryptedPassword, createdAt, updatedAt- Store encrypted passwords only; never in plain text- Encrypt/decrypt each password entry using a key derived from the master password using PBKDF2- Store derived key in memory only (never persist)- Keep UI and React state in sync with Dexie transactions---### 🔄 Autofill Feature:- Use a content script to detect login forms- If credentials for the domain exist, send them securely via chrome.runtime.sendMessage- Autofill username and decrypted password in the form- Allow the user to enable/disable autofill in a settings screen- Respect origin-based matching (e.g., only fill credentials from the exact domain)---### 📤 Export / 📥 Import Feature:- Export vault to an encrypted .simvault JSON file - Encrypt the entire vault or each record, include timestamp + version - Let user download via Blob- Import from a .simvault file - Let user upload, decrypt with master password, and choose to merge or replace existing entries - Validate data integrity and schema before import---### 💻 UI & Screens:1. Unlock Screen - Master password input - Unlock button - Informational message about local-only and encrypted storage2. Vault Dashboard - List of credentials (site, username, masked password) - Add, edit, delete, and search credentials - Autofill toggle per site (optional) - "Lock Vault" and auto-lock timer3. Credential Editor - Modal or page to add/edit credentials - Site, username, password input - Password visibility toggle - Password generator button4. Settings Page - Autofill toggle (global or per site) - Export and import vault buttons - Option to clear all data or change master password---### 🧱 Extension Packaging:- Chrome Extension MV3 manifest- Popup UI (React)- Content script for autofill- Background service worker for messaging & vault key coordination- Dexie.js + WebCrypto for secure local storage- Dark mode styling via TailwindAll components must follow best practices for code quality, security, and user trust. Avoid boilerplate or placeholders — implement real logic wherever possible.Deliver a complete working Chrome Extension source code project.