broSense - Visual Inspector

Visual CSS, Box Model, DOM-to-Figma, SEO & Step Annotator inspector with Shadow DOM isolation and eye-comfort theme.

⚡ broSense is a next-generation, high-performance visual CSS, DOM-to-Figma, SEO & Step Annotator extension for Chromium & Microsoft Edge browsers (Manifest V3), inspired by Hoverify and designed with WEDABRO's eye-comfort glassmorphism aesthetic. Say goodbye to opening heavy Chrome DevTools (F12) just to check font sizes, colors, margins, or paddings! broSense allows developers, designers, and testers to inspect any web element instantaneously with a simple hover motion, export clean Auto Layout frames to Figma, annotate bug reproduction steps, and audit SEO in real time. 🌟 KEY HIGHLIGHTS: 1. 🚀 60fps Ultra-Smooth Inspection: - Powered by requestAnimationFrame for non-blocking performance. - Smart screen collision detection automatically flips the tooltip (left/right or top/bottom) near viewport edges. 2. 🟧 DevTools Box Model Concentric Overlay: - Visual highlights for Margin (orange), Border (yellow), Padding (green), and Content (blue). - Immediately spot layout shifts, misaligned margins, and padding imbalances without digging through DevTools. 3. 📐 DOM-to-Figma Converter (Auto Layout v4): - Press Alt+Shift+F (or Shift+F) to convert any webpage element or layout into production-ready Figma JSON. - Semantic Component Naming (Header, Hero Section, Button / "...") with full Auto Layout v4 (HUG, FILL, FIXED, gap, padding, borders, shadows, linear gradients). - Seamless companion plugin for Figma with 100% design fidelity. 4. 📝 Visual Step Annotator: - Press Alt+Shift+A (or A) to activate the on-screen Step Annotator for bug reporting and QA walkthroughs. - Floating dark toolbar with numbered step badges (1..N), highlight boxes, arrow connectors, and text callouts. - One-click export and lossless clipboard copy for GitHub issues, Slack, and Jira tickets. 5. 🔍 Real-Time SEO Diagnostics & OpenGraph Drawer: - Press Alt+Shift+O (or Shift+O) to slide open the SEO Diagnostics Drawer. - Instant audit for Title, Description, Canonical URL, Robots, OpenGraph social card previews, Headings structure (H1-H6), Schema JSON-LD, and Missing Alt image highlights. 6. 📸 Multi-Mode Screenshot Engine: - Press Alt+Shift+P (or Shift+P) to capture elements, visible viewport, scrolling full-page stitches, or annotated canvases. - Multi-tier clipboard copy engine with immediate lossless PNG support. 7. 🎨 Dual-Engine EyeDropper & 8x Color Loupe: - Integrated Chromium Native EyeDropper API with 8x magnifying glass loupe fallback. - Press Shift+I to sample any on-screen pixel with automatic HEX/RGB copy and WCAG 2.1 contrast calculation. 8. 📏 Figma-like Distance Measurement: - Press Space to freeze an element, then hover any other element across the page. - Dynamically projects guideline connectors and pixel pill badges showing exact pixel distances. 9. ⚡ Tailwind CSS Converter: - Press T or click Copy on the Tailwind row to convert computed styles into production-ready Tailwind CSS classes. 10. ✍️ Live Text & Content Editing: - Press Shift+E to edit any webpage text in-place (designMode) to quickly test responsive layouts and copy lengths. 11. 🛡️ 100% CSP Immunity & Shadow DOM Isolation: - Encapsulated inside Shadow DOM (#brosense-root) using Constructable Stylesheets. - Guaranteed zero styling collision with inspected pages and 100% immune to strict Content Security Policies (CSP) on GitHub, Twitter/X, and enterprise portals. 🔒 PRIVACY & SECURITY FIRST: broSense runs 100% locally on your machine. It does not collect, record, track, or transmit any user browsing activity or personal data. Crafted with engineering precision by WEDABRO: https://www.linkedin.com/company/wedabro