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
100 lines
5.5 KiB
Markdown
100 lines
5.5 KiB
Markdown
# Requirements Document
|
|
|
|
## Introduction
|
|
|
|
Eine Browser-Extension für Amazon, die bei Produktsuchergebnissen eine neue visuelle Leiste direkt unter jedem Produktbild einfügt. Die Extension ermöglicht es Nutzern, Amazon-Produktlinks über ein Menü zu speichern und zeigt gespeicherte Produkte mit einem Listen-Icon in der Produktleiste an.
|
|
|
|
## Glossary
|
|
|
|
- **Extension**: Browser-Erweiterung (Chrome/Firefox), die Amazon-Seiten modifiziert
|
|
- **Product_Card**: Ein einzelnes Produktelement in den Amazon-Suchergebnissen
|
|
- **Product_Bar**: Die neue Leiste, die unter dem Produktbild eingefügt wird
|
|
- **Search_Results_Page**: Die Amazon-Seite mit Suchergebnissen
|
|
- **Menu**: Das bestehende StaggeredMenu mit Seitenleiste und schwarzem Content-Panel
|
|
- **Items_Panel**: Der schwarze Content-Bereich, der beim Klick auf "Items" angezeigt wird
|
|
- **Saved_Product**: Ein in der Extension gespeicherter Amazon-Produktlink
|
|
- **List_Icon**: Visueller Indikator in der Product_Bar für gespeicherte Produkte
|
|
- **Local_Storage**: Browser-lokaler Speicher für gespeicherte Produktdaten
|
|
|
|
## Requirements
|
|
|
|
### Requirement 1: Extension Installation und Aktivierung
|
|
|
|
**User Story:** Als Nutzer möchte ich die Extension installieren können, damit sie auf Amazon-Seiten aktiv wird.
|
|
|
|
#### Acceptance Criteria
|
|
|
|
1. WHEN the Extension is installed, THE Extension SHALL activate automatically on Amazon domains
|
|
2. THE Extension SHALL support amazon.de and amazon.com domains
|
|
3. WHEN the user navigates to an Amazon search results page, THE Extension SHALL detect the page type
|
|
|
|
### Requirement 2: Produktkarten-Erkennung
|
|
|
|
**User Story:** Als Nutzer möchte ich, dass die Extension alle Produktkarten auf der Suchergebnisseite erkennt, damit jede eine Leiste erhält.
|
|
|
|
#### Acceptance Criteria
|
|
|
|
1. WHEN a search results page loads, THE Extension SHALL identify all Product_Card elements on the page
|
|
2. WHEN new Product_Cards are dynamically loaded (infinite scroll), THE Extension SHALL detect and process them
|
|
3. THE Extension SHALL correctly identify the product image container within each Product_Card
|
|
|
|
### Requirement 3: Product Bar Einfügung
|
|
|
|
**User Story:** Als Nutzer möchte ich eine neue Leiste unter jedem Produktbild sehen, damit ich später zusätzliche Informationen dort erhalten kann.
|
|
|
|
#### Acceptance Criteria
|
|
|
|
1. WHEN a Product_Card is identified, THE Extension SHALL insert a Product_Bar element directly below the product image
|
|
2. THE Product_Bar SHALL be visually distinct with a background color and defined height
|
|
3. THE Product_Bar SHALL span the full width of the product image
|
|
4. THE Product_Bar SHALL not interfere with existing Amazon functionality (clicking product, etc.)
|
|
5. IF a Product_Bar already exists for a Product_Card, THEN THE Extension SHALL not insert a duplicate
|
|
|
|
### Requirement 4: Visuelle Gestaltung
|
|
|
|
**User Story:** Als Nutzer möchte ich, dass die Leiste gut sichtbar aber nicht störend ist, damit sie das Einkaufserlebnis nicht beeinträchtigt.
|
|
|
|
#### Acceptance Criteria
|
|
|
|
1. THE Product_Bar SHALL have a minimum height of 20 pixels
|
|
2. THE Product_Bar SHALL have a subtle background color that contrasts with the page
|
|
3. THE Product_Bar SHALL have rounded corners consistent with Amazon's design language
|
|
4. WHILE the page is loading, THE Extension SHALL not cause visible layout shifts
|
|
|
|
### Requirement 5: Items-Bereich für Produktlinks
|
|
|
|
**User Story:** Als Nutzer möchte ich im Items-Bereich des bestehenden Menüs Amazon-Produktlinks speichern können, damit ich meine interessanten Produkte verwalten kann.
|
|
|
|
#### Acceptance Criteria
|
|
|
|
1. WHEN the user clicks on "Items" in the menu, THE Extension SHALL display a content panel for product management
|
|
2. WHEN the Items content panel is open, THE Extension SHALL display an input field for Amazon product URLs
|
|
3. WHEN a valid Amazon product URL is entered, THE Extension SHALL save the product link to local storage
|
|
4. WHEN an invalid URL is entered, THE Extension SHALL display an error message and prevent saving
|
|
5. THE Extension SHALL validate that entered URLs are valid Amazon product links
|
|
6. WHEN a product link is saved, THE Extension SHALL clear the input field and show confirmation
|
|
|
|
### Requirement 6: Gespeicherte Produktliste im Items-Bereich
|
|
|
|
**User Story:** Als Nutzer möchte ich eine Liste aller gespeicherten Produktlinks im Items-Bereich sehen, damit ich meine gespeicherten Produkte überblicken kann.
|
|
|
|
#### Acceptance Criteria
|
|
|
|
1. WHEN the Items content panel is open, THE Extension SHALL display saved products in a list below the input field
|
|
2. THE Extension SHALL show product title, image, and URL for each saved item
|
|
3. WHEN the Items panel is opened, THE Extension SHALL load and display all previously saved products
|
|
4. THE Extension SHALL provide a delete button for each saved product
|
|
5. WHEN a product is deleted, THE Extension SHALL remove it from storage and update the display
|
|
|
|
### Requirement 7: Produktmarkierung in der Leiste
|
|
|
|
**User Story:** Als Nutzer möchte ich sehen, welche Produkte bereits gespeichert sind, damit ich keine Duplikate erstelle.
|
|
|
|
#### Acceptance Criteria
|
|
|
|
1. WHEN a product on the search results page is already saved, THE Product_Bar SHALL display a list icon
|
|
2. THE Extension SHALL compare current page products with saved products by URL or ASIN
|
|
3. THE Extension SHALL add the list icon immediately when the product bar is created
|
|
4. WHEN a product is saved via the menu, THE Extension SHALL immediately update all matching product bars
|
|
5. WHEN a product is deleted from the saved list, THE Extension SHALL remove the list icon from matching product bars
|