# Page Editor Chrome Extension

A Chrome extension that lets you edit and save text content on any website locally. All changes persist across page reloads.

## Features

✨ **Edit Any Text** - Click on any text element to edit it directly
💾 **Auto-Save** - Changes are automatically saved to your browser's local storage
🔄 **Persistent** - Edits persist across page reloads
📥 **Export** - Export all your edits as a JSON file
🎨 **Visual Feedback** - Yellow highlight shows editable elements

## Installation

1. Clone or download this repository
2. Open Chrome and navigate to `chrome://extensions/`
3. Enable "Developer mode" (toggle in the top right)
4. Click "Load unpacked" and select the `page_editor` directory

## Usage

### Basic Editing
- **Click any text** on the page to start editing (text will be highlighted in yellow)
- **Type to edit** the content
- **Click outside** or move to another element to auto-save

### Keyboard Shortcuts
- `Ctrl+S` (or `Cmd+S` on Mac) - Save current edit
- `Ctrl+Shift+S` (or `Cmd+Shift+S` on Mac) - Save all edits on page
- `Click` - Edit any text element

### Extension Popup
- **Save All Changes** - Manually save all edits
- **Clear All Edits** - Delete all edits for the current page
- **Export Edits** - Download all edits as a JSON file
- **View edit count** - See how many elements you've edited

## How It Works

1. **Content Script** (`content.js`) injects into every webpage and:
   - Makes all text elements editable (contenteditable)
   - Adds visual styling to show editable elements
   - Saves edits to Chrome's local storage using page URL as key

2. **Storage** - Uses `chrome.storage.local` to persist edits with a key based on the page URL (Base64 encoded)

3. **Automatic Reload** - On page reload, the extension loads saved edits and applies them automatically

## Technical Details

- **Storage Key Format**: `page_edits_<base64_encoded_url>`
- **Element Identification**: Uses XPath-like structure to identify elements reliably
- **Editable Elements**: `<p>`, `<h1>-<h6>`, `<li>`, `<span>`, `<div>`, `<article>`, `<section>`
- **Excluded Elements**: Script tags, style tags, head elements are automatically excluded

## Limitations

- Changes are stored locally in your browser's storage (not synced across devices)
- Some websites with strict Content Security Policy (CSP) may not support editing
- Dynamic content added after page load needs a page refresh to become editable
- Maximum storage per domain: ~10MB (shared with all sites)

## Tips

- Use `Clear All Edits` to reset a page to its original state
- Export your edits regularly for backup
- Changes don't affect the original website—they're only visible to you locally
- Clearing browser data will also clear your edits

## Troubleshooting

**Edits not saving?**
- Check if the website has restrictive CSP headers
- Reload the page and try again
- Check chrome://extensions/ to ensure the extension is enabled

**Can't edit certain elements?**
- Some websites apply styles that prevent editing
- Try editing parent or child elements instead

**Lost edits after clearing cache?**
- Chrome's "Clear browsing data" will delete extension storage
- Use the Export feature to backup important edits

## Development

The extension consists of:
- `manifest.json` - Extension configuration
- `content.js` - Main script that makes elements editable
- `background.js` - Service worker for background tasks
- `popup.html/js` - Extension popup UI
- `styles.css` - Styling for editable elements

## License

MIT - Free to use and modify