mirror of https://github.com/TristanEDU/LiveOverlayExtension.git synced 2025-09-16 15:38:45 +00:00

TristanEDU 24ae68aa21 feat: initial working release with draggable overlay panel and full UI controls

- Added iframe overlay with customizable source URL
- Included opacity slider for pixel-perfect comparison
- Implemented color inversion toggle
- Added scroll lock for accurate layout preservation
- Removed iframe scrollbars to avoid layout shifts
- Built draggable control panel with dedicated handle
- Added README.md with usage, warnings, and contribution guide
- Created LICENSE (MIT) and CHANGELOG.md for version tracking

2025-05-30 05:44:44 -07:00

3.5 KiB

Raw Permalink Blame History

LiveOverlayExtension

A Chrome extension for pixel-perfect visual comparison of two live websites. This tool is ideal for frontend developers, designers, and QA testers who need to overlay a staging or production site directly on top of another to validate layout accuracy, design drift, or content alignment — all in real time.

🔧 Features

✅ Live iframe overlay of any URL
🎚️ Adjustable opacity slider for visual blending
🌐 Custom overlay URL input for flexible comparisons
🌗 Invert colors toggle to aid visibility
🔒 Disable scrolling on the base site to freeze layout
🧱 Overlay iframe uses hidden scrollbars to prevent layout shift
🖱️ Draggable floating control panel (non-intrusive, lightweight)

🚀 Installation & Usage

1. Clone this repo:

git clone https://github.com/TristanEDU/LiveOverlayExtension.git
cd LiveOverlayExtension

2. Load in Chrome:

Open Chrome and go to chrome://extensions/
Enable Developer Mode
Click Load unpacked
Select the LiveOverlayExtension directory

3. Usage Instructions

Navigate to any site (e.g., your dev or test environment)
The floating control panel will appear in the top-right corner
Enter the overlay URL (e.g. your staging or production version)
Adjust opacity, lock scrolling, or invert colors for better contrast
Drag the control panel wherever you like for convenience

⚠️ Important Warnings & Limitations

❌ Iframe Restrictions

Many websites (especially large platforms or secure systems) use headers like X-Frame-Options: DENY or CSP rules like frame-ancestors 'none', which prevent them from being embedded in an iframe.

If you attempt to overlay a site that blocks iframing, you’ll see this in the Chrome Console:

Refused to display 'https://example.com' in a frame because it set 'X-Frame-Options' to 'DENY'.

✅ Recommended workaround:
Use this tool in environments you control (dev/staging), and temporarily disable these headers during QA review.

🔐 Security Notice

This extension disables pointer events on the overlay for safety and overlays URLs in read-only mode. However:

You should never enter passwords, API keys, or sensitive content into the overlayed page
The overlay is rendered but not sandboxed — treat it as real browser content
Do not use on high-security internal systems without explicit authorization

👥 Collaborators

Name	GitHub Username	Role
Tristan Thomas	`@TristanEDU`	Creator & Lead Developer

🤝 Contribution Guidelines

We welcome clean, well-documented contributions that enhance the tool’s functionality or usability.

✅ To Contribute:

Fork the repo
Create a feature branch:
```
git checkout -b feature/your-feature
```
Write clear, maintainable code
Test on multiple pages and overlay URLs
Submit a pull request, including:
- Summary of what you changed
- Screenshots (if UI-related)
- Why the change improves the tool

🛠️ Development Principles

Use vanilla JavaScript only (no dependencies)
Keep UI simple and minimal
Maintain compatibility with all Chromium-based browsers
Focus on developer experience and visual fidelity

📄 License

MIT License — free to use, modify, and distribute. Attribution appreciated.

3.5 KiB Raw Permalink Blame History Unescape Escape