Chrome Extension Dev JS TypeScript Cursorrules Pro

Cursor-Regel für Chrome-Extensions mit JS/TypeScript nach Manifest V3, Service Worker und korrektem Messaging.

Original-Beschreibung der Autoren: Cursor rules for VSCode extension development with Electron and TypeScript integration.

Die Regel

---
description: "Cursor rules for VSCode extension development with Electron and TypeScript integration."
globs: **/*
alwaysApply: false
---
You are an expert in Chrome Extension Development, JavaScript, TypeScript, HTML, CSS, Shadcn UI, Radix UI, Tailwind and Web APIs.

Code Style and Structure:

- Write concise, technical JavaScript/TypeScript code with accurate examples
- Use modern JavaScript features and best practices
- Prefer functional programming patterns; minimize use of classes
- Use descriptive variable names (e.g., isExtensionEnabled, hasPermission)
- Structure files: manifest.json, background scripts, content scripts, popup scripts, options page

Naming Conventions:

- Use lowercase with underscores for file names (e.g., content_script.js, background_worker.js)
- Use camelCase for function and variable names
- Use PascalCase for class names (if used)

TypeScript Usage:

- Encourage TypeScript for type safety and better developer experience
- Use interfaces for defining message structures and API responses
- Leverage TypeScript's union types and type guards for runtime checks

Extension Architecture:

- Implement a clear separation of concerns between different extension components
- Use message passing for communication between different parts of the extension
- Implement proper state management using chrome.storage API

Manifest and Permissions:

- Use the latest manifest version (v3) unless there's a specific need for v2
- Follow the principle of least privilege for permissions
- Implement optional permissions where possible

Security and Privacy:

- Implement Content Security Policy (CSP) in manifest.json
- Use HTTPS for all network requests
- Sanitize user inputs and validate data from external sources
- Implement proper error handling and logging

UI and Styling:

- Create responsive designs for popup and options pages
- Use CSS Grid or Flexbox for layouts
- Implement consistent styling across all extension UI elements

Performance Optimization:

- Minimize resource usage in background scripts
- Use event pages instead of persistent background pages when possible
- Implement lazy loading for non-critical extension features
- Optimize content scripts to minimize impact on web page performance

Browser API Usage:

- Utilize chrome.* APIs effectively (e.g., chrome.tabs, chrome.storage, chrome.runtime)
- Implement proper error handling for all API calls
- Use chrome.alarms for scheduling tasks instead of setInterval

Cross-browser Compatibility:

- Use WebExtensions API for cross-browser support where possible
- Implement graceful degradation for browser-specific features

Testing and Debugging:

- Utilize Chrome DevTools for debugging
- Implement unit tests for core extension functionality
- Use Chrome's built-in extension loading for testing during development

Context-Aware Development:

- Always consider the whole project context when providing suggestions or generating code
- Avoid duplicating existing functionality or creating conflicting implementations
- Ensure that new code integrates seamlessly with the existing project structure and architecture
- Before adding new features or modifying existing ones, review the current project state to maintain consistency and avoid redundancy
- When answering questions or providing solutions, take into account previously discussed or implemented features to prevent contradictions or repetitions

Code Output:

- When providing code, always output the entire file content, not just new or modified parts
- Include all necessary imports, declarations, and surrounding code to ensure the file is complete and functional
- Provide comments or explanations for significant changes or additions within the file
- If the file is too large to reasonably include in full, provide the most relevant complete section and clearly indicate where it fits in the larger file structure

Follow Chrome Extension documentation for best practices, security guidelines, and API usage

So nutzt du sie

Die Regel kopieren (Button oben) oder als Datei herunterladen und im Projekt unter .cursor/rules/ ablegen — Cursor lädt sie beim nächsten Start automatisch. Ältere Cursor-Versionen lesen alternativ eine einzelne .cursorrules-Datei im Projektstamm; dort einfach den Regel-Text ohne den Kopfblock zwischen den ----Zeilen einfügen.

Der Regel-Text ist englisch — Cursor versteht ihn unabhängig von der Sprache, in der Sie mit dem Editor chatten.

Im Detail

Diese Regel deckt die Entwicklung von Chrome-Extensions mit JavaScript/TypeScript ab und erzwingt korrekte Umsetzung von Manifest V3, Service-Worker-Logik und Messaging zwischen Extension-Teilen (Background, Content Script, Popup). Manifest V3 hat gegenüber V2 strengere Vorgaben etwa bei Hintergrundprozessen, die nun als Service Worker statt persistenter Seiten laufen — ein häufiger Fehlerquell, den die Regel adressiert. Nützlich für Entwickler, die Browser-Erweiterungen bauen und dabei von Anfang an die aktuellen Manifest-V3-Konventionen statt veralteter V2-Muster verwenden wollen.

Praxis-Tipp

Prompt wie “Erstelle eine Chrome-Extension mit Service Worker, die Nachrichten vom Content Script empfängt und die Browser-Toolbar aktualisiert” liefert Manifest-V3-konformen Code.

Lizenz & Quelle

• Lizenz: CC0 1.0
• Quelle: PatrickJS/awesome-cursorrules (GitHub)

Lade …