PageLens Inspector

Product Context

PageLens gives users a compact snapshot of page metadata, headings, links, images, accessibility hints, and basic performance information.

The User Problem

Objectives

The extension experience was shaped around clear workflow control, browser permissions, and recoverable states.

• Create a compact popup and side panel
• Prioritize key page information
• Use understandable accessibility hints
• Support copy and export actions
• Keep analysis fast and non-destructive

Core Workflow

Understand the page at a glance.

• Metadata summary
• Heading outline
• Links and images
• Accessibility hints
• Copy and export
• Issue filters

Visual System

Crisp inspector UI with dark charcoal, cyan, lime, amber, and white, structured accordions, and compact data visualization.

Browser Integration

The interface explains supported pages, permissions, active-tab status, automation progress, and recovery actions without blocking normal browsing.

• JavaScript
• Chrome APIs
• Chrome Manifest V3

Final Extension Gallery

The gallery follows the supplied extension brief, UI hierarchy, and exact image manifest.

Portfolio Disclosure