OpenGraph Preview

A Chrome extension that shows how your pages will look when shared on Facebook, Twitter, and LinkedIn.

Features

• Live Preview Cards - See exactly how your links appear on Facebook, Twitter, and LinkedIn
• Meta Tag Validation - Warnings for missing or suboptimal OpenGraph tags
• URL Resolution - Works with relative paths, file://, and localhost URLs
• Dark Mode - Follows your system theme
• Side Panel UI - Non-intrusive, always visible while browsing

Installation

Chrome Web Store

Install from Chrome Web Store

From Source

1. Clone this repository
2. Run bun install
3. Run bun run build
4. Go to chrome://extensions
5. Enable "Developer mode"
6. Click "Load unpacked"
7. Select the dist/build folder

For file:// URL support, enable "Allow access to file URLs" in extension details.

Usage

1. Navigate to any webpage
2. Click the extension icon in your toolbar
3. The side panel shows your page's social preview
4. Switch between Facebook, Twitter, and LinkedIn tabs
5. Review validation warnings and raw meta tags

Development

bun install          # Install dependencies
bun run build        # Build for distribution
bun run dev          # Watch mode (dev build)
bun run typecheck    # Type check
bun run format       # Format code
bun run test         # Run e2e tests
bun run screenshots  # Generate store screenshots

Meta Tags Supported

OpenGraph

og:title, og:description, og:image, og:url, og:type, og:site_name, og:image:width, og:image:height

Twitter Cards

twitter:card, twitter:title, twitter:description, twitter:image, twitter:site, twitter:creator

Fallbacks

<title>, <meta name="description">, <link rel="canonical">

Browser Support

• Chrome 114+
• Chromium-based browsers (Edge, Brave, Arc, etc.)

Privacy

This extension:

• Does not collect any data
• Does not make any network requests
• Runs entirely locally in your browser
• Only reads meta tags from pages you visit when you click the icon

License

MIT - see LICENSE