CSS Stats Browser Extension

Analyze CSS from any webpage - including localhost, authenticated pages, and sites behind firewalls!

Features

• 🔒 Works on authenticated pages - Analyze CSS from logged-in dashboards, admin panels, etc.
• 🏠 Works on localhost - Perfect for analyzing your local development sites
• 🚀 Instant analysis - Extracts all CSS from the current page and sends it to CSS Stats
• 📊 Full stats - Get the complete CSS Stats analysis with all metrics and visualizations
• 🔗 Direct link - Automatically opens the stats page in a new tab

Installation

From Source (Development)

1. Clone or download this repo
2. Open Chrome and go to chrome://extensions/
3. Enable "Developer mode" (toggle in top right)
4. Click "Load unpacked"
5. Select the extension directory

From Chrome Web Store

You can also install it from the chrome web store

https://chromewebstore.google.com/detail/obfocojecmagfgpdanknkacnedcgjoae?utm_source=item-share-cb

Usage

1. Navigate to any webpage you want to analyze
2. Click the CSS Stats extension icon in your toolbar
3. Click "Analyze CSS"
4. Wait a few seconds while the CSS is extracted and analyzed
5. The stats page will automatically open in a new tab!

How It Works

The extension:

1. Extracts all CSS from the current page (stylesheets + inline styles)
2. Sends the CSS to the CSS Stats API at https://cssstats.com/v1/analyze
3. The API analyzes the CSS and returns a snapshot ID
4. Opens https://cssstats.com/stats/{snapshotId} in a new tab

Privacy

• The extension only accesses the current tab when you click "Analyze CSS"
• CSS is sent to cssstats.com for analysis and storage
• The page URL is included for reference but is not required
• No other data from the page is collected or transmitted

Limitations

• Cross-origin stylesheets: If a page loads CSS from a different domain (e.g., CDN), the browser may block access to those rules. The extension will note these as "(cross-origin)" in the sources list.
• Dynamic CSS: CSS generated by JavaScript after page load may not be captured
• Large files: Very large CSS files (>10MB) may take longer to analyze

Development

The extension consists of:

• manifest.json - Extension configuration
• popup.html - Extension popup UI
• popup.js - Main logic for CSS extraction and API communication

To modify:

1. Edit the files
2. Go to chrome://extensions/
3. Click the refresh icon on the CSS Stats extension card

Support

Issues? Questions? Open an issue at https://github.com/cssstats/chrome-extension/issues

License

MIT