OG Preview

See exactly how any page looks when shared on social media — without posting it.

A browser extension that previews Open Graph cards for the current page or any link you hover over. Renders pixel-accurate simulations for X, Facebook (desktop & mobile), LinkedIn, iMessage, and WhatsApp.

Features

• Popup preview — click the extension icon to see OG cards for the current tab
• Hover tooltips — hover any link to preview how it will look when shared
• 6 platform previews — X, Facebook (desktop + mobile), LinkedIn, iMessage, WhatsApp
• Metadata inspector — view all OG/Twitter meta tags with copy & export
• Missing tag detection — highlights which tags are missing
• Dark/light theme — follows system preference or manual toggle
• Configurable — hover delay, default tab, theme preference

Install

From Releases

1. Download the latest .zip from Releases
2. Unzip and load as an unpacked extension:
   • Chrome: chrome://extensions → Enable Developer mode → Load unpacked
   • Edge: edge://extensions → Enable Developer mode → Load unpacked
   • Brave: brave://extensions → Enable Developer mode → Load unpacked

From Source

git clone https://github.com/timofeevAV/og-preview-extension.git
cd og-preview-extension
pnpm install
pnpm build        # Chrome
pnpm build:edge   # Edge

Load .output/chrome-mv3/ (or edge-mv3/) as an unpacked extension.

Development

Prerequisites: Node.js 22+, pnpm 10+

pnpm install
pnpm dev          # Chrome dev server with HMR
pnpm dev:edge     # Edge dev server with HMR

Commands

Command	Description
pnpm dev	Chrome dev server with HMR
pnpm build	Production build (Chrome)
pnpm check	Run all checks (lint, format, types, tests)
pnpm test	Unit tests (Vitest)
pnpm typecheck	TypeScript check
pnpm lint	ESLint
pnpm format	Prettier format

Architecture

entrypoints/
  background.ts       # Service worker — fetches & parses OG data
  content.tsx          # Content script — DOM extraction + hover tooltip
  popup/              # React 19 popup SPA
    components/
      platform/       # Platform-specific card simulations
lib/                  # Shared utilities (types, messaging, settings, parsing)
components/           # Shared UI components (shadcn)

Messaging flow:

Popup           → getPageOgData → Background → Content script (DOM extraction)
Tooltip (hover) → getOgData     → Background (fetch + parse remote URL)

Tech Stack

WXT ・ React 19 ・ TypeScript ・ Tailwind CSS v4 ・ shadcn/ui ・ Vitest ・ htmlparser2

Contributing

See CONTRIBUTING.md for setup instructions and guidelines. This project uses Conventional Commits — PR titles are validated by CI.

License

MIT