Manual Testing - Side Panel UI

[prosdev]

Task #10 from specs/tasks.md

Comprehensive manual testing of all features, focusing on Side Panel UI.

Estimate

2 hours

Dependencies

• Implement Background Service Worker #4, Build Side Panel UI #5

Test Cases

Side Panel UI

• Side panel opens when extension icon is clicked
• Side panel stays open while browsing
• Side panel updates context as user navigates between tabs
• Side panel can be collapsed/expanded (Chrome built-in)
• Side panel can be resized (Chrome built-in)

Rule Management

• Add first rule (empty state)
• Add multiple rules
• Edit existing rule (inline editing)
• Delete rule (with confirmation dialog)
• Toggle rule on/off
• Toggle extension on/off (global toggle)
• Show/hide token
• Copy token to clipboard

Context-Aware Features

• Current Page Context section shows correct URL/hostname
• Active Rules section shows only matching rules for current page
• Rules update when navigating to different domains
• Quick "Add rule for [domain]" button works
• Visual indicator (green/gray dot) shows rule status

Header Injection

• Test header injection (DevTools Network tab)
• Test pattern matching (various URLs)
• Verify Authorization header format: Bearer {token}
• Test with multiple matching rules
• Test with disabled rules (should not inject)

Storage & Persistence

• Rules persist across extension reloads
• Rules persist across browser restarts
• Test storage sync (if multiple Chrome instances available)
• Test 300 rule limit behavior

Error States

• Invalid pattern validation
• Empty token validation
• Duplicate pattern warning
• Storage full error handling

Accessibility

• Keyboard navigation works
• Screen reader compatibility (ARIA labels)
• Focus management

See full details in specs/tasks.md - Task #10