HoverPeek

Inspiration

I built HoverPeek because I wanted to see what’s behind links before clicking. With phishing and malicious redirects on the rise, users need instant context. I was inspired by what Chrome already does, such as showing the full link preview in the bottom left corner, and thought that with built-in AI I could make that experience much better.

What it does

HoverPeek displays intelligent link previews when you hover over any link. It identifies link types such as webpages, PDFs, videos, or downloads, evaluates potential security risks, and provides clear color-coded warnings. It also tracks redirect chains and summarizes the destination content using Chrome’s built-in AI APIs. The result is an instant preview that gives users meaningful context and safety information without leaving the current page.

How I built it

HoverPeek is built with React, TypeScript, and Tailwind CSS. It uses the Summarizer API and the Prompt API. I implemented offscreen documents for safe HTML and PDF parsing, a custom preflight security system to assess risk factors, and a caching layer to minimize redundant network requests. Content scripts handle real-time hover detection and dynamic popup rendering to ensure smooth performance and responsiveness.

Challenges I ran into

I encountered several technical and architectural challenges throughout development:

• Handling CORS restrictions when fetching link previews from background scripts
• Managing AI model downloads and session lifecycles within service workers
• Parsing PDFs securely without exposing the extension to malicious content
• Balancing the accuracy of security analysis with performance limits such as timeouts and redirect depth
• Addressing edge cases involving redirect loops, mixed content, and uncommon file types

Each of these challenges required careful debugging, performance tuning, and design iteration.

Accomplishments that I'm proud of

• Seamless integration of Chrome’s built-in AI APIs for real-time content summarization
• A smart risk analysis engine that identifies suspicious patterns with minimal false positives before even getting to the AI APIs
• A polished and accessible interface with adaptive dark and light themes
• An efficient caching system that significantly reduces redundant API calls
• Support for multiple content types including PDFs, videos, images, and downloads, each handled appropriately

What I learned

Working on HoverPeek demonstrated how capable Chrome’s client-side AI has become compared to last year. I saw firsthand that real-time understanding, summarization, and context generation could all happen locally, instantly, and securely within the browser. This experience reinforced how built-in AI can transform everyday browsing into something smarter and safer, without relying on external servers or data sharing.

What's next for HoverPeek

• Adding a user profile for customized previews
• Integration with live threat intelligence feeds for deeper security insights
• Expanded support for additional content types such as Word documents and presentations

Built With

• promptapi
• react
• summarizerapi
• tailwindcss
• typescript