2FA Checker Browser Extension

A browser extension that automatically checks if websites support Two-Factor Authentication (2FA) and displays visual indicators in the extension icon.

Features

• Automatic 2FA Detection: Checks websites against the 2fa.directory database
• Visual Icon Indicators:
  • 🟢 Green icon: Website supports 2FA
  • 🔴 Red icon: Website doesn't support 2FA
  • ⚪ Gray icon: No information available
• Real-time Updates: Icon updates when you navigate to different websites
• Comprehensive Coverage: Uses the 2fa.directory API for up-to-date 2FA information

Installation

Development Setup

1. Clone the repository:

   git clone https://github.com/impact-dryer/2fa-checker.git
   cd 2fa-checker

2. Install dependencies:

   npm install

3. Build the extension:

   npm run build

4. Load the extension in Chrome:

   • Open Chrome and go to chrome://extensions/
   • Enable "Developer mode"
   • Click "Load unpacked" and select the dist folder

Development

Available Scripts

• npm run watch - Build in development mode with file watching
• npm run build - Build for production
• npm test - Run unit tests
• npm run style - Format code with Prettier

Project Structure

src/
├── background.ts           # Extension background script entry point
├── popup.tsx              # Extension popup UI
├── contentScript.tsx      # Content script
├── options.tsx            # Extension options page
├── api/                   # Browser API abstractions
│   ├── browserAction.ts   # Chrome action API wrapper
│   └── browserTabs.ts     # Chrome tabs API wrapper
├── components/            # React components
│   └── TwoFAMethods.tsx   # 2FA methods display component
├── services/              # Business logic services
│   ├── backgroundService.ts  # Main background service
│   └── twoFAService.ts       # 2FA data fetching service
├── utils/                 # Utility functions
│   └── find2faDomain.ts   # Domain matching logic
├── icons/                 # Extension icons
└── __tests__/             # Unit tests

Architecture

The extension uses a modular architecture with:

• Dependency Injection: Services are injected for better testability
• Browser API Abstraction: Chrome APIs are wrapped in interfaces for cross-browser compatibility
• Service Layer: Business logic is separated into dedicated services
• Type Safety: Full TypeScript support with proper typing

API

The extension uses the 2fa.directory API to get information about website 2FA support.

Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature-name
3. Make your changes and add tests
4. Run tests: npm test
5. Commit your changes: git commit -m 'Add feature'
6. Push to the branch: git push origin feature-name
7. Submit a pull request

Development Guidelines

• Write unit tests for new functionality
• Follow the existing code style (use npm run style)
• Use TypeScript for type safety
• Keep services focused and testable

License

Apache License - see LICENSE file for details.

Credits

• 2FA data provided by 2fa.directory
• Icons created for this extension