41 lines
2.2 KiB
Markdown
41 lines
2.2 KiB
Markdown
|
# CLAUDE.md
|
||
|
|
|
||
|
|
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
||
|
|
|
||
|
|
## Project Overview
|
||
|
|
|
||
|
|
This is a browser extension (v1.1) that enhances Outlook Web by displaying the total number of items next to the Inbox label. The extension uses a content script to monitor DOM changes and extract inbox count information from the page title.
|
||
|
|
|
||
|
|
### Version History
|
||
|
|
- **v1.1**: Fixed browser hanging issues with throttling, improved MutationObserver, enhanced DOM selectors, reduced polling frequency
|
||
|
|
- **v1.0**: Initial release
|
||
|
|
|
||
|
|
## Architecture
|
||
|
|
|
||
|
|
- **manifest.json**: Chrome extension manifest (v3) defining permissions, content scripts, and metadata
|
||
|
|
- **content.js**: Main content script that runs on Outlook Web pages, implementing:
|
||
|
|
- DOM element detection for inbox labels
|
||
|
|
- Item count extraction from page titles using regex
|
||
|
|
- Dynamic count display with styling
|
||
|
|
- MutationObserver for real-time DOM change monitoring
|
||
|
|
- Periodic refresh mechanism (every 5 seconds after initial 10-second startup)
|
||
|
|
|
||
|
|
## Development Workflow
|
||
|
|
|
||
|
|
### Testing the Extension
|
||
|
|
1. Load as unpacked extension in Chrome/Edge developer mode
|
||
|
|
2. Navigate to https://outlook.office.com or https://outlook.office365.com
|
||
|
|
3. Check browser console for debug logs starting with "Outlook Inbox Count Extension"
|
||
|
|
|
||
|
|
### Packaging
|
||
|
|
The .zip file contains the packaged extension ready for distribution.
|
||
|
|
|
||
|
|
## Key Implementation Details
|
||
|
|
|
||
|
|
- **Performance optimizations (v1.1)**: Throttling mechanism prevents excessive function calls, selective MutationObserver reduces CPU usage
|
||
|
|
- **Enhanced DOM detection**: Multiple fallback selectors and regex patterns for different Outlook Web versions
|
||
|
|
- **CSS selectors**: Primary `div[title^="Inbox -"][data-folder-name="inbox"]` with fallbacks for `button` elements and various title formats
|
||
|
|
- **Count extraction**: Multiple regex patterns including `/Inbox - (\d+) items/`, `/Inbox \((\d+)\)/`, `/(\d+) items/`
|
||
|
|
- **Duplicate prevention**: Uses `.added-count` class marking to avoid multiple count displays
|
||
|
|
- **Dynamic content handling**: Optimized interval polling (10s) and intelligent mutation observation
|
||
|
|
- **Graceful fallback**: Displays "(-)" when count unavailable
|