# Chrome Extension Development Guidelines

## Code Style and Structure
- Write concise, modern JavaScript/TypeScript code.
- Prefer functional programming over classes.
- Use descriptive variable names (e.g., `isExtensionEnabled`, `hasPermission`).
- File structure:
  - `manifest.json`
  - `background_worker.js`
  - `content_script.js`
  - `popup.js`
  - `options.js`

## Naming Conventions
- File names: lowercase with underscores (e.g., `content_script.js`).
- Function/variable names: camelCase.
- Class names (if used): PascalCase.

## TypeScript Best Practices
- Use TypeScript for type safety and developer experience.
- Define message structures and API responses with interfaces.
- Leverage union types and type guards for runtime checks.

## Extension Architecture
- Separate concerns between components (background, content, popup, etc.).
- Use message passing for inter-component communication.
- Manage state with the `chrome.storage` API.

## Manifest and Permissions
- Use manifest v3 unless v2 is required.
- Follow least privilege principle for permissions.
- Utilize optional permissions when applicable.

## Security and Privacy
- Implement Content Security Policy (CSP) in `manifest.json`.
- Use HTTPS for all network requests.
- Sanitize user inputs and validate external data.
- Handle errors and log securely.

## UI and Styling
- Create responsive, consistent designs.
- Use CSS Grid or Flexbox for layouts.
- Ensure uniform styling across all UI elements.

## Performance Optimization
- Use event-driven background scripts (non-persistent).
- Implement lazy loading for non-critical features.
- Optimize content scripts to minimize web page impact.

## Browser API Usage
- Use `chrome.*` APIs effectively (e.g., `chrome.tabs`, `chrome.storage`).
- Handle API errors gracefully.
- Use `chrome.alarms` instead of `setInterval`.

## Cross-Browser Compatibility
- Use WebExtensions API for compatibility.
- Gracefully degrade unsupported features.

## Testing and Debugging
- Debug with Chrome DevTools.
- Write unit tests for core functionality.
- Use Chrome’s extension loader for testing.

## Context Awareness
- Align new code with existing project structure.
- Avoid redundancy and conflicting implementations.
- Review current project state before modifying or adding features.

## Code Output
- Provide complete, functional file content.
- Include necessary imports, declarations, and comments.
- For large files, include relevant sections with context.

## References
- Follow Chrome Extension documentation for best practices.