CSS Inspector Pro

About

A powerful Chrome extension for inspecting and extracting CSS styles, colors, typography, and assets from any website.

## Features

✅ **Point-and-Click Inspection** - Hover over any element to see its CSS properties instantly
✅ **Color Extraction** - Extract all colors used on a page with semantic grouping
✅ **Typography Analysis** - Identify fonts, sizes, weights, and text styles
✅ **Asset Browser** - Browse and download images, SVGs, and other assets
✅ **Contrast Checker** - Check WCAG color contrast compliance
✅ **Export Functionality** - Export colors and typography as CSS/SCSS
✅ **Sidebar Mode** - Full viewport access with detailed inspection panel
✅ **Accessibility Insights** - Get accessibility recommendations

## How to Use

### Basic Inspection
1. Click the extension icon on any website
2. Click "Start Inspecting"
3. Hover over elements to see quick info
4. Click elements to inspect them in detail

### Color Analysis
1. Navigate to the "Colors" tab
2. View all extracted colors from the page
3. Click on any color to copy its hex value
4. Use filters to view colors by type (text, background, border)

### Typography Analysis
1. Navigate to the "Typography" tab
2. View all font styles used on the page
3. Click on any typography sample to copy its CSS

### Contrast Checker
1. Navigate to the "Contrast" tab
2. Enter foreground and background colors
3. See instant WCAG compliance results

### Sidebar Mode
1. Click "Open Sidebar" in the extension popup
2. Get full viewport access while inspecting
3. See detailed properties and accessibility insights

## Keyboard Shortcuts

- `Esc` - Exit inspection mode
- `Ctrl+Shift+C` - Toggle inspection mode

## Export Formats

- **CSS** - Standard CSS variables and classes
- **SCSS** - Sass variables and mixins
- **JSON** - Raw data for further processing

❓ Frequently Asked Questions (FAQ)


🔍 What does CSS Inspector Pro do?
CSS Inspector Pro lets you inspect and extract CSS styles, fonts, colors, and assets from any webpage using a simple point-and-click interface. It’s built for designers, developers, and QA teams who need quick visual feedback without digging into dev tools.

🖱️ How do I start inspecting a website?
Click the CSS Inspector Pro icon in your Chrome toolbar

Click "Start Inspecting"

Hover over elements to preview styles

Click an element for detailed inspection in the sidebar

🎨 Can I extract all colors from a page?
Yes. Go to the Colors tab inside the extension. It lists all detected colors, grouped by usage (text, background, borders). You can click any swatch to copy the hex value.

🔤 How does the Typography tab work?
The Typography tab scans the page for fonts, sizes, weights, and line heights. You can click on any text sample to copy its corresponding CSS rule.

📥 Can I export the extracted styles?
Yes. You can export color palettes and typography styles in CSS, SCSS, or JSON format from within the extension.

🧑‍🦯 Does it help with accessibility?
Yes. The Contrast Checker helps you test color combinations against WCAG guidelines, and the sidebar provides accessibility insights for selected elements.

🖼️ Can I download images and icons from the site?
Yes. The Asset Browser tab allows you to browse and download all images, SVGs, and other media assets detected on the page.

🧩 Why doesn’t the extension work on some pages?
Chrome restricts extensions from running on internal pages (like chrome:// or chrome-extension://). Also, some websites may block extensions. Try refreshing the page or reloading the extension.

⚙️ Is it compatible with Manifest V3?
Yes, CSS Inspector Pro is built using Manifest V3 and modern JavaScript, ensuring compatibility with the latest versions of Chrome.