# ZooFocus Floating Chrome Extension

## Installation Steps

1. Open Chrome browser
2. Navigate to `chrome://extensions/`
3. Enable "Developer mode" (toggle switch in top-right)
4. Click "Load unpacked" button
5. Select this folder: `C:\Users\ben\CascadeProjects\2048\Zoofocus\chrome-extension\`
6. Extension should appear in the list
7. Open any webpage or the included `test.html` file
8. You should see a floating timer widget in the top-right corner

## Troubleshooting

### Extension won't load
- Check that all files are present: manifest.json, content.js, background.js, overlay.css
- Check that assets folder exists with animations and icons
- Look for errors in chrome://extensions/ (click "Errors" button if present)

### Extension loads but nothing appears
1. Open DevTools (F12)
2. Go to Console tab
3. Look for errors (red text)
4. Check if you see "ZooFocus" messages
5. Try refreshing the page (Ctrl+R)

### Common Issues

**Issue: "Manifest file is missing or unreadable"**
- Solution: Make sure manifest.json is valid JSON

**Issue: "Could not load icon"**
- Solution: Verify assets/icons/ folder has icon16.png, icon48.png, icon128.png

**Issue: Content script not injecting**
- Solution: Check browser console for errors
- Try reloading the extension in chrome://extensions/

**Issue: Widget appears but animations don't load**
- Solution: Check that assets/animations/ has all 5 GIF files
- Check browser console for 404 errors

## Testing

Open `test.html` in Chrome to verify the extension is working.

## Features

- ✅ Floating timer on all webpages
- ✅ Draggable widget
- ✅ Minimize/expand functionality
- ✅ 25-minute Pomodoro sessions
- ✅ 5-minute breaks
- ✅ Milestone celebrations (1, 5, 10, 15, 20 min)
- ✅ Level progression system
- ✅ Persistent state across page reloads
- ✅ Toast notifications
- ✅ Browser notifications

## File Structure

```
chrome-extension/
├── manifest.json          (Extension config)
├── content.js            (Main timer logic, injected on all pages)
├── background.js         (Service worker for notifications)
├── overlay.css           (Widget styling)
├── test.html            (Test page)
├── README.md            (This file)
└── assets/
    ├── animations/
    │   ├── bear_idle.gif
    │   ├── bear_working.gif
    │   ├── bear_celebrating.gif
    │   ├── bear_levelup.gif
    │   └── bear_sad.gif
    └── icons/
        ├── icon16.png
        ├── icon48.png
        └── icon128.png
```
