Browser Extension Development with Svelte & TypeScript

A comprehensive development setup for building modern WebExtensions using Svelte 4, TypeScript, and contemporary tooling with proper internationalization support.

Project Structure

Follow this organized structure for WebExtension development:

```

source/

├── service-worker/ # Background scripts

├── options/ # Options page

│ ├── components/ # Svelte components

│ ├── stores/ # Svelte stores

│ ├── App.svelte # Main component

│ ├── options.scss # Styles

│ └── options.ts # Initialization

public/

├── build/ # Built assets

├── _locales/ # Internationalization

├── manifest.json # Extension manifest

└── icons/ # Extension icons

```

Development Workflow

Building & Linting

Code Quality

Internationalization Requirements

**Critical**: All user-facing strings must be internationalized

1. **Add translations** to `public/_locales/LOCALE/messages.json` for every language

2. **Use `getMessage()` function** to retrieve localized strings - never hardcode

3. **German translations** should use informal (Du) form

4. **Support multiple locales** with proper fallbacks

Example translation structure:

```json

{

"extensionName": {

"message": "Reverse Image Search",

"description": "Extension name"

}

}

```

Technology Stack

Best Practices

1. **Modular Components**: Break UI into reusable Svelte components

2. **State Management**: Use Svelte stores for shared state

3. **Type Safety**: Leverage TypeScript throughout

4. **Internationalization**: Never hardcode strings

5. **Testing Strategy**: Focus on business logic, not UI components

6. **Build Process**: Use standard npm scripts for consistent builds

Extension Specific Considerations