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:
140
DEVELOPMENT.md
Normal file
140
DEVELOPMENT.md
Normal file
@@ -0,0 +1,140 @@
|
||||
# Entwicklungsanleitung
|
||||
|
||||
## Setup
|
||||
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
## Build-Befehle
|
||||
|
||||
### Production Build
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
Erstellt optimierte Dateien im `dist/` Ordner.
|
||||
|
||||
### Development Build mit Watch-Mode
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
Vite beobachtet Änderungen und rebuildet automatisch. Du musst die Extension in Chrome manuell neu laden.
|
||||
|
||||
## Extension in Chrome laden
|
||||
|
||||
1. Öffne `chrome://extensions/`
|
||||
2. Aktiviere "Entwicklermodus"
|
||||
3. Klicke "Entpackte Erweiterung laden"
|
||||
4. Wähle diesen Projektordner
|
||||
|
||||
## Nach Code-Änderungen
|
||||
|
||||
1. Warte bis Vite fertig gebaut hat (im Watch-Mode automatisch)
|
||||
2. Gehe zu `chrome://extensions/`
|
||||
3. Klicke auf das Reload-Symbol bei deiner Extension
|
||||
4. Lade die Amazon-Seite neu
|
||||
|
||||
## Projektstruktur
|
||||
|
||||
```
|
||||
src/
|
||||
├── content.jsx # Entry Point - wird in die Amazon-Seite injiziert
|
||||
├── StaggeredMenu.jsx # React Komponente für das animierte Menü
|
||||
└── StaggeredMenu.css # Styles für das Menü
|
||||
|
||||
dist/ # Build-Output (von Vite generiert)
|
||||
├── content.js # Gebündeltes JavaScript
|
||||
└── style.css # Gebündeltes CSS
|
||||
|
||||
manifest.json # Chrome Extension Konfiguration
|
||||
vite.config.js # Vite Build-Konfiguration
|
||||
```
|
||||
|
||||
## Wichtige Dateien
|
||||
|
||||
### `src/content.jsx`
|
||||
- Haupt-Entry-Point
|
||||
- Injiziert das StaggeredMenu
|
||||
- Verwaltet Product Bars
|
||||
- Beobachtet DOM-Änderungen für Infinite Scroll
|
||||
|
||||
### `src/StaggeredMenu.jsx`
|
||||
- React-Komponente mit GSAP-Animationen
|
||||
- Vollständig konfigurierbar über Props
|
||||
- Accessibility-Features eingebaut
|
||||
|
||||
### `vite.config.js`
|
||||
- Konfiguriert Vite für Chrome Extension Build
|
||||
- Single-Entry-Point Setup
|
||||
- Deaktiviert Code-Splitting für Extensions
|
||||
|
||||
## Anpassungen
|
||||
|
||||
### Menu-Items ändern
|
||||
Bearbeite `menuItems` Array in `src/content.jsx`:
|
||||
```javascript
|
||||
const menuItems = [
|
||||
{ label: 'Dein Label', ariaLabel: 'Beschreibung', link: '/dein-link' }
|
||||
];
|
||||
```
|
||||
|
||||
### Styling anpassen
|
||||
Bearbeite `src/StaggeredMenu.css` oder passe Props in `src/content.jsx` an:
|
||||
```javascript
|
||||
<StaggeredMenu
|
||||
colors={['#farbe1', '#farbe2']}
|
||||
accentColor="#akzentfarbe"
|
||||
position="left" // oder "right"
|
||||
/>
|
||||
```
|
||||
|
||||
### Product Bar anpassen
|
||||
Die Product Bar Styles sind in `src/StaggeredMenu.css` unter `.amazon-ext-product-bar`.
|
||||
|
||||
## Debugging
|
||||
|
||||
### Console Logs
|
||||
Öffne Developer Tools (F12) auf Amazon:
|
||||
- "Amazon Product Bar Extension (React) loaded"
|
||||
- "Found X product cards to process"
|
||||
- "StaggeredMenu injected into page"
|
||||
- "Menu opened" / "Menu closed"
|
||||
|
||||
### React DevTools
|
||||
Installiere React DevTools Extension um die Komponenten zu inspizieren.
|
||||
|
||||
### Vite Build Errors
|
||||
Wenn der Build fehlschlägt:
|
||||
1. Lösche `node_modules/` und `dist/`
|
||||
2. Führe `npm install` aus
|
||||
3. Führe `npm run build` aus
|
||||
|
||||
## Häufige Probleme
|
||||
|
||||
**Extension lädt nicht:**
|
||||
- Prüfe ob `dist/content.js` und `dist/style.css` existieren
|
||||
- Stelle sicher, dass `manifest.json` auf die richtigen Dateien zeigt
|
||||
|
||||
**Menu erscheint nicht:**
|
||||
- Prüfe Console auf React-Fehler
|
||||
- Stelle sicher, dass GSAP korrekt importiert wurde
|
||||
- Prüfe ob der Menu-Container erstellt wurde
|
||||
|
||||
**Product Bars fehlen:**
|
||||
- Prüfe ob du auf einer Amazon-Suchergebnisseite bist
|
||||
- Schaue in die Console für "Found X product cards"
|
||||
- Prüfe ob die Selektoren noch mit Amazon's DOM übereinstimmen
|
||||
|
||||
## Performance
|
||||
|
||||
- Vite erstellt einen optimierten Build
|
||||
- GSAP-Animationen sind GPU-beschleunigt
|
||||
- MutationObserver ist auf relevante Änderungen beschränkt
|
||||
- React-Rendering ist auf das Menu beschränkt
|
||||
|
||||
## Nächste Schritte
|
||||
|
||||
- [ ] Popup-UI für Extension-Einstellungen
|
||||
- [ ] Background-Script für Daten-Synchronisation
|
||||
- [ ] Options-Page für Konfiguration
|
||||
- [ ] Weitere Amazon-Seiten unterstützen (Produktdetails, etc.)
|
||||
Reference in New Issue
Block a user