You might have seen this "[link preview](https://mgx.me/35)" thing on my website - I implemented it using PHP. But I thought I'd share another approach that's even easier to set up.  This guide will show you how to implement a popover link preview system on your blog in minutes, without a complex backend or heavy plugins, by leveraging Cloudflare Workers (free tier) and a small piece of JavaScript. The popover preview system has two parts: 1. **A Cloudflare Worker** that fetches and parses web pages 2. **A frontend script** that handles hover events and shows popover previews ### The Back-end (Cloudflare Worker) ```javascript export default { async fetch(request) { const { searchParams } = new URL(request.url); const targetUrl = searchParams.get("url"); const origin = request.headers.get("Origin"); const allowedOrigin = "https://yourdomain.com"; // Good enough to prevent casual hotlinking. // Build CORS headers only if Origin matches const corsHeaders = { "Content-Type": "application/json", "Access-Control-Allow-Methods": "GET, OPTIONS", "Access-Control-Allow-Headers": "Content-Type", ...(origin === allowedOrigin ? { "Access-Control-Allow-Origin": allowedOrigin } : {}), }; // Handle preflight OPTIONS requests if (request.method === "OPTIONS") { return new Response(null, { headers: corsHeaders }); } if (!targetUrl) { return new Response(JSON.stringify({ error: "No URL provided" }), { status: 400, headers: corsHeaders, }); } // Validate URL let url; try { url = new URL(targetUrl); } catch (e) { return new Response(JSON.stringify({ error: "Invalid URL" }), { status: 400, headers: corsHeaders, }); } let html; try { const controller = new AbortController(); const timeout = setTimeout(() => controller.abort(), 10000); const resp = await fetch(url.toString(), { redirect: "follow", signal: controller.signal, headers: { "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 " + "(KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36", "Accept": "text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8", "Accept-Language": "en-US,en;q=0.9", "Connection": "keep-alive", }, }); clearTimeout(timeout); html = await resp.text(); } catch (e) { return new Response( JSON.stringify({ error: "Failed to fetch the URL (timeout or blocked)" }), { status: 500, headers: corsHeaders } ); } const getMeta = (pattern) => { const match = html.match(pattern); return match ? match[1] : null; }; let title = getMeta(/