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:
chrome.storage.localmanifest.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 documentationThe 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:
npm install - Install dependenciesnpm run dev - Start development with HMRdist folder in Chrome Developer Modenpm run build - Build for productionThe 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.
You can send messages while the preview loads