Skip to content

README.md

Latest commit

 

History

History
79 lines (41 loc) · 3 KB

README.md

File metadata and controls

79 lines (41 loc) · 3 KB

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.