Files

Kenso Grimm 216a972fef 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

2026-01-12 17:46:42 +01:00

2.8 KiB

Raw Blame History

Styling Guidelines for Amazon Extension

Critical: CSS Override Strategy for Amazon Pages

When styling UI elements that will be injected into Amazon pages, CSS files alone are NOT sufficient. Amazon's stylesheets have high specificity and load after extension styles, overriding even !important rules.

The Problem

Amazon's CSS has higher specificity than extension CSS
Amazon's stylesheets load after extension styles
Even !important rules in CSS files can be overridden
CSS variables defined in :root may not work on Amazon pages

The Solution: Inline Styles via JavaScript

For critical visual styles (backgrounds, colors, borders, etc.), apply them directly via JavaScript using element.style:

// ✅ CORRECT - Cannot be overridden by Amazon CSS
Object.assign(element.style, {
  background: '#0a0a0a',
  color: '#ffffff',
  padding: '2rem',
  borderRadius: '24px'
});

// ❌ WRONG - Will be overridden by Amazon CSS
// Relying only on CSS classes
element.className = 'my-styled-element';

CSS Specificity Hierarchy (highest to lowest)

Inline styles via JavaScript (element.style.property) - HIGHEST
Inline styles in HTML (style="...")
!important in CSS
ID selectors
Class selectors
Element selectors

Implementation Pattern

Create helper methods in Manager classes:

_applyInlineStyles(element) {
  Object.assign(element.style, {
    background: 'rgba(255, 255, 255, 0.05)',
    border: '1px solid rgba(255, 255, 255, 0.1)',
    borderRadius: '24px',
    // ... more styles
  });
}

When to Use Inline Styles

Container backgrounds and colors
Text colors and fonts
Borders and border-radius
Padding and margins
Any visual style that must be guaranteed

When CSS Files Are Still Useful

Animations and keyframes
Pseudo-elements (::before, ::after)
Media queries for responsive design
Hover states (combine with JS event listeners)
Complex selectors

Example: Hover Effects with JavaScript

element.addEventListener('mouseenter', () => {
  element.style.transform = 'translateY(-6px)';
  element.style.boxShadow = '0 12px 48px rgba(0, 0, 0, 0.45)';
});

element.addEventListener('mouseleave', () => {
  element.style.transform = 'none';
  element.style.boxShadow = 'none';
});

Design System Colors (for inline styles)

const colors = {
  bgDark: '#0a0a0a',
  bgCard: 'rgba(255, 255, 255, 0.05)',
  bgCardHover: 'rgba(255, 255, 255, 0.08)',
  textPrimary: '#ffffff',
  textSecondary: '#e0e0e0',
  textMuted: '#a0a0a0',
  primary: '#ff9900',
  primaryGradient: 'linear-gradient(135deg, #ff9900 0%, #ff7700 100%)',
  border: 'rgba(255, 255, 255, 0.1)',
  borderHover: 'rgba(255, 255, 255, 0.2)',
  success: '#28a745',
  error: '#dc3545',
  link: '#74c0fc'
};

2.8 KiB Raw Blame History