Chrome Extension Dev JS TypeScript .cursorrules prompt file

Author: penkzhou

What you can build

Interactive Learning Chrome Extension: Develop a Chrome extension that provides interactive programming lessons and quizzes directly in the browser. It could leverage TypeScript for type checking in exercises and utilize Radix UI for a visually appealing and user-friendly interface.Privacy-focused Ad Blocker: Create a Chrome extension that efficiently blocks ads using the latest manifest version (v3) and follows strict content security policies. This tool could use JavaScript to dynamically hide ads and use Tailwind for styling any UI components.Website Performance Analyzer: Develop a Chrome extension to analyze and report the performance of websites. It could employ Chrome's performance APIs, present data in dashboards using Shadcn UI, and provide tips for optimization based on CSS and JS best practices.Bookmark Manager with Tagging System: Build a Chrome extension that allows users to manage bookmarks with a robust tagging system. Utilize chrome.storage for state management and provide a clean, responsive UI using Flexbox for layout and CSS Grid for organization.Secure Password Manager: Create a TypeScript-based Chrome extension to manage and generate secure passwords. Implement a secure storage mechanism using chrome.storage API and allow users to access their passwords through a well-styled popup interface.Cross-Browser Tab Synchronizer: Develop a Chrome extension utilizing WebExtensions API for syncing open tabs across different browsers. Use event-driven architecture to detect changes in tabs and maintain a persistent state with chrome.storage.Customizable News Aggregator: Build a Chrome extension that aggregates news from user-selected sources. Implement a configurable options page where users can input their preferences, and leverage Tailwind for a cohesive and responsive UI.Focus Mode Productivity Tool: Create a Chrome extension that helps users stay focused by blocking distracting websites and sending reminders at set intervals using chrome.alarms. Implement optional permissions to allow users to customize their list of blocked sites.Language Translation Assistant: Develop a Chrome extension that provides on-page translations and language learning assistance. Use Web APIs for translations and shadcn UI to present translations in an intuitive tooltip or sidebar format.User Activity Tracker: Build a Chrome extension that tracks and logs user activity across websites to help users analyze how they spend their time online. Ensure secure data storage and implement privacy-centric features by anonymizing tracked data.Automated Form Filler: Create a TypeScript-based Chrome extension that detects online forms and offers to fill them with saved information. Use a secure storage system and include a popup for users to manage their stored data.Todo List with Contextual Notifications: Develop a Chrome extension that integrates a todo list into the browser, sending notifications based on context like opened tabs or time of day, utilizing chrome.alarms and chrome.notifications.Image Download Organizer: Create a Chrome extension that allows users to download and organize images from the web into specified folders automatically. Design a simple drag-and-drop UI for categorized download queues using Radix UI.SEO Analysis Tool for Web Developers: Build a Chrome extension providing real-time SEO insights for any webpage. Leverage browser APIs to access page metadata and render results in a comprehensive report using Tailwind for styling consistency.Grammar and Spell Checker: Develop a Chrome extension that highlights grammar and spelling errors in text inputs across the web. Implement a background script to analyze and suggest corrections using a reliable language processing API.

Benefits

Synopsis

Developers creating Chrome Extensions will benefit by building well-structured, secure, and efficient extensions using modern JavaScript practices and TypeScript, ensuring cross-browser compatibility and optimal performance.

Overview of .cursorrules prompt

The .cursorrules file provides guidelines for developers building Chrome extensions using JavaScript, TypeScript, HTML, and CSS. It covers code style and structure, advocating for concise, functional programming with descriptive naming conventions. TypeScript usage is encouraged for type safety. The file outlines best practices for extension architecture, including separation of concerns, state management, and message passing. Security is emphasized with guidelines on permissions, content security policy, and data validation. UI and styling advice, performance optimization tips, and browser API usage strategies are included. Cross-browser compatibility, testing and debugging practices, and context-aware development considerations are also addressed. The file stresses the importance of adhering to Chrome Extension documentation for best practices.

.cursorrules Content

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 pageNaming 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 checksExtension 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 APIManifest 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 possibleSecurity 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 loggingUI and Styling:- Create responsive designs for popup and options pages- Use CSS Grid or Flexbox for layouts- Implement consistent styling across all extension UI elementsPerformance 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 performanceBrowser 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 setIntervalCross-browser Compatibility:- Use WebExtensions API for cross-browser support where possible- Implement graceful degradation for browser-specific featuresTesting and Debugging:- Utilize Chrome DevTools for debugging- Implement unit tests for core extension functionality- Use Chrome's built-in extension loading for testing during developmentContext-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 repetitionsCode 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 structureFollow Chrome Extension documentation for best practices, security guidelines, and API usage