About .cursorrules prompt file
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
- Emphasizes modern JavaScript/TypeScript practices, using concise code and functional programming patterns, improving readability and maintainability.
- Focuses on performance optimization, resource-efficient scripts, and lazy loading, enhancing extension efficiency and user experience.
- Stresses comprehensive security measures, like CSP implementation, HTTPS usage, and input sanitization, safeguarding users' privacy and data integrity.
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.
