# Quick Start Guide

## Installation Steps

1. **Open Chrome Extensions Page**
   ```
   chrome://extensions/
   ```

2. **Enable Developer Mode**
   - Click the toggle switch in the top right corner

3. **Load the Extension**
   - Click "Load unpacked"
   - Navigate to this folder and select it
   - The extension should appear in your list

4. **Verify Installation**
   - You should see the "Page Editor" extension in your list with status "Enabled"
   - An icon should appear in your Chrome toolbar (top right)

## First Test

1. Go to any website (e.g., https://example.com)
2. You'll notice text elements have a yellow highlight (editable)
3. **Click any text** to edit it
4. **Click outside** the text or press Enter to save
5. **Reload the page** (Ctrl+R or Cmd+R)
6. Your changes should still be there!

## Using the Popup

1. Click the **Page Editor icon** in your Chrome toolbar
2. The popup shows:
   - Number of elements you've edited on the current page
   - **Save All Changes** - Force save all current edits
   - **Clear All Edits** - Remove all edits for this page
   - **Export Edits** - Download edits as JSON

## Example Workflow

```
1. Visit https://example.com
2. Click the heading "Example Domain" 
3. Change it to "My Custom Title"
4. Click outside to auto-save
5. Reload the page
6. Title remains "My Custom Title"
7. Open popup and click "Export Edits"
8. A JSON file is downloaded with your edits
```

## Keyboard Shortcuts

| Shortcut | Action |
|----------|--------|
| `Ctrl+S` | Save current edit |
| `Ctrl+Shift+S` | Save all edits |
| Click | Edit text |

## Clearing Edits

**To clear all edits for a page:**
1. Click the extension icon
2. Click "Clear All Edits"
3. Confirm the action
4. The page will reload with original content

**To clear individual edits:**
1. Click the text to edit it
2. Delete all content (make it empty)
3. Click outside to save
4. The element will return to original on reload

## Storage Info

- Edits are stored in Chrome's **Local Storage**
- Storage is **per-domain** (separate edits for each website)
- Maximum ~10MB of storage per browser
- Data persists until you:
  - Click "Clear All Edits" in the popup
  - Clear browser cache/cookies (includes local storage)
  - Uninstall the extension

## Tips & Tricks

✅ **Works on:**
- News sites
- Documentation pages
- Forums and discussion boards
- Any text-based content

❌ **May not work on:**
- Sites with strict Content Security Policy (CSP)
- Password-protected pages
- Websites that heavily restrict JavaScript

💡 **Best practices:**
- Export important edits regularly
- Don't clear browser data if you want to keep edits
- Reload page if new text elements don't become editable
- Use Clear All Edits to reset a page to original

## Troubleshooting

**Q: Extension won't load**
- A: Make sure Developer Mode is enabled in chrome://extensions/
- Check the file path and ensure all files are present

**Q: Can't edit text on some websites**
- A: Some sites have strict CSP policies that prevent editing
- This is a security feature of those websites

**Q: Edits disappeared**
- A: Check if you cleared browsing data (includes local storage)
- Export edits before clearing cache

**Q: Getting "Manifest error"**
- A: Ensure manifest.json is in the main directory
- Check that all referenced files exist (content.js, styles.css, etc.)

## Next Steps

- Install the extension and test it
- Visit any website and try editing some text
- Reload the page to see changes persist
- Use the popup to view and manage your edits
- Export edits as backup when needed