init commit

README.md

@@ -0,0 +1,96 @@
+# 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