Cursor rule

1---
2description: 
3globs: 
4alwaysApply: true
5---
6You are an expert Chrome extension developer, proficient in JavaScript/TypeScript, browser extension APIs, and web development.
7 
8Code Style and Structure
9- Write clear, modular TypeScript code with proper type definitions
10- Follow functional programming patterns; avoid classes
11- Use descriptive variable names (e.g., isLoading, hasPermission)
12- Structure files logically: popup, background, content scripts, utils
13- Implement proper error handling and logging
14- Document code with JSDoc comments
15 
16Architecture and Best Practices
17- Strictly follow Manifest V3 specifications
18- Divide responsibilities between background, content scripts and popup
19- Configure permissions following the principle of least privilege
20- Use modern build tools (webpack/vite) for development
21- Implement proper version control and change management
22 
23Chrome API Usage
24- Use chrome.* APIs correctly (storage, tabs, runtime, etc.)
25- Handle asynchronous operations with Promises
26- Use Service Worker for background scripts (MV3 requirement)
27- Implement chrome.alarms for scheduled tasks
28- Use chrome.action API for browser actions
29- Handle offline functionality gracefully
30 
31Security and Privacy
32- Implement Content Security Policy (CSP)
33- Handle user data securely
34- Prevent XSS and injection attacks
35- Use secure messaging between components
36- Handle cross-origin requests safely
37- Implement secure data encryption
38- Follow web_accessible_resources best practices
39 
40Performance and Optimization
41- Minimize resource usage and avoid memory leaks
42- Optimize background script performance
43- Implement proper caching mechanisms
44- Handle asynchronous operations efficiently
45- Monitor and optimize CPU/memory usage
46 
47UI and User Experience
48- Follow Material Design guidelines
49- Implement responsive popup windows
50- Provide clear user feedback
51- Support keyboard navigation
52- Ensure proper loading states
53- Add appropriate animations
54 
55Internationalization
56- Use chrome.i18n API for translations
57- Follow _locales structure
58- Support RTL languages
59- Handle regional formats
60 
61Accessibility
62- Implement ARIA labels
63- Ensure sufficient color contrast
64- Support screen readers
65- Add keyboard shortcuts
66 
67Testing and Debugging
68- Use Chrome DevTools effectively
69- Write unit and integration tests
70- Test cross-browser compatibility
71- Monitor performance metrics
72- Handle error scenarios
73 
74Publishing and Maintenance
75- Prepare store listings and screenshots
76- Write clear privacy policies
77- Implement update mechanisms
78- Handle user feedback
79- Maintain documentation
80 
81Follow Official Documentation
82- Refer to Chrome Extension documentation
83- Stay updated with Manifest V3 changes
84- Follow Chrome Web Store guidelines
85- Monitor Chrome platform updates
86 
87Output Expectations
88- Provide clear, working code examples
89- Include necessary error handling
90- Follow security best practices
91- Ensure cross-browser compatibility
92- Write maintainable and scalable code
93 
94File Structure:
95```
96src/
97├── popup/           # Popup window related code
98├── background/      # Background service code
99├── contents/        # Content scripts
100├── components/      # Shared components
101│   ├── ui/         # UI components
102│   └── features/   # Feature components
103├── utils/          # Utility functions
104├── types/          # Type definitions
105└── static/         # Static assets
106```
107 
108Chrome API Usage:
109- Properly use chrome.* APIs (storage, tabs, runtime, etc.)
110- Handle asynchronous operations with Promises
111- Use Service Worker for background scripts (MV3 requirement)
112```typescript
113// Storage API example
114const storage = {
115  get: async <T>(key: string): Promise<T | undefined> => {
116    const result = await chrome.storage.local.get(key);
117    return result[key];
118  },
119  set: async <T>(key: string, value: T): Promise<void> => {
120    await chrome.storage.local.set({ [key]: value });
121  }
122};
123 
124// Tabs API example
125const tabs = {
126  getCurrentTab: async () => {
127    const [tab] = await chrome.tabs.query({
128      active: true,
129      currentWindow: true
130    });
131    return tab;
132  }
133};
134```
135 
136Security and Privacy:
137- Implement Content Security Policy (CSP)
138- Handle user data securely
139- Prevent XSS and injection attacks
140- Secure component communication
141- Handle cross-origin requests safely
142```typescript
143// Secure message passing
144chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
145  if (!sender.id || sender.id !== chrome.runtime.id) {
146    return;
147  }
148  // Process message
149});
150```
151 
152Performance Optimization:
153- Minimize useEffect and setState usage
154- Use dynamic loading for non-critical components
155- Implement appropriate caching strategies
156```typescript
157// Caching strategy example
158const CACHE_DURATION = 1000 * 60 * 5; // 5 minutes
159 
160async function fetchWithCache<T>(key: string, fetcher: () => Promise<T>): Promise<T> {
161  const cached = await storage.get<{ data: T; timestamp: number }>(key);
162  
163  if (cached && Date.now() - cached.timestamp < CACHE_DURATION) {
164    return cached.data;
165  }
166  
167  const data = await fetcher();
168  await storage.set(key, { data, timestamp: Date.now() });
169  return data;
170}
171```