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
130 lines
5.6 KiB
HTML
130 lines
5.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Amazon Product Bar Extension - Test Page</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
}
|
|
.test-section {
|
|
margin: 20px 0;
|
|
padding: 15px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 5px;
|
|
}
|
|
.success {
|
|
color: green;
|
|
}
|
|
.error {
|
|
color: red;
|
|
}
|
|
.info {
|
|
color: blue;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Amazon Product Bar Extension - Test Page</h1>
|
|
|
|
<div class="test-section">
|
|
<h2>Extension Build Status</h2>
|
|
<p class="success">✅ Extension builds successfully</p>
|
|
<p class="success">✅ No diagnostic errors found</p>
|
|
<p class="success">✅ Storage permission added to manifest.json</p>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>Core Components Status</h2>
|
|
<p class="success">✅ ProductStorageManager - Implemented</p>
|
|
<p class="success">✅ ListIconManager - Implemented</p>
|
|
<p class="success">✅ ItemsPanelManager - Implemented</p>
|
|
<p class="success">✅ UrlValidator - Implemented</p>
|
|
<p class="success">✅ Content Script with React - Implemented</p>
|
|
<p class="success">✅ StaggeredMenu Integration - Implemented</p>
|
|
<p class="success">✅ BlacklistStorageManager - Implemented</p>
|
|
<p class="success">✅ BrandExtractor - Implemented</p>
|
|
<p class="success">✅ BrandLogoRegistry - Implemented</p>
|
|
<p class="success">✅ BrandIconManager - Implemented</p>
|
|
<p class="success">✅ BlacklistPanelManager - Implemented</p>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>Installation Instructions</h2>
|
|
<ol>
|
|
<li>Open Chrome and navigate to <code>chrome://extensions/</code></li>
|
|
<li>Enable "Developer mode" in the top right corner</li>
|
|
<li>Click "Load unpacked" button</li>
|
|
<li>Select the root directory of this extension project</li>
|
|
<li>The extension should appear in your extensions list</li>
|
|
<li>Navigate to any Amazon search results page (e.g., amazon.de/s?k=laptop)</li>
|
|
<li>You should see:
|
|
<ul>
|
|
<li>Product bars below product images</li>
|
|
<li>A menu button in the top right corner</li>
|
|
<li>Items panel accessible via the menu</li>
|
|
</ul>
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>Manual Testing Checklist</h2>
|
|
<p>After loading the extension, test these features:</p>
|
|
<h3>Items Feature</h3>
|
|
<ul>
|
|
<li>☐ Product bars appear below product images on Amazon search pages</li>
|
|
<li>☐ Menu button appears and opens StaggeredMenu</li>
|
|
<li>☐ "Items" menu item opens the Items Panel</li>
|
|
<li>☐ Can enter Amazon product URLs in the Items Panel</li>
|
|
<li>☐ URL validation works (rejects invalid URLs)</li>
|
|
<li>☐ Products can be saved and appear in the list</li>
|
|
<li>☐ Saved products show list icons in product bars</li>
|
|
<li>☐ Products can be deleted from the Items Panel</li>
|
|
<li>☐ Icons disappear when products are deleted</li>
|
|
<li>☐ Extension works on both amazon.de and amazon.com</li>
|
|
</ul>
|
|
<h3>Blacklist Feature (End-to-End Test)</h3>
|
|
<ul>
|
|
<li>☐ "Blacklist" menu item opens the Blacklist Panel</li>
|
|
<li>☐ Can enter brand names in the input field</li>
|
|
<li>☐ Brand is added when clicking "Hinzufügen" or pressing Enter</li>
|
|
<li>☐ Success message appears after adding a brand</li>
|
|
<li>☐ Brand appears in the list with logo (or blocked icon)</li>
|
|
<li>☐ Duplicate brands are rejected with error message</li>
|
|
<li>☐ Brand icons appear on matching products in Product_Bars</li>
|
|
<li>☐ Delete button removes brand from list</li>
|
|
<li>☐ Brand icons disappear from Product_Bars when brand is deleted</li>
|
|
<li>☐ Known brands (Nike, Adidas, Puma, Apple, Samsung) show specific logos</li>
|
|
<li>☐ Unknown brands show generic blocked icon</li>
|
|
<li>☐ Case-insensitive matching works (Nike = nike = NIKE)</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>Test URLs</h2>
|
|
<p>Use these URLs to test the extension:</p>
|
|
<ul>
|
|
<li><a href="https://www.amazon.de/s?k=laptop" target="_blank">Amazon.de - Laptop Search</a></li>
|
|
<li><a href="https://www.amazon.com/s?k=books" target="_blank">Amazon.com - Books Search</a></li>
|
|
<li><a href="https://www.amazon.de/dp/B08N5WRWNW" target="_blank">Sample Product Page (Amazon.de)</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>Troubleshooting</h2>
|
|
<p>If the extension doesn't work:</p>
|
|
<ul>
|
|
<li>Check the browser console for error messages (F12 → Console)</li>
|
|
<li>Ensure you're on an Amazon search results page</li>
|
|
<li>Try refreshing the page after loading the extension</li>
|
|
<li>Check that the extension is enabled in chrome://extensions/</li>
|
|
<li>Verify that the dist/ folder contains content.js and style.css</li>
|
|
</ul>
|
|
</div>
|
|
</body>
|
|
</html> |