Element Screenshot - Chrome Extension
Easily capture individual web elements with a simple hover and click! 🚀
✨ Features
Highlight Elements: Hover over any web component to see a red border.
One-Click Screenshot: Click to capture only the selected element.
Auto Copy to Clipboard: The screenshot is instantly copied for easy sharing.
AI Component Generation: Generate React components from your screenshots using OpenAI.
Multiple Component Types: Choose between React, React + Tailwind, or React + Styled Components.
Lightweight & Fast: Works seamlessly on any website.
Ideal for Developers, Designers & Testers!
📥 Installation
1️⃣ Download the Source Code
git clone https://github.com/yourusername/element-screenshot.git
cd element-screenshot
2️⃣ Load the Extension in Chrome
Open Chrome and go to chrome://extensions/.
Enable Developer Mode (top right).
Click Load unpacked and select the project folder.
3️⃣ Start Capturing Screenshots! 🎉
🚀 How to Use
Capturing Screenshots
Click on the Element Screenshot extension icon in the toolbar.
Activate Scan Mode from the popup.
Hover over any element – it will be highlighted with a red border.
Click on the element to take a screenshot.
The image is automatically copied to the clipboard!
Generating React Components
Capture a screenshot of a UI element.
In the extension popup, click Select on the screenshot you want to use.
Enter your OpenAI API key (required only once).
Choose the component type (React, React + Tailwind, React + Styled Components).
Click Generate Component.
Copy the generated code to use in your project!
🛠️ Technologies Used
JavaScript (Vanilla JS)
Chrome Extensions API
Clipboard API
Canvas for Image Processing
OpenAI API for AI-powered component generation (using GPT-4o model)
Top comments (0)