# Implementation Plan: Amazon Product Bar Extension

## Overview

Erweiterte Implementierung der Browser-Extension mit Produktspeicher-Funktionalität, Menu-System und visuellen Indikatoren für gespeicherte Produkte.

## Tasks

- [x] 1. Extension-Grundstruktur erstellen
  - Erstelle `manifest.json` mit Manifest V3 und Storage-Berechtigung
  - Erstelle `styles.css` mit Product Bar und Menu Styling
  - Konfiguriere Content Script für amazon.de und amazon.com
  - _Requirements: 1.1, 1.2, 4.1, 4.2, 4.3_

- [x] 2. Content Script mit Produktkarten-Erkennung implementieren
  - [x] 2.1 Implementiere URL-Pattern-Matching für Suchergebnisseiten
    - Funktion `isSearchResultsPage(url)` erstellen
    - Funktion `extractProductId(url)` für ASIN-Extraktion hinzufügen
    - _Requirements: 1.3_
  - [x] 2.2 Implementiere erweiterten Produktkarten-Detektor
    - Funktion `findAllProductCards(container)` erstellen
    - Funktion `findImageContainer(productCard)` erstellen
    - Funktion `extractProductUrl(productCard)` für URL-Extraktion hinzufügen
    - _Requirements: 2.1, 2.3_
  - [ ]* 2.3 Property Test: URL-Erkennung und Produkt-Extraktion
    - **Property 1: Search Page Detection Consistency**
    - **Property 4: URL Validation Consistency**
    - **Validates: Requirements 1.3, 5.4**

- [-] 3. Bar-Injection mit Icon-Support implementieren
  - [x] 3.1 Implementiere erweiterten Bar-Injector
    - Funktion `injectBar(imageContainer, productId)` erweitern
    - Funktion `hasBar(productCard)` für Duplikat-Check
    - Funktion `addListIcon(productBar)` und `removeListIcon(productBar)` hinzufügen
    - _Requirements: 3.1, 3.2, 3.3, 3.5, 7.1_
  - [ ]* 3.2 Property Test: Bar-Injection und Icon-Management
    - **Property 3: Bar Injection Idempotence**
    - **Property 12: Saved Product Icon Display**
    - **Validates: Requirements 3.1, 3.5, 7.1**

- [x] 4. Product Storage Manager implementieren
  - [x] 4.1 Implementiere Local Storage Interface
    - Klasse `ProductStorageManager` mit CRUD-Operationen erstellen
    - Funktionen `saveProduct()`, `getProducts()`, `deleteProduct()`, `isProductSaved()` implementieren
    - _Requirements: 5.2, 6.3, 6.5_
  - [ ]* 4.2 Property Tests für Storage-Operationen
    - **Property 5: Valid Product Saving**
    - **Property 11: Product Deletion Completeness**
    - **Validates: Requirements 5.2, 6.5**

- [x] 5. Items Panel Content implementieren
  - [x] 5.1 Implementiere Items Panel UI-Komponenten
    - Klasse `ItemsPanelManager` mit `createItemsContent()`, `showItemsPanel()`, `hideItemsPanel()` erstellen
    - HTML-Struktur für Input-Feld und Produktliste im Items-Bereich generieren
    - Event-Handler für URL-Eingabe und Speichern-Button implementieren
    - Integration mit bestehendem StaggeredMenu über handleItemClick
    - _Requirements: 5.1, 5.2, 5.6_
  - [x] 5.2 Implementiere URL-Validierung und Fehlerbehandlung
    - Amazon-URL-Validierungslogik implementieren
    - Fehlerbehandlung für ungültige URLs und Storage-Probleme
    - _Requirements: 5.4, 5.5_
  - [ ]* 5.3 Property Tests für Items Panel-Funktionalität
    - **Property 6: Invalid URL Rejection**
    - **Property 7: UI State Consistency After Save**
    - **Validates: Requirements 5.4, 5.6**

- [x] 6. Produktlisten-Rendering im Items Panel implementieren
  - [x] 6.1 Implementiere Produktlisten-UI für Items Panel
    - Funktion `renderProductList(products)` für Items Panel implementieren
    - HTML-Generierung für gespeicherte Produkte mit Titel, Bild, URL
    - Delete-Button für jedes Produkt hinzufügen
    - _Requirements: 6.1, 6.2, 6.4_
  - [ ]* 6.2 Property Tests für Produktlisten-Rendering
    - **Property 8: Product List Rendering Completeness**
    - **Property 9: Items Panel Loading Consistency**
    - **Property 10: Delete Button Presence**
    - **Validates: Requirements 6.1, 6.2, 6.3, 6.4**

- [-] 7. List Icon Manager implementieren
  - [x] 7.1 Implementiere Icon-Management-System
    - Klasse `ListIconManager` mit `updateAllIcons()`, `addIconToProduct()`, `removeIconFromProduct()` erstellen
    - Produkt-Matching-Logik basierend auf URL/ASIN implementieren
    - Real-time Updates für Icon-Anzeige implementieren
    - _Requirements: 7.2, 7.3, 7.4, 7.5_
  - [ ]* 7.2 Property Tests für Icon-Management
    - **Property 13: Product Matching Accuracy**
    - **Property 14: Real-time Icon Addition**
    - **Property 15: Real-time Icon Removal**
    - **Validates: Requirements 7.2, 7.4, 7.5**

- [x] 8. MutationObserver für dynamische Inhalte
  - Erweitere DOM-Observer für neue Produktkarten und Menu-Integration
  - Verarbeite neu geladene Produktkarten mit Icon-Updates automatisch
  - _Requirements: 2.2, 7.3_

- [-] 9. Integration und Event-System
  - [x] 9.1 Verbinde alle Komponenten im Content Script
    - Event-System für Kommunikation zwischen Items Panel und Icon Manager
    - Integration von Storage-Events mit UI-Updates
    - Erweitere bestehende handleItemClick-Funktion für Items-Bereich
    - _Requirements: 7.4, 7.5_
  - [ ]* 9.2 Integration Tests
    - End-to-End-Workflow-Tests für Speichern → Anzeigen → Löschen
    - Real-time Update-Tests zwischen Items Panel und Product Bars
    - _Requirements: 5.3, 6.5, 7.4, 7.5_

- [x] 10. Finaler Checkpoint und Testing
  - Alle Tests ausführen und sicherstellen, dass sie bestehen
  - Extension manuell in Chrome testen
  - Benutzer fragen, falls Probleme auftreten

## Notes

- Tasks mit `*` sind optional (Property Tests) für schnellere MVP-Entwicklung
- Extension kann nach Task 10 in Chrome geladen werden via `chrome://extensions` → Developer Mode → Load unpacked
- Neue Funktionen erfordern Storage-Berechtigung in manifest.json
- Items Panel wird über das bestehende StaggeredMenu aktiviert (Klick auf "Items")
- Integration erfolgt über die bestehende handleItemClick-Funktion