Browser Extension

A modern browser extension built with best practices and modern tooling.

🚀 Quick Start

Prerequisites

• Node.js 18+
• npm or yarn
• Chrome/Firefox browser

Installation

# Install dependencies
npm install

# Development mode with hot reload
npm run dev

# Build for production
npm run build

# Package extension
npm run package

📁 Project Structure

├── src/                    # Source code
│   ├── background/        # Background scripts
│   ├── content/          # Content scripts  
│   ├── popup/            # Popup interface
│   └── utils/            # Shared utilities
├── assets/                # Static assets
│   ├── icons/            # Extension icons
│   ├── images/           # Other images
│   └── styles/           # CSS files
├── docs/                  # Documentation
├── tests/                 # Test files
├── tools/                 # Build/deployment scripts
└── dist/                  # Built extension (auto-generated)

🛠️ Development

Scripts

• npm run dev - Development mode with file watching
• npm run build - Production build
• npm run test - Run tests
• npm run lint - Check code quality
• npm run format - Format code with Prettier
• npm run clean - Clean build directory
• npm run package - Create distributable zip

Code Quality

• ESLint - Code linting and best practices
• Prettier - Automatic code formatting
• TypeScript - Type safety (optional)

Testing

• Jest - Unit testing framework
• Chrome Extension Testing - Browser-specific tests

🔧 Configuration

Webpack

• Multi-entry point configuration
• Asset optimization
• Source maps for debugging
• Hot reload support

Browser Compatibility

• Chrome 88+
• Firefox 85+
• Edge 88+

📦 Building & Distribution

1. Development: npm run dev (watches for changes)
2. Production: npm run build (optimized build)
3. Package: npm run package (creates .zip file)

🧪 Testing

# Run all tests
npm test

# Run tests in watch mode
npm test -- --watch

# Generate coverage report
npm test -- --coverage

📚 Documentation

• Chrome Extensions API
• Firefox WebExtensions
• Webpack Documentation

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Run tests and linting
5. Submit a pull request

📄 License

MIT License - see LICENSE file for details