CSS Sniffer

The ultimate CSS inspection, analysis, and design system extraction tool.

A powerful Chrome extension that goes far beyond DevTools — hover, inspect, copy, analyze, audit, and export CSS like never before.

Why CSS Sniffer?

Chrome DevTools shows you CSS. CSS Sniffer understands it.

Features

Inspect & Edit

• Hover to inspect — Real-time CSS extraction as you move your mouse
• Click to lock — Select any element and explore its full computed styles
• Live editing — Double-click any value to change it instantly on the page
• Undo/Redo — Full history of all CSS changes you make
• Box model visualization — Interactive margin/border/padding/content display
• DOM navigation — Use arrow keys to traverse parent/child/sibling elements
• Keyboard shortcuts — Space to pin, Shift to pause, Esc to exit

Analyze

• Color palette extraction — Scans entire page, groups colors by hue family
• Typography scanner — Identifies every font/size/weight combination in use
• CSS variables detection — Finds all custom properties across stylesheets
• WCAG contrast audit — Checks every text element for AA/AAA compliance

Design Tokens (New in v2)

• Full design system extraction — Colors, spacing scale, typography scale, border radii, shadows
• Inconsistency detection — "You have 14 near-identical grays — here's a consolidated palette of 6"
• Smart consolidation — Clusters similar colors and suggests a clean palette
• Export as:
  • CSS Custom Properties (:root { --color-primary: ... })
  • Tailwind CSS config (module.exports = { theme: { extend: ... } })
  • Figma Tokens JSON (compatible with Figma Tokens plugin)
  • Style Dictionary format (Amazon's token framework)

CSS Performance Audit (New in v2)

• Performance score (0-100) — At-a-glance health of your CSS
• Unused CSS detection — Finds rules that don't match any element on the page
• Expensive selectors — Flags universal selectors, deep nesting, attribute selectors
• Layout thrashing — Warns about transition: all and animating layout-triggering properties
• Paint cost analysis — Identifies paint-heavy elements vs GPU-composited layers

Cascade & Specificity Visualizer (New in v2)

• Every matching rule — See all CSS rules that apply to the selected element
• Specificity calculation — [0,1,2] badges on every selector
• Winner/loser display — Green "WIN" badge on the rule that takes effect, strikethroughs on overridden ones
• !important tracking — See exactly where !important overrides normal cascade

Animation & Transition Inspector (New in v2)

• Transition detection — Property, duration, timing function, delay
• Animation analysis — Name, keyframes, iteration count, direction, fill mode, play state
• Visual easing curves — SVG bezier curve visualization for every timing function
• @keyframes breakdown — Shows every keyframe stage with its properties
• Web Animations API — Also detects animations created via JavaScript

Responsive Breakpoint Inspector (New in v2)

• Breakpoint discovery — Finds all @media breakpoints used on the page
• Per-element timeline — Shows how the selected element's styles change at each breakpoint
• Change annotations — "At 768px: flex-direction changes from row to column"
• Visual breakpoint bar — See all breakpoints mapped on a viewport width scale

Cross-Element Pattern Detection (New in v2)

• Style fingerprinting — Groups elements by visual similarity
• Duplicate detection — "12 buttons share identical styles"
• Near-duplicate detection — "These two groups are 85% similar, differing only in color"
• Savings estimate — Shows how many bytes of CSS could be saved
• Copy as shared class — One-click export of the common CSS

Visual Regression / Snapshots (New in v2)

• Capture CSS snapshots — Save an element's full CSS state at any point
• Diff vs current — Come back later and see exactly what changed
• Compare any two snapshots — Side-by-side diff with added/removed/changed properties
• Session persistence — Snapshots survive page interactions within the session

Style History & Changelog (New in v2)

• Automatic tracking — Every live-edit is recorded with timestamp
• Revert individual changes — Click "Revert" on any entry
• Export as CSS patch — Get a copy-paste ready diff of all your changes
• Session summary — Total edits, affected elements, time range

Copy-to-Code Export (New in v2)

• React component — Generates a styled-component or inline-styles functional component
• Vue SFC — Full <template> + <script setup> + <style scoped> single file component
• Svelte component — Ready-to-use Svelte file with <style> block
• Plus existing: CSS, SCSS, Tailwind utility classes, styled-components, CodePen

Shareable Design Reports (New in v2)

• One-click HTML report — Beautiful, self-contained design system document
• Includes everything — Colors, typography, spacing, radii, shadows, accessibility audit
• Print-ready — Clean layout optimized for PDF export
• Share with designers — "Here's what's actually on the live site"

Team Collaboration (New in v2)

• Save style guide — Store your brand's design tokens in Chrome sync storage
• Cross-device sync — Style guide follows you across machines
• Deviation checking — Compare live page against your saved guide
• Severity levels — Errors (wrong color), warnings (close but not exact), info (off-scale spacing)

Installation

From Source (Developer Mode)

1. Clone this repository

   git clone https://github.com/aymenhmaidiwastaken/Css-Sniffer.git
   

2. Open Chrome Extensions

   • Navigate to chrome://extensions/
   • Enable Developer mode (toggle in top-right)

3. Load the extension

   • Click "Load unpacked"
   • Select the css-sniffer folder

4. Start inspecting

   • Click the CSS Sniffer icon in your toolbar
   • Or right-click any element → "Inspect CSS with CSS Sniffer"

Firefox Support

A manifest.firefox.json is included for Firefox compatibility. Rename it to manifest.json and load as a temporary extension via about:debugging.

Usage

Quick Start

1. Click the CSS Sniffer extension icon
2. Hit "Start Inspecting"
3. Hover over any element on the page — the side panel shows its CSS in real-time
4. Click to lock the selection
5. Explore the tabs to dig deeper

Tab Groups

The interface is organized into 4 groups with 15 total tabs:

Keyboard Shortcuts

Design Token Workflow

1. Go to Analysis → Tokens
2. Click "Extract Design Tokens"
3. Review the consolidated palette, spacing scale, type scale
4. Check the inconsistency warnings
5. Click Export → choose your format (CSS vars, Tailwind, Figma, Style Dictionary)
6. Optionally save as a Style Guide for team deviation checking

Performance Audit Workflow

1. Go to Perf → Audit
2. Click "Run Performance Audit"
3. Review your score (0-100) and the four audit sections:
   • Unused CSS (percentage of dead rules)
   • Expensive selectors (deep nesting, universal, attribute)
   • Layout thrashing (animated layout properties)
   • Paint cost (heavy filters, unoptimized fixed elements)

Architecture

css-sniffer/
├── manifest.json              # Chrome Manifest V3
├── manifest.firefox.json      # Firefox-compatible manifest
│
├── background/
│   └── service-worker.js      # Message routing, tab state, lazy module injection
│
├── content/
│   ├── content.js             # Message handler orchestrator
│   ├── content.css            # Overlay and highlight styles
│   ├── utils/
│   │   ├── dom-helpers.js     # Selector generation, element info
│   │   ├── css-filters.js     # Default filtering, categorization, shorthands
│   │   └── keyboard.js        # DOM navigation keyboard handler
│   └── modules/
│       ├── inspector.js       # Hover/click/lock detection
│       ├── overlay.js         # Visual highlights, floating CSS card
│       ├── css-extractor.js   # Computed style extraction + box model
│       ├── pin-manager.js     # Multi-element pinning with badges
│       ├── css-editor.js      # Live CSS editing with undo/redo
│       ├── color-palette.js   # Page color extraction + hue grouping
│       ├── typography.js      # Font/size/weight analysis
│       ├── variables.js       # CSS custom property detection
│       ├── contrast.js        # WCAG contrast ratio checker
│       ├── diff.js            # Side-by-side CSS comparison
│       ├── style-history.js   # Edit changelog tracking
│       ├── design-tokens.js   # Full design system extraction (lazy)
│       ├── perf-analyzer.js   # CSS performance audit (lazy)
│       ├── pattern-detector.js       # Cross-element pattern finding (lazy)
│       ├── responsive-inspector.js   # @media breakpoint analysis (lazy)
│       ├── animation-inspector.js    # Transition/animation detection (lazy)
│       ├── cascade-visualizer.js     # Specificity & cascade (lazy)
│       └── snapshot-manager.js       # Visual regression snapshots (lazy)
│
├── sidepanel/
│   ├── sidepanel.html         # Main UI with 15 tab panes
│   ├── sidepanel.js           # Message handling, rendering, exports
│   ├── sidepanel.css          # Complete UI styling
│   ├── tab-manager.js         # Two-tier grouped tab navigation
│   └── tabs/
│       ├── tab-tokens.js      # Design token renderer
│       ├── tab-perf.js        # Performance audit renderer
│       ├── tab-patterns.js    # Pattern detection renderer
│       ├── tab-responsive.js  # Responsive breakpoint renderer
│       ├── tab-animation.js   # Animation inspector renderer
│       ├── tab-cascade.js     # Cascade visualizer renderer
│       ├── tab-snapshots.js   # Snapshot manager renderer
│       └── tab-history.js     # Style history renderer
│
├── popup/
│   ├── popup.html             # Quick launcher
│   ├── popup.js               # Toggle inspector, open side panel
│   └── popup.css              # Popup styling
│
├── lib/
│   ├── storage.js             # Chrome storage wrapper
│   ├── theme.js               # Dark/light mode management
│   ├── messaging.js           # Message abstraction
│   ├── browser-polyfill.js    # Firefox/Edge compatibility shim
│   ├── team-sync.js           # Style guide save/load/check
│   └── exporters/
│       ├── css-exporter.js
│       ├── scss-exporter.js
│       ├── tailwind-exporter.js
│       ├── styled-exporter.js
│       ├── codepen-exporter.js
│       ├── react-exporter.js        # React component generation
│       ├── vue-exporter.js          # Vue SFC generation
│       ├── svelte-exporter.js       # Svelte component generation
│       ├── figma-tokens-exporter.js  # Figma Tokens JSON
│       ├── style-dictionary-exporter.js  # Style Dictionary format
│       └── report-generator.js       # HTML design report
│
├── styles/
│   └── variables.css          # Global CSS variables (light + dark themes)
│
└── icons/
    ├── icon-16.png
    ├── icon-32.png
    ├── icon-48.png
    └── icon-128.png

Key Design Decisions

• Zero dependencies — Pure vanilla JavaScript, no frameworks, no build tools
• Lazy module loading — Heavy analysis modules (tokens, perf, patterns, etc.) are injected on-demand via chrome.scripting.executeScript, not loaded on every page visit
• Two-tier tab navigation — 15 tabs organized into 4 semantic groups to prevent tab overflow
• Content script ↔ Side panel messaging — Messages flow through the background service worker as a relay
• Dark mode — Full theme support with CSS custom properties and system preference detection

Export Formats

Browser Support

Development

Project Setup

No build step required — the extension runs directly from source.

# Clone
git clone https://github.com/aymenhmaidiwastaken/Css-Sniffer.git
cd css-sniffer

# Load in Chrome
# 1. Go to chrome://extensions/
# 2. Enable Developer mode
# 3. Click "Load unpacked" and select this directory

Making Changes

• Edit any file and reload the extension (Ctrl+Shift+R on the extensions page)
• Content script changes require a page refresh on the target page
• Side panel changes take effect immediately after reopening

Adding a New Content Module

1. Create content/modules/your-module.js with a global object
2. Add the lazy injection in background/service-worker.js relay list
3. Add a message handler in content/content.js
4. Create a tab renderer in sidepanel/tabs/tab-yourmodule.js
5. Register the tab in sidepanel/tab-manager.js
6. Add the tab pane in sidepanel/sidepanel.html

Contributing

Contributions are welcome! Here are some areas where help is appreciated:

• Testing — Add Jest + Puppeteer for unit and E2E testing
• TypeScript migration — Improve reliability with static types
• Build pipeline — Vite/webpack for minification and tree-shaking
• Safari support — WebExtension API adaptation
• Accessibility — ARIA labels and semantic HTML in the side panel
• Localization — i18n support for multiple languages

Steps

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License — see the LICENSE file for details.

Acknowledgments

• Built with the Chrome Extensions Manifest V3 API
• Inspired by tools like CSSPeeper, WhatFont, and Chrome DevTools
• Color distance calculations based on Euclidean RGB distance
• WCAG contrast ratios follow W3C WCAG 2.1 guidelines

Made with <3

Stop guessing CSS. Start sniffing it.