ConsoleNotify

See your console right on the page — no DevTools required.

ConsoleNotify is a browser extension (Firefox and Chrome) that turns console.log, console.warn, console.error and uncaught exceptions into clean, animated on-screen toast notifications. It also runs a handful of on-page SEO checks (missing title, meta description, alt text, etc.) so you can catch issues without ever opening the browser console.

Features

• 🔔 Live console overlay — log, info, warn, error and debug messages appear as toasts, color-coded by type
• 🧵 Grouped duplicates — identical consecutive messages collapse into one toast with a counter badge (×3) instead of stacking
• 🌳 Expandable objects & arrays — click to expand/collapse nested JSON, just like the browser's own console
• 📍 Error location — uncaught errors show the file and line that triggered them, extracted from the stack trace when the browser doesn't report it directly
• 🔍 Basic SEO checks — missing <title>, missing meta description, missing/duplicate <h1>, missing lang attribute, images without alt
• 🎛️ Control bar — per-type counters double as filters, plus pause, clear, and a collapsible layout
• ⚙️ Customizable appearance — border radius, font size and opacity, adjustable live from a settings panel
• 👁️ Independent visibility & listening controls — hide the UI from the popup without stopping the console listener, or pause listening without hiding what's already on screen
• 💾 Persistent settings — every preference is saved via browser.storage.local and restored on the next page load
• 🌐 Works on Firefox and Chrome — a minimal shim maps browser.* to chrome.* so the same codebase runs on both

Installation (development)

Firefox

1. Clone this repo
2. Open Firefox and go to about:debugging#/runtime/this-firefox
3. Click "Load Temporary Add-on…"
4. Select src/manifest.json

The extension will stay loaded until you restart Firefox. To reload after making changes, click "Reload" on the same page.

Chrome

1. Clone this repo
2. Open chrome://extensions
3. Enable "Developer mode" (top right)
4. Click "Load unpacked"
5. Select the src folder

To reload after making changes, click the refresh icon on the extension's card.

Author

Built by Felipe — portfolio