init commit

QUICKSTART.md

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