Copy CSS properties from any web element with CSS Scanly. Supports Tailwind & Bootstrap, Helpful for developers and designers

Latest Version

Version

1.2

Update

October 17, 2024

Size

35.52KiB

Developer

CSS Scanly - Copy CSS | Tailwind & Bootstrap Extension

CSS Scanly: Inspect, Analyze, and Edit CSS in Real-Time

Discover the power of advanced CSS inspection and editing with CSS Scanly, the must-have tool for web developers, designers, and CSS enthusiasts. This Chrome extension transforms how you interact with web page styles, providing an intuitive and feature-rich environment for exploring and manipulating CSS on any website.

Key Features:

1. Real-Time CSS Scanning

Hover over any element to instantly view its applied styles
See computed styles, including those from stylesheets and inline CSS
Explore pseudo-class styles etc. without leaving the page

2. Interactive CSS Editing

Edit CSS properties on-the-fly and see changes immediately
Experiment with styles without affecting the original page
Perfect for prototyping and troubleshooting design issues

3. Framework Detection

Automatically detects and highlights Bootstrap and Tailwind CSS classes
Gain insights into how popular frameworks are used on different websites

4. Pinnable CSS Boxes

Pin multiple CSS information boxes for easy comparison
Ideal for analyzing styles across different elements simultaneously
5. Copy-to-Clipboard Functionality

Quickly copy any CSS styles with a single click
Streamline your workflow by easily transferring styles to your projects

6. Media Queries Display

View applied media queries for responsive design analysis
Understand how styles change across different screen sizes

7. User-Friendly Interface

Intuitive control bar for easy navigation and tool management
Keyboard shortcuts for enhanced productivity

8. Customizable Experience

Pause and resume the scanner as needed
Move the control bar to your preferred location on the screen
Perfect For:

Web Developers seeking to debug CSS issues
Designers looking to analyze and draw inspiration from other websites
Students learning web design and CSS
QA testers verifying style implementations
Anyone curious about the styles behind their favorite websites
Elevate your web development and design process with CSS Scanly.

Download now and start scanning the world of CSS like never before!

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "manifest_version": 3, "name": "CSS Scanly - Copy CSS | Tailwind & Bootstrap", "version": "1.2", "description": "Copy CSS properties from any web element with CSS Scanly. Supports Tailwind & Bootstrap, Helpful for developers and designers", "permissions": [ "activeTab", "clipboardWrite" ], "action": { "default_icon": { "16": "icons/icon16x.png", "48": "icons/icon48x.png", "128": "icons/icon128x.png" } }, "background": { "service_worker": "background.js" }, "icons": { "16": "icons/icon16x.png", "48": "icons/icon48x.png", "128": "icons/icon128x.png" }, "content_scripts": [ { "matches": [""], "js": ["content.js"], "css": ["styles.css"] } ]}

Download CRX(35.52KiB)