Link Preview Chrome Extension

Inline link previews with a hover chevron, smart-positioned popup, interactive iframe (with spinner + fallback), credibility badge, and per-site/global controls. Built with React, TypeScript, Vite, and Tailwind for Manifest V3.

Features

• Hover any link/pseudo-link → small square chevron appears close to it.
• Click chevron → popup with iframe preview; spinner shows while loading.
• Fallback (favicon/domain/title/description) if the iframe is blocked.
• Close on outside click, scroll, X button, or toggling the chevron.
• One popup at a time; iframe destroyed cleanly when closed.
• Per-site and global enable/disable; local-only storage via chrome.storage.local.
• Credibility badge: HTTPS/HTTP/unsafe domain indicator.
• Options page for size sliders, toggles, domain rules, theme; toolbar popup for quick toggles.

Install & load locally

1. Install dependencies

bun install

2. Build the extension

bun run build

This produces dist/ with manifest.json, assets/content.js, assets/background.js, popup.html, and index.html. 3) Load unpacked in Chrome

• Open chrome://extensions
• Enable Developer mode
• Click Load unpacked and select the dist folder
• Pin the extension icon for quick access to the toolbar popup

Working on it locally

• Dev loop with watch rebuilds:

bun run dev -- --watch

Then reload the unpacked extension in chrome://extensions after assets change.

• One-off build: npm run build
• Lint: npm run lint
• Key entry points:
  • Options page: index.html → src/main.tsx → src/App.tsx
  • Toolbar popup: popup.html → src/popup/main.tsx → src/popup/Popup.tsx
  • Content script: src/extension/contentScript.tsx
  • Background service worker: src/extension/background.ts
• Styling: Tailwind config in tailwind.config.js; base styles in src/index.css; content overlay styles in src/extension/contentStyles.css.

After any manifest or build config change, rebuild and reload the unpacked extension.***