Browser Extension Builder

AI-powered browser extension generator with multilingual tooltips and voice guidance.

Features

• Visual Extension Builder - Create browser extensions through an intuitive dashboard
• AI-Powered Content - Generate tooltip text using OpenRouter or Google Gemini
• Multi-language Support - Built-in internationalization for multiple locales
• Voice Guidance - Text-to-speech with Web Speech API, Azure, or Google Cloud
• Production-Ready - Secure API proxy, rate limiting, and caching

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

npm install

Environment Variables

Create a .env.local file in the project root:

# Required: API authentication token (generate a secure random string, 32+ chars)
APP_API_TOKEN=your_secure_random_token_here

# AI Providers (configure at least one)
OPENROUTER_API_KEY=sk-your-openrouter-key
GEMINI_API_KEY=your-gemini-key

# TTS Providers (optional, for paid voice services)
AZURE_TTS_KEY=your-azure-key
AZURE_TTS_REGION=eastus
GCP_TTS_KEY=your-gcp-key

See SECURITY.md for detailed configuration instructions.

Development

npm run dev

Open http://localhost:3000 in your browser.

Building for Production

npm run build
npm start

Running Tests

npm test
npm run test:coverage

Architecture

Server-Side API Proxy

All AI and TTS requests are proxied through Next.js API routes:

• /api/ai/generate - AI content generation
• /api/tts/synthesize - Text-to-speech synthesis

Benefits:

• API keys never exposed to clients
• Server-side rate limiting (60 req/min per token)
• Response caching (24h TTL)
• Centralized authentication

Extension Generation

1. Configure extension metadata and steps in the dashboard
2. Define target elements (CSS selectors, test IDs, or text)
3. Add localized tooltip content or generate with AI
4. Build and download the extension package
5. Load unpacked extension in Chrome/Edge

Security

• Bearer token authentication for all API routes
• Strict Content Security Policy in generated extensions
• Scoped host permissions (no <all_urls> by default)
• Input validation and sanitization
• Rate limiting and caching

See SECURITY.md for complete security documentation.

Project Structure

src/
├── app/
│   ├── api/              # Next.js API routes
│   │   ├── ai/           # AI generation endpoints
│   │   └── tts/          # TTS synthesis endpoints
│   └── page.tsx          # Main application page
├── components/           # React components
│   ├── BuilderView.tsx   # Extension builder interface
│   ├── BuildsHistory.tsx # Build history view
│   └── ui/               # Reusable UI components
├── lib/
│   ├── extension-builder/    # Extension generation logic
│   │   ├── manifest-builder.ts
│   │   ├── content-script-builder.ts
│   │   ├── packager.ts
│   │   └── ...
│   ├── extension-runtime/    # Runtime components for generated extensions
│   │   ├── dom-targeting-engine.ts
│   │   ├── advanced-tooltip-manager.ts
│   │   └── ...
│   ├── services/         # AI and TTS service integrations
│   ├── middleware/       # Rate limiting utilities
│   └── cache/            # Caching utilities
└── types/                # TypeScript type definitions

API Usage

AI Content Generation

curl -X POST http://localhost:3000/api/ai/generate \
  -H "Authorization: Bearer ${APP_API_TOKEN}" \
  -H "Content-Type: application/json" \
  -d '{
    "context": "Submit button",
    "targetValue": ".submit-btn",
    "targetKind": "css",
    "locales": ["en", "es"],
    "provider": "openrouter"
  }'

TTS Synthesis

curl -X POST http://localhost:3000/api/tts/synthesize \
  -H "Authorization: Bearer ${APP_API_TOKEN}" \
  -H "Content-Type: application/json" \
  -d '{
    "text": "Click this button to submit",
    "locale": "en",
    "engine": "azure"
  }'

Extension Configuration

Extensions support the following configuration:

{
  name: "My Extension",
  version: "1.0.0",
  description: "Extension description",
  locales: ["en", "es", "fr"],
  hosts: ["https://example.com/*"],  // Scoped permissions
  steps: [
    {
      targetKind: "css",
      targetValue: ".button",
      localizedTexts: {
        en: "Click here",
        es: "Haz clic aquí"
      }
    }
  ],
  aiProvider: "openrouter",
  ttsEngine: "webspeech"
}

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes with tests
4. Run npm test and npm run lint
5. Submit a pull request

License

MIT

Support

For security issues, see SECURITY.md.

For other questions, open an issue on GitHub.