chore: initialize project repository with core extension files
- Add .gitignore to exclude node_modules, dist, logs, and system files - Add comprehensive project documentation including README, deployment guide, and development setup - Add .kiro project specifications for amazon-product-bar-extension, appwrite-cloud-storage, appwrite-userid-repair, blacklist-feature, and enhanced-item-management - Add .kiro steering documents for product, structure, styling, and tech guidelines - Add VSCode settings configuration for consistent development environment - Add manifest.json and babel/vite configuration for extension build setup - Add complete source code implementation including AppWrite integration, storage managers, UI components, and services - Add comprehensive test suite with Jest configuration and 30+ test files covering all major modules - Add test HTML files for integration testing and validation - Add coverage reports and build validation scripts - Add AppWrite setup and repair documentation for database schema management - Add migration guides and responsive accessibility implementation documentation - Establish foundation for Amazon product bar extension with full feature set including blacklist management, enhanced item workflows, and real-time synchronization
This commit is contained in:
28
.kiro/steering/product.md
Normal file
28
.kiro/steering/product.md
Normal file
@@ -0,0 +1,28 @@
|
||||
# Amazon Product Bar Extension
|
||||
|
||||
A Chrome extension that enhances Amazon search results with an interactive product management system. The extension adds a product bar below each product image and provides a sophisticated menu system for managing saved items, blacklists, and AI-powered features.
|
||||
|
||||
## Core Features
|
||||
|
||||
- **Product Bar Integration**: Automatically injects product bars below Amazon product images on search result pages
|
||||
- **StaggeredMenu**: Animated React-based navigation menu with GSAP animations
|
||||
- **Enhanced Item Management**: AI-powered product title suggestions using Mistral AI
|
||||
- **Blacklist System**: Brand-based filtering with visual indicators
|
||||
- **Settings Panel**: Configuration for API keys and user preferences
|
||||
- **Cross-tab Synchronization**: Real-time updates across browser tabs
|
||||
- **Accessibility**: WCAG-compliant interface with proper ARIA labels
|
||||
- **Responsive Design**: Works across different screen sizes and Amazon layouts
|
||||
|
||||
## Target Platforms
|
||||
|
||||
- Amazon domains: .com, .de, .co.uk, .fr, .it, .es
|
||||
- Chrome Extension Manifest V3
|
||||
- Modern browsers with ES6+ support
|
||||
|
||||
## User Workflow
|
||||
|
||||
1. User navigates to Amazon search results
|
||||
2. Extension automatically detects product cards and injects product bars
|
||||
3. User can access the StaggeredMenu to manage items, blacklists, and settings
|
||||
4. AI-powered features enhance product titles and provide intelligent suggestions
|
||||
5. Real-time synchronization keeps data consistent across tabs
|
||||
71
.kiro/steering/structure.md
Normal file
71
.kiro/steering/structure.md
Normal file
@@ -0,0 +1,71 @@
|
||||
# Project Structure & Architecture
|
||||
|
||||
## Directory Organization
|
||||
|
||||
```
|
||||
├── src/ # Source code
|
||||
│ ├── content.jsx # Main entry point & content script
|
||||
│ ├── StaggeredMenu.jsx # React menu component
|
||||
│ ├── StaggeredMenu.css # Menu styles
|
||||
│ ├── *Manager.js # Manager classes (storage, panels, etc.)
|
||||
│ ├── *Extractor.js # Data extraction utilities
|
||||
│ ├── *Service.js # External service integrations
|
||||
│ ├── Enhanced*.js # Enhanced feature implementations
|
||||
│ ├── *.css # Component-specific styles
|
||||
│ └── __tests__/ # Test files
|
||||
├── dist/ # Build output (generated)
|
||||
├── .kiro/ # Kiro configuration
|
||||
│ ├── steering/ # Project steering rules
|
||||
│ └── specs/ # Feature specifications
|
||||
├── test-*.html # Manual testing pages
|
||||
└── manifest.json # Chrome extension manifest
|
||||
```
|
||||
|
||||
## Architecture Patterns
|
||||
|
||||
### Manager Pattern
|
||||
- **Purpose**: Encapsulate complex functionality into focused managers
|
||||
- **Examples**: `EnhancedStorageManager`, `ItemsPanelManager`, `BlacklistPanelManager`
|
||||
- **Responsibilities**: State management, UI coordination, data persistence
|
||||
|
||||
### Event-Driven Communication
|
||||
- **Global Event Bus**: `window.amazonExtEventBus` for cross-component communication
|
||||
- **Event Types**: `product:saved`, `blacklist:updated`, `enhanced:item:saved`
|
||||
- **Pattern**: Emit events for state changes, listen for updates
|
||||
|
||||
### Error Handling Strategy
|
||||
- **Centralized**: `ErrorHandler` class with retry logic and fallbacks
|
||||
- **User-Friendly**: Localized error messages (German/English)
|
||||
- **Graceful Degradation**: Fallback data when services fail
|
||||
|
||||
## File Naming Conventions
|
||||
|
||||
- **Managers**: `*Manager.js` (e.g., `EnhancedStorageManager.js`)
|
||||
- **Services**: `*Service.js` (e.g., `MistralAIService.js`)
|
||||
- **Extractors**: `*Extractor.js` (e.g., `ProductExtractor.js`)
|
||||
- **Components**: PascalCase for React components (e.g., `StaggeredMenu.jsx`)
|
||||
- **Tests**: `*.test.js` in `__tests__/` directory
|
||||
- **Styles**: Component-specific CSS files matching component names
|
||||
|
||||
## Code Organization Principles
|
||||
|
||||
### Class-Based Architecture
|
||||
- ES6 classes for managers and services
|
||||
- Constructor dependency injection
|
||||
- Public/private method distinction with JSDoc
|
||||
|
||||
### React Integration
|
||||
- Functional components with hooks
|
||||
- React only for UI components (menu, panels)
|
||||
- DOM manipulation handled by vanilla JS managers
|
||||
|
||||
### Storage Strategy
|
||||
- **localStorage**: Primary storage for extension data
|
||||
- **Keys**: Prefixed with `amazon-ext-` or `amazon_ext_`
|
||||
- **Cross-tab sync**: Storage event listeners for real-time updates
|
||||
|
||||
### Testing Structure
|
||||
- **Unit tests**: Individual component testing
|
||||
- **Integration tests**: Manager interaction testing
|
||||
- **Property-based tests**: Using fast-check for robust validation
|
||||
- **Mocks**: localStorage, DOM APIs, external services
|
||||
100
.kiro/steering/styling.md
Normal file
100
.kiro/steering/styling.md
Normal file
@@ -0,0 +1,100 @@
|
||||
# Styling Guidelines for Amazon Extension
|
||||
|
||||
## Critical: CSS Override Strategy for Amazon Pages
|
||||
|
||||
When styling UI elements that will be injected into Amazon pages, **CSS files alone are NOT sufficient**. Amazon's stylesheets have high specificity and load after extension styles, overriding even `!important` rules.
|
||||
|
||||
### The Problem
|
||||
- Amazon's CSS has higher specificity than extension CSS
|
||||
- Amazon's stylesheets load after extension styles
|
||||
- Even `!important` rules in CSS files can be overridden
|
||||
- CSS variables defined in `:root` may not work on Amazon pages
|
||||
|
||||
### The Solution: Inline Styles via JavaScript
|
||||
|
||||
For critical visual styles (backgrounds, colors, borders, etc.), apply them directly via JavaScript using `element.style`:
|
||||
|
||||
```javascript
|
||||
// ✅ CORRECT - Cannot be overridden by Amazon CSS
|
||||
Object.assign(element.style, {
|
||||
background: '#0a0a0a',
|
||||
color: '#ffffff',
|
||||
padding: '2rem',
|
||||
borderRadius: '24px'
|
||||
});
|
||||
|
||||
// ❌ WRONG - Will be overridden by Amazon CSS
|
||||
// Relying only on CSS classes
|
||||
element.className = 'my-styled-element';
|
||||
```
|
||||
|
||||
### CSS Specificity Hierarchy (highest to lowest)
|
||||
1. **Inline styles via JavaScript** (`element.style.property`) - HIGHEST
|
||||
2. Inline styles in HTML (`style="..."`)
|
||||
3. `!important` in CSS
|
||||
4. ID selectors
|
||||
5. Class selectors
|
||||
6. Element selectors
|
||||
|
||||
### Implementation Pattern
|
||||
|
||||
Create helper methods in Manager classes:
|
||||
|
||||
```javascript
|
||||
_applyInlineStyles(element) {
|
||||
Object.assign(element.style, {
|
||||
background: 'rgba(255, 255, 255, 0.05)',
|
||||
border: '1px solid rgba(255, 255, 255, 0.1)',
|
||||
borderRadius: '24px',
|
||||
// ... more styles
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
### When to Use Inline Styles
|
||||
- Container backgrounds and colors
|
||||
- Text colors and fonts
|
||||
- Borders and border-radius
|
||||
- Padding and margins
|
||||
- Any visual style that must be guaranteed
|
||||
|
||||
### When CSS Files Are Still Useful
|
||||
- Animations and keyframes
|
||||
- Pseudo-elements (::before, ::after)
|
||||
- Media queries for responsive design
|
||||
- Hover states (combine with JS event listeners)
|
||||
- Complex selectors
|
||||
|
||||
### Example: Hover Effects with JavaScript
|
||||
|
||||
```javascript
|
||||
element.addEventListener('mouseenter', () => {
|
||||
element.style.transform = 'translateY(-6px)';
|
||||
element.style.boxShadow = '0 12px 48px rgba(0, 0, 0, 0.45)';
|
||||
});
|
||||
|
||||
element.addEventListener('mouseleave', () => {
|
||||
element.style.transform = 'none';
|
||||
element.style.boxShadow = 'none';
|
||||
});
|
||||
```
|
||||
|
||||
## Design System Colors (for inline styles)
|
||||
|
||||
```javascript
|
||||
const colors = {
|
||||
bgDark: '#0a0a0a',
|
||||
bgCard: 'rgba(255, 255, 255, 0.05)',
|
||||
bgCardHover: 'rgba(255, 255, 255, 0.08)',
|
||||
textPrimary: '#ffffff',
|
||||
textSecondary: '#e0e0e0',
|
||||
textMuted: '#a0a0a0',
|
||||
primary: '#ff9900',
|
||||
primaryGradient: 'linear-gradient(135deg, #ff9900 0%, #ff7700 100%)',
|
||||
border: 'rgba(255, 255, 255, 0.1)',
|
||||
borderHover: 'rgba(255, 255, 255, 0.2)',
|
||||
success: '#28a745',
|
||||
error: '#dc3545',
|
||||
link: '#74c0fc'
|
||||
};
|
||||
```
|
||||
66
.kiro/steering/tech.md
Normal file
66
.kiro/steering/tech.md
Normal file
@@ -0,0 +1,66 @@
|
||||
# Technology Stack & Build System
|
||||
|
||||
## Core Technologies
|
||||
|
||||
- **React 18**: UI framework for components (StaggeredMenu, panels)
|
||||
- **GSAP 3.12+**: Animation library for smooth menu transitions
|
||||
- **Vite 6.0+**: Build tool and development server
|
||||
- **Jest 30+**: Testing framework with jsdom environment
|
||||
- **Babel**: JavaScript transpilation for compatibility
|
||||
- **Chrome Extension Manifest V3**: Extension platform
|
||||
|
||||
## Build System
|
||||
|
||||
### Development Commands
|
||||
```bash
|
||||
# Install dependencies
|
||||
npm install
|
||||
|
||||
# Development build with watch mode
|
||||
npm run dev
|
||||
|
||||
# Production build
|
||||
npm run build
|
||||
|
||||
# Run tests
|
||||
npm run test
|
||||
|
||||
# Run tests in watch mode
|
||||
npm run test:watch
|
||||
```
|
||||
|
||||
### Build Configuration
|
||||
- **Entry Point**: `src/content.jsx`
|
||||
- **Output**: `dist/content.js` and `dist/style.css`
|
||||
- **No code splitting**: Single bundle for extension compatibility
|
||||
- **CSS bundling**: All styles combined into single file
|
||||
- **Minification**: Disabled for debugging
|
||||
|
||||
## Extension Development Workflow
|
||||
|
||||
1. Run `npm run dev` for watch mode
|
||||
2. Load unpacked extension in Chrome (`chrome://extensions/`)
|
||||
3. After code changes, reload extension in Chrome
|
||||
4. Refresh Amazon page to see changes
|
||||
|
||||
## Testing Setup
|
||||
|
||||
- **Environment**: jsdom for DOM simulation
|
||||
- **Mocks**: localStorage, Chrome APIs
|
||||
- **Property-based testing**: fast-check for robust test cases
|
||||
- **Setup file**: `jest.setup.js` for test environment configuration
|
||||
|
||||
## Key Dependencies
|
||||
|
||||
- **gsap**: Animation engine for menu transitions
|
||||
- **react/react-dom**: UI framework and rendering
|
||||
- **@vitejs/plugin-react**: Vite React integration
|
||||
- **jest-environment-jsdom**: DOM testing environment
|
||||
- **fast-check**: Property-based testing library
|
||||
|
||||
## Browser Compatibility
|
||||
|
||||
- Chrome/Chromium-based browsers
|
||||
- Manifest V3 compliance
|
||||
- ES6+ features (modules, async/await, classes)
|
||||
- Modern DOM APIs (MutationObserver, localStorage)
|
||||
Reference in New Issue
Block a user