A lightweight Chrome extension for managing and generating Time-based One-Time Passwords (TOTP) directly in your browser. Makes two-factor authentication (2FA) faster and more convenient without needing your phone.

• TOTP Generation - Generate 6-digit codes using the standard TOTP algorithm (RFC 6238)
• QR Code Scanning - Import OTP secrets via:
  • File upload
  • Screen capture (current tab)
  • Clipboard paste
• Local Storage - Securely store OTP items in Chrome's local storage
• Search & Filter - Quickly find accounts by provider or account name
• Copy to Clipboard - One-click copy with visual feedback
• Import/Export - Backup and restore your OTP items as JSON
• Real-time Countdown - Visual progress bar showing time remaining

1. Clone the repository:

   git clone <repository-url>
   cd quick-otp

2. Install dependencies:

   yarn install

3. Build the extension:

   yarn build

4. Load in Chrome:

   • Open chrome://extensions
   • Enable "Developer mode"
   • Click "Load unpacked"
   • Select the dist folder

For auto-rebuild on file changes:

yarn build:watch

Then reload the extension in Chrome after each change.

1. Click the Quick OTP icon in your browser toolbar
2. Add a new OTP:
   • Click the + button
   • Scan a QR code or manually enter:
     • Provider name (e.g., Google, GitHub)
     • Account (e.g., [email protected])
     • Secret key (Base32 encoded)
3. Click on the copy button to copy the current code
4. Codes refresh automatically every 30 seconds

• React 19 - UI framework
• TypeScript - Type safety
• Vite - Build tool
• React Bootstrap - UI components
• Web Crypto API - TOTP generation (zero dependencies)
• jsQR - QR code scanning

src/
├── components/
│   ├── Modals/        # Add/Edit OTP modals
│   ├── OTP/           # OTP list and item components
│   ├── Popup/         # Main popup, header, footer
│   └── UI/            # Reusable UI components
├── hooks/
│   └── useOTPManager.ts  # Main state management
├── utils/
│   ├── totp.ts        # TOTP generation (Web Crypto API)
│   ├── otpUtils.ts    # OTP utilities
│   └── qrCodeUtils.ts # QR code scanning
├── types/
│   └── index.ts       # TypeScript interfaces
└── index.tsx          # Entry point

• OTP secrets are stored locally in Chrome's storage (chrome.storage.local)
• No data is sent to external servers
• TOTP generation uses the Web Crypto API
• Secrets are never logged or exposed

The extension requires these Chrome permissions:

• storage - Store OTP items locally
• tabs - Capture current tab for QR scanning
• activeTab - Access active tab content
• clipboardRead - Read QR codes from clipboard

MIT