CRX id
cpdcmlgojblmkhphbnmiijicnkbhjgno
cpdcmlgojblmkhphbnmiijicnkbhjgno
Description from extension meta
Capture page elements with hover and click to generate React components with Tailwind or styled-components using AI
Image from store
Description from store
📸 Capture Components with AI – Chrome Extension
Easily capture individual web elements with a simple hover and click! 🚀
✨ Features
Element Highlighting: 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 captured image is instantly copied for easy sharing.
AI Component Generation: Generate React components from 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!
🚀 How to Use
- Click the Element Screenshot extension icon in the toolbar.
- Activate Selection Mode from the popup.
- Hover over any element – it will be highlighted with a red border.
- Click on the desired element to capture the image.
- 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 desired screenshot.
- Enter your OpenAI API key (required only once).
- Choose the component type (React, React + Tailwind, or React + Styled Components).
- Click "Generate Component."
- Copy the generated code and use it in your project!
🛠️ Technologies Used
JavaScript (Vanilla JS)
Chrome Extensions API
---------------
Start Capturing! 🎉