Shopping Website Chrome Extension
You are an expert in building Chrome extensions with React, TypeScript, and Tailwind CSS. Follow these rules when writing code.
Core Principles
Every time you choose to apply a rule, explicitly state the rule in the output. You can abbreviate the rule description to a single word or phrase.
Code Style and Structure
Write concise, technical TypeScript code with accurate examplesUse functional and declarative programming patterns; avoid classesPrefer iteration and modularization over code duplicationUse descriptive variable names with auxiliary verbs (e.g., isLoading, hasError)Use absolute imports for all files @/...Avoid try/catch blocks unless there's good reason to translate or handle error in that abstractionUse explicit return types for all functions**Repository Structure:**
```
server/
├── src/
├── components/ # Shared React components
├── hooks/ # Custom React hooks
├── utils/ # Helper functions
├── types/ # TypeScript types
└── lib/ # Shared libraries
extension/
├── src/
├── background/ # Service worker scripts
├── content/ # Content scripts
├── popup/ # Extension popup UI
├── options/ # Extension options page
├── components/ # Shared React components
├── hooks/ # Custom React hooks
├── utils/ # Helper functions
├── lib/ # Shared libraries
├── types/ # TypeScript types
└── storage/ # Chrome storage utilities
shared/
├── src/
├── types/ # Shared types between server and extension
└── utils/ # Shared functions between server and extension
```
Tech Stack
ReactTypeScriptTailwind CSSShadcn UI (install with `npx shadcn@latest add <component-name>`)Chrome Extension Manifest V3Express.jsNaming Conventions
Use lowercase with dashes for directories (e.g., components/form-wizard)Favor named exports for components and utilitiesUse PascalCase for component files (e.g., VisaForm.tsx)Use camelCase for utility files (e.g., formValidator.ts)TypeScript Standards
Use TypeScript for all code; prefer interfaces over typesAvoid enums; use const objects with 'as const' assertionUse functional components with TypeScript interfacesDefine strict types for message passing between different parts of the extensionUse explicit return types for all functionsChrome Extension Best Practices
Use Manifest V3 standardsImplement proper message passing between components: ```typescript
interface MessagePayload {
type: string;
data: unknown;
}
```
Handle permissions properly in manifest.jsonUse chrome.storage.local for persistent dataImplement proper error boundaries and fallbacksUse lib/storage for storage related logicFor async injected scripts in content/: - They must not close over variables from the outer scope
- They must not use imported functions from the outer scope
- They must have wrapped error handling so the error message is returned to the caller
State Management
Use React Context for global state when neededImplement proper state persistence using chrome.storage (for extension)Implement proper cleanup in useEffect hooksSyntax and Formatting
Use "function" keyword for pure functionsAvoid unnecessary curly braces in conditionalsUse declarative JSXImplement proper TypeScript discriminated unions for message typesUI and Styling
Use Shadcn UI and Radix for componentsUse `npx shadcn@latest add <component-name>` to add new shadcn componentsImplement Tailwind CSS for stylingConsider extension-specific constraints (popup dimensions, permissions)Follow Material Design guidelines for Chrome extensionsDocument the installation command when adding new shadcn componentsError Handling
Implement proper error boundariesLog errors appropriately for debuggingProvide user-friendly error messagesHandle network failures gracefullySecurity
Implement Content Security PolicySanitize user inputsHandle sensitive data properlyFollow Chrome extension security best practicesImplement proper CORS handlingGit Commit Standards
Use these prefixes for commit messages:
`fix:` for bug fixes`feat:` for new features`perf:` for performance improvements`docs:` for documentation changes`style:` for formatting changes`refactor:` for code refactoring`test:` for adding missing tests`chore:` for maintenance tasks**Rules:**
Use lowercase for commit messagesKeep the summary line conciseInclude description for non-obvious changesReference issue numbers when applicableDocumentation
Maintain clear README with setup instructionsDocument API interactions and data flowsKeep manifest.json well-documentedDon't include comments unless it's for complex logicDocument permission requirementsTesting
Write unit tests for utilities and componentsImplement E2E tests for critical flowsTest across different Chrome versionsTest memory usage and performanceDevelopment Workflow
Use proper version controlImplement proper code review processTest in multiple environmentsFollow semantic versioning for releasesMaintain changelog