onHover — Developer Toolkit

Tracking since May 6, 2026.

Changelog

• May 11, 2026
  description

  onHover is a lightweight developer toolkit that lives in your browser toolbar. It gives you instant access to the tools you reach for most — without the overhead of opening DevTools every time.
  
  Element Inspector
  Hover over any element to see its dimensions, computed styles, spacing, and CSS classes in real time. Click to pin a detailed panel. Edit content directly on the page, hide elements, and inspect inside iframes — all with a single keyboard shortcut.
  
  Color Picker
  Pick any color from any webpage. Instantly get the value in HEX, RGB, or HSL. Save your picked colors to a palette and copy with one click.
  
  Screenshot Capture
  Four capture modes in one place:
  
  Visible screen — capture exactly what you see
  Full page — automatically scrolls and stitches the entire page into one image
  Select element — click any element to capture just that
  Select area — drag to define a custom region
  After capturing, annotate, crop, and export directly from the built-in image editor.
  
  Screen Recorder
  Record your active tab as a video. Useful for documenting bugs, creating walkthroughs, or sharing UI reviews.
  
  SEO Analyzer
  Audit any page's metadata in one click — title, description, Open Graph tags, Twitter Card tags, canonical URLs, heading structure, link analysis, and semantic HTML tags.
  
  Core Web Vitals Badge
  Overlay a live performance badge on any page showing LCP, CLS, INP, and FCP in real time as you browse.
  
  Console + Network Panel
  A floating, always-on-top console and network log panel — see JS errors and network requests without switching to DevTools.
  
  Who is this for?
  Frontend developers, designers, QA engineers, and anyone who builds or reviews web pages regularly. onHover puts your most-used debugging tools a single click away.
  
  No account required. No data collection. Everything runs locally in your browser.

  Stop switching tabs. Stop opening DevTools. Everything you need to inspect, debug, and analyze any webpage is one click away.
  
  Hover over any element to see its dimensions, computed styles, spacing, and CSS classes in real time. Click to pin a detailed panel. Edit content directly on the page, hide elements, and inspect inside iframes — all with a single keyboard shortcut.
  
  Element Inspector
  -Hover over any element to see computed styles, dimensions, and box model instantly
  -Lock inspection with a click, drag the panel anywhere on screen
  -Inspect elements inside iframes
  -Edit styles and text live on the page
  -Hide or remove elements temporarily
  -Check WCAG accessibility and contrast ratio
  -Export directly to CodePen
  
  Color Tools
  -Eyedropper — pick any pixel color in HEX, RGB, or HSL
  -Multi Pick — collect multiple colors at once
  -Extract the full color palette of any website
  -WCAG AA/AAA contrast checker with live preview
  
  Screenshot & Screen Capture
  -Capture visible viewport, full scrolling page, specific element, or drag-selected area
  -Record your tab as a video
  -Built-in image editor with annotation tools
  -Edit captured screenshot with multiple tools
  
  SEO Analysis
  -Audit meta tags, Open Graph, Twitter Cards, and canonical URLs
  -Analyze structured data (JSON-LD / Microdata)
  -Check heading hierarchy, link health, and semantic HTML
  -Get an SEO score with issues list and recommendations
  
  Responsive Preview
  -Test any URL across preset device sizes and custom breakpoints
  
  Assets Viewer
  -See every image, script, stylesheet, font, and video loaded on the page
  -Filter by type, copy URLs, and view dimensions
  
  Custom Code Injection
  -Inject persistent CSS and JavaScript into specific sites
  -Rules run automatically on every page load, stored per hostname
  
  Page Insights
  -Snapshot of Core Web Vitals — LCP, FCP, CLS, INP, TTFB
  -Load timing breakdown: DNS, TCP, TTFB, DOM, full load
  -Resource breakdown by type (JS, CSS, images, fonts, XHR)
  -DOM health stats — node count, depth, duplicate IDs
  -JS memory monitoring (heap used / limit)
  
  Console & Network Panel
  -Capture console logs (log, warn, error, info) and network requests in a lightweight popup panel
  -Filter by log level or request type without ever switching to DevTools
  
  Network Throttle
  -Simulate Fast 3G, Slow 3G, and offline conditions in one click
  -Test real-world loading performance without opening Chrome settings
  
  API Tester
  -Send HTTP requests (GET, POST, PUT, PATCH, DELETE) directly from your browser
  -Set custom headers, query params, and request body
  -Bearer and Basic auth support, JSON response viewer with syntax highlighting
  
  Extract & Export
  -Email Finder — extract all email addresses visible on the page
  -Table Export — download any HTML table as a CSV file
  -Page Export — save the current page as Markdown, HTML, PDF, or Word document
  
  Image Outliner
  -Highlight all images, videos, canvases, inline SVGs, iframes, and CSS background images with color-coded borders
  -Flags img tags with missing alt attributes — instant accessibility audit
  -Non-destructive overlay using CSS outline, zero layout shift
  
  Utilities
  -Clear cookies, localStorage, sessionStorage, and cache in one click
  -Detect the technology stack of any site — framework, CMS, analytics, CDN
  
  Privacy First
  -No data collection, no browsing history stored
  -Everything stays on your device in local Chrome storage
  
  Works on Chrome, Edge, Brave, Arc, and all Chromium-based browsers. No account required for installation. A 7-day free trial with full access is included — no credit card needed.
  
  Visit onhover.in for full documentation and feature videos.

Permissions & access

Permissions

storageunlimitedStorageactiveTabtabsscriptingclipboardWritecookiesbrowsingDatatabCaptureoffscreendownloadsdebugger

Host access

<all_urls>

Screenshots