Colly di Qclid

A browser extension for inspecting webpage elements to reveal their CSS styles, Tailwind CSS utility classes, and CSS animations.

• Element Inspection — Hover over any element to see computed styles, layout properties, flex/grid details, and more in a floating panel.
• Tailwind CSS Detection — Automatically detects if a page uses Tailwind CSS and groups detected utility classes by category (Layout, Flexbox, Grid, Spacing, Typography, etc.).
• Animation Extraction — Parses @keyframes rules from all stylesheets (including cross-origin) and displays animation names, durations, timing functions, and keyframe details alongside transition properties.
• Clipboard Export — Click any element to copy its full style data (styles, Tailwind classes, animations) to the clipboard as formatted text.
• Shift+Scroll — Hold Shift and scroll to scroll the overlay panel when it contains more content than the viewport.
• Dark Theme — Black + orange color scheme designed for developer workflows.

1. Open about:debugging#/runtime/this-firefox
2. Click Load Temporary Add-on...
3. Select manifest.json from the project folder.

| Action | Result |
|---|---|
| Right-click page → Colly | Activate inspection mode |
| Hover any element | See styles, Tailwind classes, and animations in the floating panel |
| Click an element | Copy all extracted data to clipboard |
| Right-click | Exit inspection mode |
| Escape | Exit inspection mode |
| Shift + Scroll | Scroll the overlay panel |


Clicking an element copies a formatted block like this to your clipboard:

== Colly Inspector ==

Element: div.container#app

-- Styles --
display: flex
position: relative
width: 100%
...

-- Tailwind Classes --
Layout: flex, container
Sizing: w-full
Spacing: p-4, mx-auto
...

-- Animations --
fadeIn: 300ms / ease-in-out / 1x
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}



colly/
├── manifest.json # Firefox Manifest V3
├── background.js # Context menu handler
├── content.js # Inspection engine + UI
├── content.css # Panel, cursor, and highlight styles
└── icons/
└── icon.svg # Extension icon




Properties extracted from getComputedStyle: display, position, width, height, margin, padding, color, background-color, font-* properties, border-radius, box-shadow, opacity, overflow, z-index, transform, and flex/grid-specific properties when applicable.

1. Checks for a Tailwind CDN <script> tag or @tailwind directive in stylesheets
2. Matches element classes against 13 category patterns (Layout, Flexbox, Grid, Sizing, Spacing, Typography, Background, Border, Effect, Transition, Transform, Animation, Interaction)
3. Classes are grouped by category and displayed with an orange chip style

1. Reads animation-* and transition-* computed properties
2. Iterates all document.styleSheets to find matching @keyframes rules
3. Displays keyframe selectors and their CSS declarations inline
4. Cross-origin stylesheets are gracefully skipped via try-catch