AI Markdown Clipper

A Chrome extension that extracts web page content as markdown and processes it with AI assistants.

Features

• 📋 Extract web pages as clean markdown using Defuddle + Turndown
• 🤖 Process content with AI (OpenAI-compatible APIs)
• ⚙️ Support for various AI providers (OpenAI, Ollama, LocalAI, etc.)
• 🎨 Clean, modern side panel interface
• 💾 Secure API key storage
• 📝 Multiple AI prompts (summarize, translate, extract key points, etc.)

Architecture

• Content Script: Runs on web pages to extract content
• Side Panel: React-based UI for user interaction
• Service Worker: Handles AI API calls and storage

Development

Prerequisites

• Node.js 18+
• npm or pnpm

Installation

# Install dependencies
npm install

# Development mode
npm run dev

# Build for production
npm run build

Loading the Extension

1. Run npm run build
2. Open Chrome and go to chrome://extensions/
3. Enable "Developer mode"
4. Click "Load unpacked" and select the dist folder

Configuration

1. Click the extension icon to open the side panel
2. Click "Settings" to configure your AI provider:
   • Base URL: API endpoint (e.g., https://api.openai.com/v1)
   • API Key: Your API key
   • Model: Model name (e.g., gpt-4o-mini)

Usage

1. Navigate to any web page
2. Click the extension icon
3. Click "Clip Current Page" to extract content
4. Choose an AI action (summarize, translate, etc.)
5. Click "Process with AI" to get results

AI Providers

This extension supports any OpenAI-compatible API:

• OpenAI: https://api.openai.com/v1
• Ollama: http://localhost:11434/v1
• LocalAI: http://localhost:8080/v1
• Groq: https://api.groq.com/openai/v1

Tech Stack

• Build: Vite + CRXJS
• Language: TypeScript
• UI: React + Tailwind CSS
• Extraction: Defuddle + Turndown + DOMPurify
• AI: Fetch API (OpenAI-compatible)

Project Structure

src/
├── manifest.json          # Extension manifest
├── background.ts          # Service worker
├── content/
│   └── extract.ts         # Content script for extraction
├── sidepanel/
│   ├── App.tsx            # Main React component
│   ├── index.tsx          # Entry point
│   └── styles.css         # Tailwind styles
├── utils/
│   └── ai.ts              # AI service utilities
└── types/
    └── index.ts            # TypeScript definitions

Development Notes

• Uses Manifest V3 for modern Chrome extensions
• Implements proper CORS handling for AI API calls
• Secure storage for API keys using Chrome storage API
• Content script injection for cross-origin access

License

MIT