Display CSS properties as overlay and export to Excel

Latest Version

Version
1.0
Update
February 25, 2025
Size
9.17KiB
Developer
chaoschess.xyz
Category
Users
0
Rating
0 ★
Manifest Version
3
Web Store Status
Languages Support
English
See more
Permissions
ActiveTab
Scripting
See more

CSS Inspector Pro Extension

Core Features
Real-time CSS Inspection
Hover over elements to view their CSS properties
Shows element dimensions, margins, padding, and font details
Visual measurement lines for width and height
Non-intrusive overlay display
Element Selection
Click to pin/select elements
Click again to deselect
Multiple elements can be selected simultaneously
Selected elements maintain their measurements and highlights
Visual Measurements
Real-time size measurements (width × height)
Distance measurements to nearby elements
Visual measurement lines with dimensions
Automatic positioning of overlays to avoid screen edges
4. Detailed CSS Information
Basic info for hovered elements:
Element tag name
Dimensions
Position
Margin and padding
Basic font properties
Additional info for pinned elements:
Font weight
Line height
Letter spacing
Distances to nearby elements
5. Performance Optimizations
Debounced mouse movement handling
Event delegation
Limited DOM operations
Efficient overlay management
Smart element filtering
Export Functionality
Export CSS properties to CSV format
Compatible with Excel
Includes element tags, dimensions, and styles
Technical Features
1. Non-invasive Implementation
Preserves original element styles
Restores elements to original state on deselection
High z-index overlays to stay on top
Responsive Design
Adjusts overlay positions based on viewport
Handles window scrolling
Prevents overlays from going off-screen
Error Handling
Graceful error recovery
Debug logging
Clean cleanup on deactivation
Usage
Click the extension icon to activate
Hover over elements to see their CSS properties
3. Click elements to pin their measurements
Click again to unpin
Click the extension icon again to deactivate
Use export feature to save CSS data to CSV
The extension is designed to be a professional tool for developers and designers who need detailed CSS information while maintaining good performance and user experience.
Read more

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "manifest_version": 3, "name": "CSS Inspector Pro", "version": "1.0", "description": "Display CSS properties as overlay and export to Excel", "permissions": ["activeTab", "scripting"], "action": { "default_icon": { "16": "icons/icon16.png", "48": "icons/icon48.png", "128": "icons/icon128.png" } }, "background": { "service_worker": "background.js" }, "content_scripts": [ { "matches": [""], "js": ["content.js"], "css": ["styles.css"] } ]} "
Read more

Similar Extensions

icon

GoFullPage - Full Page Screen Capture Extension · Developer Tools 0 77052 ★ 1.81MiB

icon

ColorZilla Extension · Developer Tools 0 3845 ★ 410KiB

icon

JSON Formatter Extension · Developer Tools 0 1859 ★ 19.86KiB

icon

User-Agent Switcher for Chrome Extension · Developer Tools 0 2631 ★ 132KiB

icon

Lighthouse Extension · Developer Tools 0 318 ★ 50.7KiB

icon

Similarweb - Website Traffic & SEO Checker Extension · Developer Tools 0 3255 ★ 1.19MiB

icon

SEOquake Extension · Developer Tools 0 2529 ★ 1.5MiB

icon

PrintFriendly - Print and PDF Web Pages Extension · Productivity 0 2550 ★ 512KiB

icon

Clear Cache Extension · Developer Tools 0 1124 ★ 616KiB

icon

ModHeader - Modify HTTP headers Extension · Developer Tools 0 1061 ★ 676KiB

icon

SEO META in 1 CLICK Extension · Developer Tools 0 1108 ★ 462KiB

icon

Selenium IDE Extension · Developer Tools 0 286 ★ 3.96MiB

icon

Postman Interceptor Extension · Developer Tools 0 957 ★ 478KiB

icon

Stylus Extension · Developer Tools 0 1101 ★ 1.01MiB

icon

CSS Peeper Extension · Developer Tools 0 363 ★ 279KiB

icon

WhatRuns Extension · Developer Tools 0 398 ★ 290KiB

icon

Color Picker for Chrome™ Extension · Developer Tools 0 118 ★ 194KiB

icon

BuiltWith Technology Profiler Extension · Developer Tools 0 407 ★ 54.1KiB

icon

Detailed SEO Extension Extension · Developer Tools 0 193 ★ 266KiB

icon

Fake Filler Extension · Developer Tools 0 752 ★ 536KiB

icon

Responsive Viewer Extension · Developer Tools 0 298 ★ 639KiB

icon

JSON Viewer Pro Extension · Developer Tools 0 137 ★ 349KiB

icon

Requestly - Intercept, Modify & Mock HTTP Requests Extension · Developer Tools 0 1227 ★ 876KiB

icon

Grepper Extension · Developer Tools 0 405 ★ 1.41MiB