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
300 lines
12 KiB
HTML
300 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Product Extraction Debug</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
background-color: #f5f5f5;
|
|
}
|
|
.test-section {
|
|
background: white;
|
|
padding: 20px;
|
|
margin: 20px 0;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
.result {
|
|
padding: 10px;
|
|
margin: 10px 0;
|
|
border-radius: 4px;
|
|
font-family: monospace;
|
|
white-space: pre-wrap;
|
|
}
|
|
.success {
|
|
background-color: #d4edda;
|
|
color: #155724;
|
|
border: 1px solid #c3e6cb;
|
|
}
|
|
.error {
|
|
background-color: #f8d7da;
|
|
color: #721c24;
|
|
border: 1px solid #f5c6cb;
|
|
}
|
|
.info {
|
|
background-color: #d1ecf1;
|
|
color: #0c5460;
|
|
border: 1px solid #bee5eb;
|
|
}
|
|
button {
|
|
background-color: #007acc;
|
|
color: white;
|
|
border: none;
|
|
padding: 10px 20px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
margin: 5px;
|
|
}
|
|
button:hover {
|
|
background-color: #005a9e;
|
|
}
|
|
input[type="url"] {
|
|
width: 100%;
|
|
padding: 10px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
margin: 10px 0;
|
|
}
|
|
.debug-info {
|
|
background: #f8f9fa;
|
|
padding: 15px;
|
|
border-left: 4px solid #007acc;
|
|
margin: 10px 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Product Extraction Debug Tool</h1>
|
|
<p>Dieses Tool hilft beim Debuggen von Problemen mit der Produktdatenextraktion.</p>
|
|
|
|
<div class="debug-info">
|
|
<h3>Wichtiger Hinweis:</h3>
|
|
<p>Der ProductExtractor ist für Browser-Extensions entwickelt und kann aufgrund von CORS-Richtlinien nicht direkt externe Amazon-Seiten laden. In einer echten Extension würde er auf der bereits geladenen Amazon-Seite laufen.</p>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>URL-Validierung Test</h2>
|
|
<input type="url" id="test-url" placeholder="Amazon URL eingeben..."
|
|
value="https://www.amazon.de/ROCKBROS-Outdoorsports-Reflektierend-Atmungsaktiv-Einheitsgr%C3%B6%C3%9Fe/dp/B08WX56W96/ref=sr_1_7?__mk_de_DE=%C3%85M%C3%85%C5%BD%C3%95%C3%91&dib=eyJ2IjoiMSJ9.-T0n-H-GYCdSn6tkhSVSM7jc5L9XNXsoonu4xjZ2V7sAFYdNJfrbK7b5XTKN5JZ8tm9hhO5rmd65ytlmLhbkjw-o-PIe2GbUmE4D-08dZWWjkOriS4nUSIqIhYhkqnifLUhr2LZ6ICyHAtY-w6b0A3sLSshcjrX6eCcPVE6y2FIBE7kVFq39QDU0DgDNJbALhcPtg5QCg4rDb1g6Wrlyu6acHCOfW5LqMFzanpLU15G0x9SQ0e1BfByeAH-Tgf4maUYfMB-DHZjSlldp1VDs6Wj0IMT9hUFzSdIMEodJRjA.Y7NPhfxUfYTsNDVIwrqDJbmdym11VoeRQ9GbY6as8mg&dib_tag=se&keywords=rockbros&qid=1768133517&sr=8-7">
|
|
<button onclick="testUrlValidation()">URL validieren</button>
|
|
<div id="url-validation-result"></div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>Produktdatenextraktion Test</h2>
|
|
<button onclick="testProductExtraction()">Produktdaten extrahieren (wird fehlschlagen)</button>
|
|
<div id="extraction-result"></div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>Enhanced Item Workflow Test</h2>
|
|
<button onclick="testEnhancedWorkflow()">Enhanced Item Workflow testen</button>
|
|
<div id="workflow-result"></div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>Manuelle Eingabe Simulation</h2>
|
|
<p>Da die automatische Extraktion fehlschlägt, simulieren wir die manuelle Eingabe:</p>
|
|
<button onclick="simulateManualInput()">Manuelle Eingabe simulieren</button>
|
|
<div id="manual-input-result"></div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>Lösungsvorschläge</h2>
|
|
<div class="debug-info">
|
|
<h4>Mögliche Lösungen für das Problem:</h4>
|
|
<ol>
|
|
<li><strong>Browser-Extension-Kontext:</strong> Der ProductExtractor sollte nur in einer echten Browser-Extension verwendet werden, wo er Zugriff auf die bereits geladene Amazon-Seite hat.</li>
|
|
<li><strong>Content Script:</strong> In einer Extension würde ein Content Script auf der Amazon-Seite laufen und die Daten direkt aus dem DOM extrahieren.</li>
|
|
<li><strong>Fallback auf manuelle Eingabe:</strong> Wenn die automatische Extraktion fehlschlägt, sollte der Benutzer die Daten manuell eingeben können.</li>
|
|
<li><strong>Proxy-Server:</strong> Ein Proxy-Server könnte die Amazon-Seiten laden und die Daten extrahieren (nicht empfohlen wegen Amazon's ToS).</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module">
|
|
import { UrlValidator } from './src/UrlValidator.js';
|
|
import { ProductExtractor } from './src/ProductExtractor.js';
|
|
import { EnhancedAddItemWorkflow } from './src/EnhancedAddItemWorkflow.js';
|
|
import { EnhancedStorageManager } from './src/EnhancedStorageManager.js';
|
|
|
|
window.testUrlValidation = function() {
|
|
const url = document.getElementById('test-url').value;
|
|
const resultDiv = document.getElementById('url-validation-result');
|
|
|
|
try {
|
|
const validation = UrlValidator.validateAmazonUrl(url);
|
|
|
|
if (validation.isValid) {
|
|
resultDiv.innerHTML = `
|
|
<div class="result success">
|
|
✓ URL ist gültig
|
|
ASIN: ${validation.asin}
|
|
Bereinigte URL: ${validation.cleanUrl}
|
|
</div>
|
|
`;
|
|
} else {
|
|
resultDiv.innerHTML = `
|
|
<div class="result error">
|
|
✗ URL-Validierung fehlgeschlagen: ${validation.error}
|
|
</div>
|
|
`;
|
|
}
|
|
} catch (error) {
|
|
resultDiv.innerHTML = `
|
|
<div class="result error">
|
|
✗ Fehler bei URL-Validierung: ${error.message}
|
|
</div>
|
|
`;
|
|
}
|
|
};
|
|
|
|
window.testProductExtraction = async function() {
|
|
const url = document.getElementById('test-url').value;
|
|
const resultDiv = document.getElementById('extraction-result');
|
|
|
|
resultDiv.innerHTML = '<div class="result info">Teste Produktdatenextraktion...</div>';
|
|
|
|
try {
|
|
const extractor = new ProductExtractor();
|
|
const result = await extractor.extractProductData(url);
|
|
|
|
if (result.success) {
|
|
resultDiv.innerHTML = `
|
|
<div class="result success">
|
|
✓ Extraktion erfolgreich
|
|
Titel: ${result.data.title}
|
|
Preis: ${result.data.price} ${result.data.currency}
|
|
URL: ${result.data.url}
|
|
</div>
|
|
`;
|
|
} else {
|
|
resultDiv.innerHTML = `
|
|
<div class="result error">
|
|
✗ Extraktion fehlgeschlagen: ${result.error}
|
|
Manuelle Eingabe erforderlich: ${result.requiresManualInput}
|
|
Fallback-Daten: ${JSON.stringify(result.data, null, 2)}
|
|
</div>
|
|
`;
|
|
}
|
|
} catch (error) {
|
|
resultDiv.innerHTML = `
|
|
<div class="result error">
|
|
✗ Fehler bei Produktextraktion: ${error.message}
|
|
</div>
|
|
`;
|
|
}
|
|
};
|
|
|
|
window.testEnhancedWorkflow = async function() {
|
|
const url = document.getElementById('test-url').value;
|
|
const resultDiv = document.getElementById('workflow-result');
|
|
|
|
resultDiv.innerHTML = '<div class="result info">Teste Enhanced Item Workflow...</div>';
|
|
|
|
try {
|
|
const workflow = new EnhancedAddItemWorkflow();
|
|
const result = await workflow.startWorkflow(url, {
|
|
allowManualFallback: true,
|
|
settings: {
|
|
// Kein API-Key für Test
|
|
autoExtractEnabled: true
|
|
}
|
|
});
|
|
|
|
if (result.success) {
|
|
resultDiv.innerHTML = `
|
|
<div class="result success">
|
|
✓ Workflow erfolgreich
|
|
Enhanced Item: ${JSON.stringify(result.enhancedItem, null, 2)}
|
|
Dauer: ${result.duration}ms
|
|
Schritte: ${result.stepsCompleted}
|
|
</div>
|
|
`;
|
|
} else {
|
|
resultDiv.innerHTML = `
|
|
<div class="result error">
|
|
✗ Workflow fehlgeschlagen: ${result.error}
|
|
Schritt: ${result.step}
|
|
Kann wiederholt werden: ${result.canRetry}
|
|
Manuelle Eingabe möglich: ${result.canUseManualInput}
|
|
Teilweise Daten: ${JSON.stringify(result.partialData, null, 2)}
|
|
</div>
|
|
`;
|
|
}
|
|
} catch (error) {
|
|
resultDiv.innerHTML = `
|
|
<div class="result error">
|
|
✗ Fehler im Workflow: ${error.message}
|
|
</div>
|
|
`;
|
|
}
|
|
};
|
|
|
|
window.simulateManualInput = async function() {
|
|
const resultDiv = document.getElementById('manual-input-result');
|
|
|
|
resultDiv.innerHTML = '<div class="result info">Simuliere manuelle Eingabe...</div>';
|
|
|
|
try {
|
|
// Simuliere manuelle Eingabe der Produktdaten
|
|
const manualData = {
|
|
url: document.getElementById('test-url').value,
|
|
title: 'ROCKBROS Fahrradhandschuhe Outdoorsports Reflektierend Atmungsaktiv',
|
|
price: '19.99',
|
|
currency: 'EUR'
|
|
};
|
|
|
|
// Erstelle Enhanced Item
|
|
const storageManager = new EnhancedStorageManager();
|
|
const validation = UrlValidator.validateAmazonUrl(manualData.url);
|
|
|
|
if (!validation.isValid) {
|
|
throw new Error('URL-Validierung fehlgeschlagen: ' + validation.error);
|
|
}
|
|
|
|
const enhancedItem = {
|
|
id: validation.asin,
|
|
amazonUrl: validation.cleanUrl,
|
|
originalTitle: manualData.title,
|
|
customTitle: manualData.title,
|
|
price: manualData.price,
|
|
currency: manualData.currency,
|
|
titleSuggestions: [],
|
|
createdAt: new Date().toISOString(),
|
|
updatedAt: new Date().toISOString()
|
|
};
|
|
|
|
await storageManager.saveEnhancedItem(enhancedItem);
|
|
|
|
resultDiv.innerHTML = `
|
|
<div class="result success">
|
|
✓ Enhanced Item erfolgreich erstellt (manuell)
|
|
ID: ${enhancedItem.id}
|
|
Titel: ${enhancedItem.customTitle}
|
|
Preis: ${enhancedItem.price} ${enhancedItem.currency}
|
|
URL: ${enhancedItem.amazonUrl}
|
|
</div>
|
|
`;
|
|
} catch (error) {
|
|
resultDiv.innerHTML = `
|
|
<div class="result error">
|
|
✗ Fehler bei manueller Eingabe: ${error.message}
|
|
</div>
|
|
`;
|
|
}
|
|
};
|
|
|
|
// Auto-test URL validation on load
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
console.log('Product Extraction Debug Tool loaded');
|
|
testUrlValidation();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |