SelectorKit

Count, inspect, and style page elements instantly — pick elements, count selectors, and save custom CSS rules per site.

SelectorKit is a lightweight, high-performance Chrome extension for Web Developers, QA Engineers, Designers, and Automation Testers. Effortlessly inspect web page DOM elements, count selector matches in real time, apply non-destructive live outlines, inject persistent custom CSS rules, and export/import clean stylesheets on any website — all from a sleek, distraction-free popup without opening Chrome DevTools. Whether you are validating component counts, debugging tricky CSS layouts, building automated test selectors for Playwright/Cypress, or customizing website appearance across your favorite sites, SelectorKit gives you the essential toolkit to inspect and modify web pages instantly. -------------------------------------------------- KEY FEATURES -------------------------------------------------- 1. 🎯 Precision Visual Element Picker (Dual Target Modes) - Click "Pick Element on Page" to inspect any element under your cursor with a live visual reticle. - Smart Pattern Mode: Generates clean, resilient selectors matching similar repeating elements (cards, list items, table rows). - Exact Match Mode: Generates uniquely targeted selectors (with :nth-of-type and ancestors) matching strictly that single element. - Automatically prioritizes the most robust selector hierarchy: • Unique IDs (e.g., #main-nav). • Testing & accessibility attributes (data-testid, data-test-id, data-cy, data-qa, name, aria-label, role). • Semantic classes while filtering out noisy layout utilities. • Hierarchy paths when needed. - Press Escape anytime to cancel picking mode. 2. ⚡ Real-Time CSS Selector & Match Counter - Type any standard CSS selector (e.g., .card, button.btn-primary, input[type="checkbox"], h2 > a). - Instant debounced counting displays the exact match count in a live badge. - Instant selector syntax validation with clear error feedback. - 1-Click selector copy to clipboard for test scripts, scraping configs, or bug reports. - 1-Click clear button to reset input and page highlights. 3. 🔴 Non-Destructive Live Highlighting - Toggle on-page neon red outlines on all elements matching your active selector. - Safely preserves each element's original outline and outline-offset properties. - Cleanly restores previous styles when clearing or toggling off highlights. - Highlight state automatically synchronizes when reopening the popup. 4. 🎨 Custom CSS Injector & Quick Action Presets - Test visual modifications and layout tweaks in real time directly on the active page. - 1-Click Quick Action Presets: • Hide: Instantly hides matching elements (display: none !important;). • Show: Restores element visibility (display: revert !important;). • Highlight: Injects a high-visibility debugging outline. • Reset: Clears custom styling overrides for the active selector. - Custom CSS Editor: Multi-line editor to test arbitrary CSS rules with live preview before saving. 5. 💾 Domain-Specific Persistent Rule Manager - Save custom CSS rules tied directly to the current website domain (e.g., github.com, example.com). - Saved rules automatically persist and apply on every page visit and refresh. - Comprehensive rule management panel: • Active vs. total rule count badge indicator. • Individual rule enable/disable toggle switches with instant live update. • 1-Click rule editing: modify selector or CSS declarations and update in-place. • 1-Click rule deletion with automatic DOM style cleanup. 6. 📦 Clean CSS & JSON Rule Exports - Export Site CSS: Download a formatted, standalone .css stylesheet ready to use in your project or user style manager. - Export Site JSON: Download a single-site JSON backup of your custom selectors and CSS declarations. 7. 🗄️ Full All-Domains Backup & Smart Importer - Backup All Domains: 1-click full backup of all custom CSS rules across every website you've saved, plus extension preferences, into a single archive file. - Smart Auto-Detecting Importer: Single import button that automatically detects single-site files or full multi-domain backups, intelligently merges rules without duplicates, and applies styles immediately.