Live CSS Editor 🎨✨

Live CSS Editor is a powerful Chrome Extension that allows developers and designers to modify any website's styling in real-time. Featuring a sleek, draggable visual interface, it bridges the gap between Inspect Element and actual CSS authoring by providing a persistent, interactive editing environment.

🚀 Key Features

• Real-Time Style Injection: Apply CSS changes instantly to the active tab without refreshing the page.

• Draggable Interface: A floating editor panel that can be moved anywhere on the screen to avoid obstructing your view.

• Visual Property Controls: Includes intuitive sliders and inputs for:

  • Typography: Font size, weight, and color.

  • Spacing: Padding and margin adjustments.

  • Borders: Radius and border-width control.

  • Backgrounds: Real-time color picking and opacity.

• Global Selector Target: Automatically targets the body element by default, allowing for broad layout testing.

• CSS Code Export: Generates clean, ready-to-copy CSS code based on your visual adjustments.

• Persistence: Maintains the editor state across the session until deactivated.

🛠️ Technical Stack

• Extension Framework: Manifest V3 for optimized performance and modern security.

• Core Logic: Vanilla JavaScript for low-latency DOM manipulation and style injection.

• UI/UX: HTML5 and CSS3 with a "Glassmorphism" aesthetic and interactive sliders.

• Messaging: Utilizes chrome.runtime and chrome.scripting APIs for communication between the popup and content scripts.

📁 Project Structure

Plaintext

├── manifest.json      # Extension permissions and background config
├── popup.html/js      # Entry point to activate the editor
├── background.js      # Service worker handling script injection logic
├── content.js         # The "Engine" – creates the UI and applies styles
├── style.css          # Styling for the injected floating editor
└── README.md          # Project documentation

⚙️ Installation

1. Download or clone this repository.

2. Open Chrome and go to chrome://extensions/.

3. Enable Developer mode (top right).

4. Click Load unpacked and select the extension folder.

5. Click the Live CSS Editor icon in your toolbar and hit "Activate Editor".

📖 How to Use

1. Activate: Open the extension popup on any webpage and click the activation button.

2. Adjust: Use the sliders and color pickers in the floating panel to change the site's look.

3. View Code: Look at the "CSS Output" section at the bottom of the panel to see the generated code.

4. Copy: Click the Copy button to save the CSS to your clipboard for use in your project.

---

Developed by Shakeeb for a faster, more visual design workflow.