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