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.

Feature	DevTools	CSS Sniffer
Filter browser defaults, group by category	❌	✅
Pin up to 5 elements, diff side-by-side	❌	✅
Export as CSS, SCSS, Tailwind, React, Vue, Svelte	❌	✅
Design token extraction & inconsistency detection	❌	✅
Performance audit (unused CSS, expensive selectors)	❌	✅
Cross-element pattern detection	❌	✅
Cascade & specificity visualization	❌	✅

---

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:

Group	Tabs	Purpose
Inspect	Styles, Box, Cascade, Anim	Element-level CSS analysis
Analysis	Colors, Type, Vars, Tokens, Patterns	Page-wide design system analysis
Perf	Audit, Responsive	Performance and responsive behavior
Track	Diff, Snapshots, History, A11y	Comparison, tracking, accessibility

Keyboard Shortcuts

Key	Action
Hover	Preview element CSS
Click	Select and lock element
Space	Pin element (up to 5)
Arrow Keys	Navigate DOM tree
Shift	Pause/resume scanning
Esc	Stop inspector

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

Format	Use Case
CSS	Copy computed styles as a CSS rule
SCSS	Nested syntax with color variables
Tailwind CSS	Utility class string
styled-components	React styled.div template literal
React Component	Full functional component with styled-components
Vue SFC	<template> + <script setup> + <style scoped>
Svelte Component	Svelte file with scoped styles
CodePen	Opens a new CodePen pen with the element's HTML + CSS
CSS Variables	Design tokens as :root custom properties
Tailwind Config	tailwind.config.js with extracted theme
Figma Tokens JSON	Compatible with Figma Tokens plugin
Style Dictionary	Amazon Style Dictionary format
HTML Report	Self-contained shareable design system report
CSS Patch	Diff of all live-edit changes

---

Browser Support

Browser	Status
Chrome 109+	Full support (Manifest V3 + Side Panel API)
Edge 109+	Full support (Chromium-based)
Firefox 109+	Supported via manifest.firefox.json (sidebar instead of side panel)
Safari	Not yet supported

---

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.