This is a submission for the GitHub Finish-Up-A-Thon Challenge
What I Built
Link Peeker is an ultra-lightweight, privacy-first, and highly intelligent browser extension for Google Chrome and Microsoft Edge. It empowers users to "peek" behind any hyperlink simply by hovering over it—generating a beautiful, live metadata preview card without ever fully opening the page.
But Link Peeker is more than just a quick preview tool; it is a browser security shield. Before you even step foot on a website or trigger a background download, Link Peeker acts as an interceptor. It dynamically analyzes protocols, redirects, file sizes, and executable signatures, wrapping the preview in a visual Traffic Light safety border.
Whether you are a professional researcher gathering references, a student navigating resources, or an everyday surfer dodging malicious redirects and tracking cookies, Link Peeker keeps your browser secure, clean, and blazingly fast.
Demo
Keep your cursor steady, and let Link Peeker do the heavy lifting!
🚦 The Visual "Traffic Light" Safety System in Action:
| 🟢 Green (Secure) | 🟡 Yellow (Caution) | 🔴 Red (High Risk) |
|---|---|---|
| Secure HTTPS links & safe, lightweight web pages. | Non-secure HTTP links, large file downloads, or suspicious redirects. | Executable downloads (.exe, .dmg), script installers, or giant files (>50MB). |
- Dynamic Previews: Intercepts YouTube video durations and Wikipedia's true introductory paragraph.
- One-Click Clip: A sleek, built-in "Copy" button lets researchers capture the Title, exact URL, and Description to their clipboard in a single click.
💡 Demo Note: Scroll to the bottom of this article to see real-world visual screenshots of Link Peeker dynamically generating these secure Green, Caution Yellow, and High-Risk Red cards in action!
The Comeback Story
Where It Started: A Broken, Chrome-Only Prototype
Before entering the GitHub Finish-Up-A-Thon, Link Peeker was an abandoned, brittle experiment. It had several critical flaws that made it practically unusable:
- Fragile & Chrome-Only: It relied on deprecated Chrome APIs, making it completely incompatible with Microsoft Edge and modern Manifest V3 standards.
- The Infamous "Hover Flicker": As soon as the user tried to move the mouse into the preview card, the hover card would rapidly show and hide in an infinite loop, creating a terrible user experience.
-
Memory Leaks & Hard Crashes: If the developer reloaded the extension during testing, active browser tabs would crash with
Uncaught TypeError: Cannot read properties of undefined (reading 'sendMessage')because the orphaned background scripts had no safety guards. - Bandwidth Sinks: It blindly fetched massive files in the background. If a user hovered over a 1GB file, the extension would sit there downloading the entire gigabyte, slowing down their internet.
-
DOM Garbage: If a target website had messy raw
<script>tags, the card would output raw, ugly JavaScript code instead of a clean page description.
The Transformation: Engineering a Senior-Grade Tool
Through rigorous architectural refactoring, we transformed this fragile script into a premium, studio-grade extension:
-
Smart Abort Interceptors (Data Saver):
We implemented an
AbortControllerregistry in the service worker. The moment a user hovers away from a link, Link Peeker fires anABORT_PEEKmessage, instantly canceling the network fetch. If a link points to a file, the background worker reads the headers and aborts the request before downloading the body—saving massive amounts of user bandwidth. -
The "Traffic Light" Safety Engine:
We built a strict safety evaluation tier. We parse redirects (detecting if the hovered link is masking its destination), verify protocol safety, check for executable file types (
.exe,.dmg,.sh), and cross-reference file sizes. - Flicker-Free Transition (Grace Period): To resolve the annoying flicker, we implemented a 250ms grace-period delay timer on mouse transitions. The card stays open seamlessly as the mouse glides between the link and the card, creating an incredibly smooth user experience.
- Self-Healing Extension Shield (Context-Safe): We engineered a detection system that checks for extension invalidation on every event. The moment a reload is detected, the old content script cleanly unregisters its listeners and removes its shadow DOM card, resulting in zero crashes and zero memory leaks.
-
DOM Sanitization & Platform Scrapers:
We built specialized parsers for popular sites. Wikipedia previews bypass tables to pull the true first paragraph, YouTube captures channel details and formats duration strings from raw ISO time codes, and standard web fallbacks scrub all
<script>and<style>tags to ensure clean descriptions.
My Experience with GitHub Copilot & Agentic AI
This project could not have reached this level of professional stability without the power of AI pair programming. Using advanced agentic AI felt like having a veteran browser security engineer sitting right next to me:
- Navigating Complex Web APIs: Copilot helped map out the differences between Google Chrome and Microsoft Edge APIs, showing how to achieve absolute cross-browser compatibility using standardized V3 principles.
- Shadow DOM & Event Bubbling Mastery: Debugging mouse tracking inside a Shadow DOM wrapper is notoriously difficult. The AI effortlessly diagnosed how event targets are retargeted in the Shadow DOM and helped write the elegant 250ms grace-period delay.
- Defensive Error Shielding: When debugging developer reload crashes, the AI proposed a clean self-healing architecture to intercept context-invalidated environments and quietly clean up DOM host nodes.
Thanks to the GitHub Finish-Up-A-Thon, Link Peeker has risen from a broken prototype to a polished, rock-solid security utility that I use every single day to stay safe on the web!
Check out the fully finished code and contribute on GitHub.
Top comments (0)