page-editor/QUICKSTART.md

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