Kenso Grimm
216a972fef
- 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
141 lines
3.6 KiB
Markdown
141 lines
3.6 KiB
Markdown
# 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.)
|