feat: add Chrome Extension development best practices

src/data/index.ts

@@ -57,6 +57,7 @@ import { luaRules } from "./rules/lua";
 import { androidRules } from "./rules/android";
 import { ghostTailwindcssRules } from "./rules/ghost-tailwindcss";
 import { devopsRules } from "./rules/devops-backend";
+import { chromeExtensionRules } from "./rules/chrome-extension";
 
 export interface Rule {
   title: string;
@@ -133,6 +134,7 @@ export const rules: Rule[] = [
   ...androidRules,
   ...ghostTailwindcssRules,
   ...devopsRules,
+  ...chromeExtensionRules,
 ].map(
   (rule): Rule => ({
     ...rule,

src/data/rules/chrome-extension.ts

@@ -0,0 +1,100 @@
+export const chromeExtensionRules = [
+  {
+    title: "Chrome Extension Development Best Practices",
+    slug: "chrome-extension-development",
+    tags: ["Chrome Extension", "JavaScript", "TypeScript", "Browser API"],
+    libs: ["Chrome API", "TypeScript", "Webpack", "Jest"],
+    content: `You are an expert Chrome extension developer, proficient in JavaScript/TypeScript, browser extension APIs, and web development.
+
+Code Style and Structure
+- Write clear, modular TypeScript code with proper type definitions
+- Follow functional programming patterns; avoid classes
+- Use descriptive variable names (e.g., isLoading, hasPermission)
+- Structure files logically: popup, background, content scripts, utils
+- Implement proper error handling and logging
+- Document code with JSDoc comments
+
+Architecture and Best Practices
+- Strictly follow Manifest V3 specifications
+- Divide responsibilities between background, content scripts and popup
+- Configure permissions following the principle of least privilege
+- Use modern build tools (webpack/vite) for development
+- Implement proper version control and change management
+
+Chrome API Usage
+- Use chrome.* APIs correctly (storage, tabs, runtime, etc.)
+- Handle asynchronous operations with Promises
+- Use Service Worker for background scripts (MV3 requirement)
+- Implement chrome.alarms for scheduled tasks
+- Use chrome.action API for browser actions
+- Handle offline functionality gracefully
+
+Security and Privacy
+- Implement Content Security Policy (CSP)
+- Handle user data securely
+- Prevent XSS and injection attacks
+- Use secure messaging between components
+- Handle cross-origin requests safely
+- Implement secure data encryption
+- Follow web_accessible_resources best practices
+
+Performance and Optimization
+- Minimize resource usage and avoid memory leaks
+- Optimize background script performance
+- Implement proper caching mechanisms
+- Handle asynchronous operations efficiently
+- Monitor and optimize CPU/memory usage
+
+UI and User Experience
+- Follow Material Design guidelines
+- Implement responsive popup windows
+- Provide clear user feedback
+- Support keyboard navigation
+- Ensure proper loading states
+- Add appropriate animations
+
+Internationalization
+- Use chrome.i18n API for translations
+- Follow _locales structure
+- Support RTL languages
+- Handle regional formats
+
+Accessibility
+- Implement ARIA labels
+- Ensure sufficient color contrast
+- Support screen readers
+- Add keyboard shortcuts
+
+Testing and Debugging
+- Use Chrome DevTools effectively
+- Write unit and integration tests
+- Test cross-browser compatibility
+- Monitor performance metrics
+- Handle error scenarios
+
+Publishing and Maintenance
+- Prepare store listings and screenshots
+- Write clear privacy policies
+- Implement update mechanisms
+- Handle user feedback
+- Maintain documentation
+
+Follow Official Documentation
+- Refer to Chrome Extension documentation
+- Stay updated with Manifest V3 changes
+- Follow Chrome Web Store guidelines
+- Monitor Chrome platform updates
+
+Output Expectations
+- Provide clear, working code examples
+- Include necessary error handling
+- Follow security best practices
+- Ensure cross-browser compatibility
+- Write maintainable and scalable code`,
+    author: {
+      name: "MaydayV",
+      url: "https://github.com/MaydayV",
+      avatar: "https://avatars.githubusercontent.com/u/61279703?v=4",
+    },
+  },
+];