chore: initialize project repository with core extension files
- 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
This commit is contained in:
376
test-updated-extension.html
Normal file
376
test-updated-extension.html
Normal file
@@ -0,0 +1,376 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Updated Enhanced Items Extension Test</title>
|
||||
|
||||
<!-- Import Enhanced Items Panel CSS -->
|
||||
<link rel="stylesheet" href="src/EnhancedItemsPanel.css">
|
||||
|
||||
<!-- Import Responsive Accessibility CSS -->
|
||||
<link rel="stylesheet" href="src/ResponsiveAccessibility.css">
|
||||
|
||||
<!-- Import Interactivity Enhancements CSS -->
|
||||
<link rel="stylesheet" href="src/InteractivityEnhancements.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
background: #0a0a0a;
|
||||
color: white;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
}
|
||||
|
||||
.test-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
background: #1a1a1a;
|
||||
border-radius: 20px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
.test-header {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.test-header h1 {
|
||||
color: #ff9900;
|
||||
margin: 0 0 10px 0;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.test-header p {
|
||||
color: #a0a0a0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.panel-container {
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
background: #0a0a0a;
|
||||
}
|
||||
|
||||
.status-indicator {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
padding: 10px 20px;
|
||||
background: rgba(40, 167, 69, 0.15);
|
||||
border: 1px solid rgba(40, 167, 69, 0.3);
|
||||
border-radius: 8px;
|
||||
color: #69db7c;
|
||||
font-weight: 600;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
.debug-info {
|
||||
margin-top: 20px;
|
||||
padding: 15px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 10px;
|
||||
font-family: monospace;
|
||||
font-size: 0.9rem;
|
||||
color: #a0a0a0;
|
||||
}
|
||||
|
||||
.debug-info h3 {
|
||||
margin: 0 0 10px 0;
|
||||
color: #ff9900;
|
||||
}
|
||||
|
||||
.responsive-test-controls {
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.responsive-btn {
|
||||
padding: 8px 16px;
|
||||
background: rgba(255, 153, 0, 0.1);
|
||||
border: 1px solid rgba(255, 153, 0, 0.3);
|
||||
border-radius: 6px;
|
||||
color: #ff9900;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.responsive-btn:hover {
|
||||
background: rgba(255, 153, 0, 0.2);
|
||||
border-color: rgba(255, 153, 0, 0.5);
|
||||
}
|
||||
|
||||
.responsive-btn.active {
|
||||
background: rgba(255, 153, 0, 0.3);
|
||||
border-color: #ff9900;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="status-indicator" id="statusIndicator">
|
||||
✅ Extension Test Environment Ready
|
||||
</div>
|
||||
|
||||
<div class="test-container">
|
||||
<div class="test-header">
|
||||
<h1>🚀 Updated Enhanced Items Extension Test</h1>
|
||||
<p>Testing the updated EnhancedItemsPanelManager with full responsive accessibility</p>
|
||||
</div>
|
||||
|
||||
<div class="responsive-test-controls">
|
||||
<button class="responsive-btn active" onclick="setViewport('desktop')">🖥️ Desktop (1200px)</button>
|
||||
<button class="responsive-btn" onclick="setViewport('tablet')">📱 Tablet (768px)</button>
|
||||
<button class="responsive-btn" onclick="setViewport('mobile')">📱 Mobile (480px)</button>
|
||||
<button class="responsive-btn" onclick="toggleHighContrast()">🎨 High Contrast</button>
|
||||
<button class="responsive-btn" onclick="testKeyboardNav()">⌨️ Keyboard Test</button>
|
||||
</div>
|
||||
|
||||
<div class="panel-container" id="panelContainer">
|
||||
<!-- Enhanced Items Panel will be rendered here -->
|
||||
</div>
|
||||
|
||||
<div class="debug-info">
|
||||
<h3>🔍 Debug Information</h3>
|
||||
<div id="debugOutput">Initializing Enhanced Items Panel Manager...</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mock Chrome Extension APIs -->
|
||||
<script>
|
||||
// Mock chrome.storage API
|
||||
window.chrome = {
|
||||
storage: {
|
||||
local: {
|
||||
get: function(keys, callback) {
|
||||
const mockData = {
|
||||
'amazon_ext_enhanced_items': JSON.stringify([
|
||||
{
|
||||
id: 'B08WX56W96',
|
||||
amazonUrl: 'https://www.amazon.de/ROCKBROS-Outdoorsports-Reflektierend-Atmungsaktiv-Einheitsgr%C3%B6%C3%9Fe/dp/B08WX56W96/ref=sr_1_7',
|
||||
originalTitle: 'ROCKBROS Sturmhaube Herbst/Winter Thermo Balaclava für Outdoorsports Radfahren Skifahren Snowboard Reflektierend Winddicht Anti-Staub Atmungsaktiv für Damen Herren 2 PCS',
|
||||
customTitle: 'ROCKBROS Sturmhaube Herbst/Winter Thermo Balaclava für Outdoorsports Radfahren Skifahren Snowboard Reflektierend Winddicht Anti-Staub Atmungsaktiv für Damen Herren 2 PCS',
|
||||
price: '12.00',
|
||||
currency: 'EUR',
|
||||
createdAt: new Date().toISOString(),
|
||||
titleSuggestions: []
|
||||
},
|
||||
{
|
||||
id: 'B08N5WRWNW',
|
||||
amazonUrl: 'https://www.amazon.de/dp/B08N5WRWNW',
|
||||
originalTitle: 'Anker PowerCore 10000 Portable Charger',
|
||||
customTitle: 'Anker PowerCore 10000 - Kompakte Powerbank mit hoher Kapazität',
|
||||
price: '24.99',
|
||||
currency: 'EUR',
|
||||
createdAt: new Date(Date.now() - 86400000).toISOString(),
|
||||
titleSuggestions: [
|
||||
'Anker PowerCore 10000 - Kompakte Powerbank mit hoher Kapazität',
|
||||
'Anker PowerCore 10000 - Tragbares Ladegerät für unterwegs',
|
||||
'Anker PowerCore 10000 - Zuverlässige mobile Stromversorgung'
|
||||
]
|
||||
}
|
||||
]),
|
||||
'amazon_ext_settings': JSON.stringify({
|
||||
mistralApiKey: 'test-api-key',
|
||||
language: 'de'
|
||||
})
|
||||
};
|
||||
|
||||
if (typeof keys === 'string') {
|
||||
callback({ [keys]: mockData[keys] });
|
||||
} else if (Array.isArray(keys)) {
|
||||
const result = {};
|
||||
keys.forEach(key => {
|
||||
result[key] = mockData[key];
|
||||
});
|
||||
callback(result);
|
||||
} else {
|
||||
callback(mockData);
|
||||
}
|
||||
},
|
||||
set: function(data, callback) {
|
||||
console.log('Mock storage.set:', data);
|
||||
if (callback) callback();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Mock global event bus
|
||||
window.amazonExtEventBus = {
|
||||
listeners: {},
|
||||
on: function(event, callback) {
|
||||
if (!this.listeners[event]) {
|
||||
this.listeners[event] = [];
|
||||
}
|
||||
this.listeners[event].push(callback);
|
||||
},
|
||||
off: function(event, callback) {
|
||||
if (this.listeners[event]) {
|
||||
this.listeners[event] = this.listeners[event].filter(cb => cb !== callback);
|
||||
}
|
||||
},
|
||||
emit: function(event, data) {
|
||||
console.log('Event emitted:', event, data);
|
||||
if (this.listeners[event]) {
|
||||
this.listeners[event].forEach(callback => callback(data));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Mock localStorage
|
||||
if (!window.localStorage) {
|
||||
window.localStorage = {
|
||||
getItem: function(key) {
|
||||
return this[key] || null;
|
||||
},
|
||||
setItem: function(key, value) {
|
||||
this[key] = value;
|
||||
},
|
||||
removeItem: function(key) {
|
||||
delete this[key];
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// Debug logging
|
||||
function debugLog(message) {
|
||||
const debugOutput = document.getElementById('debugOutput');
|
||||
const timestamp = new Date().toLocaleTimeString();
|
||||
debugOutput.innerHTML += `<br>[${timestamp}] ${message}`;
|
||||
debugOutput.scrollTop = debugOutput.scrollHeight;
|
||||
}
|
||||
|
||||
// Responsive testing functions
|
||||
function setViewport(size) {
|
||||
const container = document.getElementById('panelContainer');
|
||||
const buttons = document.querySelectorAll('.responsive-btn');
|
||||
|
||||
// Remove active class from all buttons
|
||||
buttons.forEach(btn => btn.classList.remove('active'));
|
||||
|
||||
// Add active class to clicked button
|
||||
event.target.classList.add('active');
|
||||
|
||||
switch(size) {
|
||||
case 'mobile':
|
||||
container.style.width = '480px';
|
||||
container.style.margin = '0 auto';
|
||||
debugLog(`📱 Switched to Mobile view (480px)`);
|
||||
break;
|
||||
case 'tablet':
|
||||
container.style.width = '768px';
|
||||
container.style.margin = '0 auto';
|
||||
debugLog(`📱 Switched to Tablet view (768px)`);
|
||||
break;
|
||||
case 'desktop':
|
||||
default:
|
||||
container.style.width = '100%';
|
||||
container.style.margin = '0';
|
||||
debugLog(`🖥️ Switched to Desktop view (100%)`);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function toggleHighContrast() {
|
||||
document.body.classList.toggle('high-contrast');
|
||||
const isHighContrast = document.body.classList.contains('high-contrast');
|
||||
debugLog(`🎨 High contrast mode: ${isHighContrast ? 'ON' : 'OFF'}`);
|
||||
}
|
||||
|
||||
function testKeyboardNav() {
|
||||
debugLog(`⌨️ Keyboard navigation test: Use Tab to navigate, O/E/Del for item actions`);
|
||||
const firstItem = document.querySelector('.enhanced-item');
|
||||
if (firstItem) {
|
||||
firstItem.focus();
|
||||
debugLog(`🎯 Focused on first item for keyboard testing`);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Load Enhanced Items Panel Manager -->
|
||||
<script type="module">
|
||||
import { EnhancedItemsPanelManager } from './src/EnhancedItemsPanelManager.js';
|
||||
|
||||
async function initializePanel() {
|
||||
try {
|
||||
debugLog('🚀 Initializing Enhanced Items Panel Manager...');
|
||||
|
||||
// Create manager instance
|
||||
const manager = new EnhancedItemsPanelManager();
|
||||
|
||||
debugLog('✅ Manager created successfully');
|
||||
|
||||
// Create the panel content
|
||||
const panelContent = manager.createItemsContent();
|
||||
|
||||
debugLog('✅ Panel content created with responsive accessibility features');
|
||||
|
||||
// Insert into container
|
||||
const container = document.getElementById('panelContainer');
|
||||
container.appendChild(panelContent);
|
||||
|
||||
debugLog('✅ Panel rendered in container');
|
||||
debugLog('🎨 Responsive breakpoints: Mobile ≤480px, Tablet 481-768px, Desktop ≥769px');
|
||||
debugLog('♿ Accessibility features: ARIA labels, keyboard shortcuts, screen reader support');
|
||||
debugLog('⌨️ Keyboard shortcuts: O (Original), E (Edit), Del (Delete)');
|
||||
|
||||
// Test responsive features
|
||||
setTimeout(() => {
|
||||
const items = document.querySelectorAll('.enhanced-item');
|
||||
debugLog(`📊 Loaded ${items.length} enhanced items with full accessibility`);
|
||||
|
||||
if (items.length > 0) {
|
||||
debugLog('🎯 Try clicking on items or using keyboard navigation');
|
||||
debugLog('📱 Use the responsive test buttons to check different screen sizes');
|
||||
}
|
||||
}, 1000);
|
||||
|
||||
} catch (error) {
|
||||
debugLog(`❌ Error initializing panel: ${error.message}`);
|
||||
console.error('Panel initialization error:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize when DOM is ready
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', initializePanel);
|
||||
} else {
|
||||
initializePanel();
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* High contrast mode styles */
|
||||
.high-contrast {
|
||||
filter: contrast(150%) brightness(120%);
|
||||
}
|
||||
|
||||
.high-contrast .test-container {
|
||||
border: 2px solid white;
|
||||
}
|
||||
|
||||
.high-contrast .responsive-btn {
|
||||
border: 2px solid white;
|
||||
background: black;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.high-contrast .responsive-btn:hover,
|
||||
.high-contrast .responsive-btn.active {
|
||||
background: white;
|
||||
color: black;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user