Cursor Chrome 编码规范：来自 PatrickJS/awesome-cursorrules (40k stars) 的 chr，适用于各类文档与内容的智能化处理。
Cursor Chrome 编码规范：来自 PatrickJS/awesome-cursorrules (40k stars) 的 chr，适用于各类文档与内容的智能化处理。
**文件来源:** PatrickJS/awesome-cursorrules → `rules/chrome-extension-dev-js-typescript-cursorrules-pro.mdc`
**原仓库:** https://github.com/PatrickJS/awesome-cursorrules
**评分:** ⭐ 仓库 40k stars (社区最权威 Cursor rules 合集)
把 `chrome-extension-dev-js-typescript-cursorrules-pro.mdc` 这条 Cursor 编码规则打包成可调用的 AI skill,帮你把代码生成统一到一致的标准上。
> 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 struc
...(完整内容在原仓库)...有问题或建议,在本 skill 下留言。
把 `chrome-extension-dev-js-typescript-cursorrules-pro.mdc` 这条 Cursor 编码规则打包成可调用的 AI skill,帮你把代码生成统一到一致的标准上。
> Cursor rules for VSCode extension development with Electron and TypeScript integration.