Overlay Image Tool

# Overlay Image Tool

A Chrome extension for UI developers — overlay a design mockup on a live page as a semi-transparent layer to compare layout accuracy.

---

## Overview

Overlay your design draft on any page to compare with the actual UI.

---

## Features

- **File upload or clipboard paste** — load an image via file picker, or paste from clipboard (`Ctrl+V`) inside the popup
- **Enable Directly Paste** — toggle on to paste an image overlay onto the page directly with `Ctrl+V`, without opening the popup
- **Position & size control** — set `background-position` and `background-size` via free-text input
- **Opacity** — adjust overlay transparency
- **Gray effect** — convert the overlay to grayscale to reduce visual noise
- **Arrow key move** — enable keyboard nudging to fine-tune overlay position after applying
- **Session memory** — last used image and all settings are restored automatically on next open
- **One-click remove** — clear the overlay from the current page instantly

---

## Keyboard Shortcuts

Arrow key move must be enabled in the popup options.

| Key | Movement |
|---|---|
| `↑` `↓` `←` `→` | 1px |
| `Shift` + arrow | 10px |
| `Ctrl` / `⌘` + arrow | 100px |

> Arrow key move is automatically disabled when focus is inside a text field, select box, or any editable element, to avoid conflicts with native browser behavior.

---

## Usage

1. Click the **Overlay Image Tool** icon in the Chrome toolbar
2. Select an image file, or paste one from clipboard inside the popup
3. Adjust position, size, opacity, and options as needed
4. Click **Generate** — the overlay appears on the current page
5. Click **Remove** to clear the overlay

---

## License

MIT