Chrome Extension: Capture & Generate Components with AI

Allan Carlos — Sun, 09 Mar 2025 19:26:08 +0000

📸 Component Capture - 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

Download the Source Code:

   git clone git@github.com:this-is-allan/component-screenshot.git
   cd component-screenshot

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.
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)

🏗️ Development Guide

Clone the Repository

git clone https://github.com/this-is-allan/component-screenshot.git
cd component-screenshot

Modify the Extension

Edit content.js to adjust element selection behavior.
Modify popup.html and popup.js to update the UI.
Adjust permissions in manifest.json as needed.

Reload the Extension

After making changes, reload the extension from chrome://extensions/.

🔑 API Key Security

Your OpenAI API key is stored locally in your browser's storage and is only used to make requests to the OpenAI API. It is never sent to any other server.

🐛 Issues & Contributions

Feel free to open an issue or submit a Pull Request if you want to improve the extension.

📜 License

This project is licensed under the MIT License. See the LICENSE file for details.

DEV Community: Allan Carlos